Verkkokaupan teeman vianmääritys

Kuvat saattavat näkyä eri tavalla kuin odotat, mutta tämä voi johtua siitä, että kuva ei sovi teemasi käyttötarkoitukseen. Varmista, että käyttämäsi kuvan mitat ovat oikeat. Tutustu seuraavaan luetteloon yleisistä näyttöongelmista, joita voi ilmetä, kun lataat yhteensopimattoman kuvan:

• Jos ylätunnisteesi näkyy odotettua suurempana ja logokuvasi odotettua pienempänä, se saattaa johtua logokuvatiedoston tyhjästä tilasta. Logokuvatiedoston tyhjä tila voi saada logon näyttämään pienemmältä ja ylätunnisteen suuremmalta. Muokkaa kuvatiedostoa varmistaaksesi, että se on rajattu logon ympäriltä ja ettei siinä ole tyhjää tilaa.
• Jos diaesityksen kuvaa rajataan, se on tarkoituksellista, jotta kuva näkyy samalla tavalla sekä mobiililaitteella että tietokoneella. Mobiilinäytöllä sisältö on paljon pienempää, joten sen pienentäminen kutistaisi myös yksityiskohdat näkymättömiin. Siksi sisältöä rajataan, jotta yksityiskohdat säilyvät näkyvissä. Leveyttään korkeampi pystykuva voi viedä paljon tilaa myös tietokoneen näytöllä, minkä vuoksi diaesityksen kuvilla on enimmäiskorkeus. Voit lisätä keskipisteen diaesityksen kuviisi varmistaaksesi, että keskipiste on aina diaesityksen kuvan keskellä.

  Mukautuva korkeus -vaihtoehto: Monissa Shopify-teemoissa on diaesityksille mukautuva korkeusasetus, joka säätää diaesityksen korkeuden ensimmäisen kuvan mukaiseksi. Tämä vähentää rajausta eri näyttökoissa. Tämä ominaisuus on saatavilla kaikissa tällä hetkellä tuetuissa Shoifyn kehittämissä teemoissa.

• Jos GIF-kuva ei näy oikein ja se on lisätty myyntipaikkaasi rich text editorilla, esimerkiksi tuotekuvaukseen tai blogipostaukseen, ongelma saattaa johtua kuvan koosta. Voit korjata tämän klikkaamalla GIF-kuvaa rich text editorissa ja sitten Muokkaa kuvaa. Valitse Kuvan koko -pudotusvalikosta Alkuperäinen. Voit sen jälkeen muuttaa GIF-kuvan kokoa klikkaamalla ja vetämällä kuvan kulmia sisäänpäin pienentääksesi sitä tai ulospäin suurentaaksesi sitä.
• Jos kuviesi värit muuttuvat myyntipaikassasi merkittävästi alkuperäiseen kuvaan verrattuna, kuvasi eivät ehkä ole standardin mukaisessa sRGB-väriavaruudessa (Red Green Blue). Korjaa värimuutos tallentamalla tiedosto kuvankäsittelysovelluksessa sRGB-muodossa. Tähän käytettyjä yleisiä termejä ovat ”Web optimize”, ”Adjust image for Web” tai ”Save for Web”. Lue lisää väriprofiileista.
• Jos tuotekuvasi eivät ole kohdakkain kokoelmasivuillasi, sinun on ehkä säädettävä tuotekuvatiedostojen kuvasuhdetta siten, että niiden korkeuden ja leveyden suhde on sama, ja ladattava sitten tuotekuvat uudelleen. Voit myös käyttää Shopify App Storesta löytyvää kuvankäsittelysovellusta.

Tutustu seuraaviin ongelmiin ja niiden vianmääritysvaiheisiin:

• Tuotteita puuttuu: Jos tuotteitasi puuttuu myyntipaikastasi, sinun on ehkä tarkistettava tuotteesi Tila ja Myyntikanavat Shopifyn ohjausnäkymän Julkaiseminen-osiosta. Varmista, että tuotteen tila on Aktiivinen ja että tuote on saatavilla Verkkokauppa-myyntikanavassa.
• Kokoelmia puuttuu: Jos kokoelmiasi puuttuu myyntipaikastasi, sinun on ehkä tarkistettava kokoelman Myyntikanavat Shopifyn ohjausnäkymän Julkaiseminen-osiosta. Varmista, että kokoelma on saatavilla Verkkokauppa-myyntikanavassa ja että kokoelmasi on lisätty valikoihisi.
• Kokoelmat näkyvät, mutta tuotteita puuttuu: Jos kokoelmasi näkyvät, mutta tuotteita puuttuu, sinun on ehkä tarkistettava kokoelman tunnistefiltterit Valikot-asetuksistasi. Varmista, ettei Suodata kokoelma tunnisteilla -kentässä ole tunnisteita, jotka saattavat estää tuotteiden näyttämisen.
• Valuutta ei ole oikein: Jos valuuttasi ei näy oikein tuotteissa tai kokoelmissa, kannattaa tarkistaa Valuutan näyttömuoto -kohta Asetukset > Yleiset-sivun Kaupan oletusasetukset -osiosta ja varmistaa, ettei siinä ole mitään ylimääräistä koodia. Lue lisää valuutan näyttömuodon muotoilemisesta asiakkaille.
• Jotkin tuotteet näkyvät eri tavalla: Jos jotkin tuotteet tai kokoelmat näkyvät eri tavalla kuin toiset, tarkista tuotteille tai kokoelmille määritetty teemamalli Shopifyn ohjausnäkymässäsi.
• Tuote- tai kokoelmamalleja ei voi muokata: Jos oletusarvoiset tuote- tai kokoelmamallit näkyvät harmaina eikä niitä voi valita teemaeditorissa, sinun on asetettava vähintään 1 tuote tai kokoelma saataville Verkkokauppa-myyntikanavassa. Et voi muokata näitä oletusmalleja, jos sinulla ei ole tuotteita tai kokoelmia saatavilla muutosten esikatselua varten. Lue lisää kokoelman saatavuuden muuttamisesta ja tuotteiden saatavuuden määrittämisestä myyntikanavissasi.

Jos käännetty sisältösi ei näy oikein tai sitä puuttuu myyntipaikastasi, sisällössä saattaa olla vanhentuneita tai puuttuvia käännöksiä. Sisältö saattaa myös olla tietyn markkina-alueen mallissa. Aina kun lisäät uutta sisältöä oletuskielelläsi, muista suorittaa automaattinen käännös uudelleen tai lisätä uudet käännökset manuaalisesti.

Käännettyyn sisältöön voidaan soveltaa seuraavia tiloja:

• Käännetty: Sisällölle on saatavilla käännöksiä.
• Vanhentunut: Oletuskielinen sisältö on päivitetty, mutta käännökset eivät vastaa päivityksiä.
• Kääntämätön: Tälle sisältötyypille ei ole käännöksiä.

Kun tarkastelet käännettyä sisältöäsi, päivitä kaikki kääntämätön tai vanhentunut sisältö, jolloin käännetyn sisällön pitäisi näkyä oikein.

Lue lisää kauppasi kääntämisestä ja lokalisoinnista.

Jos myyntipaikkasi ja teemaeditori eivät näytä samoja tietoja, tarkista muokkaamasi teemamalli. Sinun on ehkä muokattava teemamallejasi, jotta ne näyttävät oikeat tiedot.

Markkina-alueiden ohitusten avulla voit luoda erilaisia myyntipaikkoja eri markkina-alueille ja näyttää käännettyä sisältöä. Olet saattanut vahingossa työskennellä tietyn markkina-alueen tai B2B:n parissa tehdessäsi päivityksiä. Paikanna sisältö teemaeditorin Markkina-alue-pudotusvalikosta ja varmista, että se on oikeilla markkina-alueilla.

Lue lisää markkina-alueiden ohituksista.

Kaikki Shopify Theme Storessa saatavilla olevat teemat ovat responsiivisia teemoja, mikä tarkoittaa, että teema mukautuu näytön kokoon. Voit vaihtaa teemaeditorissa näytön koon näkymää teeman muokkauksen aikana varmistaaksesi, että sivusi ja kuvasi näkyvät oikein. Lue lisää eri näyttökokojen tarkastelusta teemaeditorissa.

Monissa osioissa ja lohkoissa on mobiiliasetuksia, joita voit mukauttaa. Voit esimerkiksi määrittää asetuksen Sarakkeiden määrä mobiililaitteella Samankaltaiset tuotteet -osiossa. Voit tarkistaa kunkin mallin mobiililaitteisiin liittyvät osioasetukset ja tehdä vianmäärityksen mobiilinäyttöjen näyttöongelmille.

Jotkin teeman ominaisuudet saattavat näkyä eri tavalla mobiililaitteella kuin tietokoneella, jotta teema on varmasti saavutettava kaikenkokoisilla näytöillä. Esimerkiksi tietokoneen näytöllä diaesityksessäsi voi olla tekstin peittokuva, jossa teksti näkyy kuvan päällä, usein kuvan värin peittävyyden tai tekstivarjon kanssa. Mobiilinäytöillä teksti saattaa kuitenkin näkyä diaesityksen alla. Tämä on suunniteltu saavutettavuusominaisuus, jotta teksti on luettavissa kaikenkokoisilla näytöillä. Jos teksti olisi sen sijaan peittokuva, se näkyisi mobiililaitteella hyvin pienenä, mikä vaikeuttaisi lukemista.

Jos esittelykokoelma-osiosi tai kokoelmasivusi näyttävät epäyhtenäisen kokoisilta tai eivät ole kohdakkain, kun tarkastelet myyntipaikkaasi mobiililaitteella, se saattaa johtua epäyhtenäisistä kuvasuhteista. Kuvaruudukot, kuten kokoelmassa tai esittelykokoelmassa näkyvät tuotekuvat, on rakennettu reagoimaan näytön kokoon. Jos kuvillasi on kuvaruudukossa epäyhtenäiset kuvasuhteet, ne saattavat näkyä eri tavalla näytön koosta riippuen. Neliönmuotoiset, kooltaan 2048 x 2048 pikseliä olevat tuotekuvat toimivat yleensä parhaiten tuoteruudukoissa. Päivitä kuvasi niin, että niillä on yhtenäinen kuvasuhde, jotta ne optimoituvat kaikenkokoisille näytöille. Lue lisää kuvan kuvasuhteesta.

Joskus rich text editoriin lisätty HTML-koodi on ristiriidassa teemasi koodin kanssa. Jos ongelma esiintyy yhdellä sivulla, kuten tuotesivulla, sivulla tai blogipostauksessa, se saattaa johtua ylimääräisestä HTML-koodista. Sitä voi joskus tulla mukaan, kun kopioit ja liität tekstiä toiselta sivustolta.

Tarkista HTML-koodi

Voit tarkistaa HTML-koodin rich text editorissa.

Vaiheet:

1. Siirry sivulle ohjausnäkymässäsi.
2. Napsauta Näytä HTML -painiketta tarkistaaksesi HTML-koodin.
3. Paikanna kaikki HTML-koodi, joka saattaa aiheuttaa näyttöongelmia, ja poista se.
4. Napsauta Tallenna.

Poista muotoilu

Voit korostaa osan tekstistä ja poistaa sen HTML-muotoilun.

Vaiheet:

1. Siirry sivulle ohjausnäkymässäsi.
2. Valitse teksti, jossa on muotoiluongelmia.
3. Napsauta 🚫-painiketta.
4. Napsauta Tallenna.

Lue lisää rich text editorista.

Jos myyntipaikkasi sisältää koodia, joka uudelleenohjaa käyttäjiä URL-osoitteisiin, jotka eivät liity kauppaasi, varmista, että uudelleenohjaus on poistettu käytöstä, kun käytät teemaeditoria.

Tällainen uudelleenohjaus voidaan esimerkiksi lisätä myyntipaikkaan ohjaamaan asiakkaita eri Shopify-kauppoihin heidän sijaintinsa perusteella. Tämän tyyppinen uudelleenohjauskoodi voi olla joko teemassasi tai asentamassasi sovelluksessa.

Varmistaaksesi, että uudelleenohjaus ei häiritse editorikokemusta, käytä JavaScriptissä viittausta window.Shopify.designMode-muuttujaan poistaaksesi uudelleenohjauksen käytöstä, kun käytät teemaeditoria. Tämän muuttujan arvo on true, kun myyntipaikka ladataan editorissa, ja false, kun sitä ei ladata.

Jos sinulla on kokoontaitettavia lohkoja tai muita teemalohkoja, jotka näyttävät saman sisällön kaikilla tuotesivuilla, sinun on määritettävä dynaamisia lähteitä metakenttien avulla. Näin käy yleensä silloin, kun kauppiaat lisäävät tuotekohtaisia tietoja, kuten ainesosia tai hoito-ohjeita, yhteen tuotteeseen, mutta ne näkyvät kaikissa tuotteissa.

Sama teksti kaikissa tuotteissa kokoontaitettavissa lohkoissa

Kun lisäät sisältöä suoraan teemaeditorin kokoontaittuvaan lohkoon, kyseinen sisältö näkyy kaikilla tuotesivuilla. Jos haluat näyttää tuotekohtaista sisältöä, sinun on käytettävä dynaamisia lähteitä sisällönkuvauskenttien kanssa:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Asetukset > Metakentät > Tuotteet.
2. Napsauta Lisää määritys.
3. Anna metakentälle Nimi ja napsauta sitten Valitse sisältötyyppi.
4. Valitse Teksti ja Monirivinen teksti.
5. Napsauta Tallenna.
6. Siirry tuotesivulle ohjausnäkymässäsi ja vieritä sivun alareunassa olevaan metakentät-osioon.
7. Lisää tuotekohtainen sisältösi luomaasi metakenttään.
8. Siirry teemaeditorissa tuotemalliin ja etsi Kokoontaitettava rivi -osio.
9. Napsauta Rivin sisältö -asetuksessa -painiketta.
10. Valitse metakenttäsi käytettävissä olevista vaihtoehdoista.
11. Tallenna muutoksesi.

Nyt kukin tuote näyttää oman sisältönsä, kun metakenttä on täytetty, eikä sisältöä näytetä, jos kyseisen tuotteen metakenttä on tyhjä.

Lue lisää metakenttien näyttämisestä verkkokaupassasi ja metakenttien ja metaobjektien käytöstä dynaamisten lähteiden kanssa.

Jos teemasi koodissa on syntaksivirhe, teemaeditorissasi näytetään varoitusviesti HTML-virhe löytyi tai Teemavirhe. Virheilmoituksessa näkyy Liquid-tiedosto, joka sisältää virheen.

Varoitusviesti Etsimääsi teemaa ei löytynyt saattaa tulla näkyviin, jos koodissa on rikkinäistä HTML:ää. Sivun lataaminen teemaeditorissa voi epäonnistua monista syistä, kuten seuraavista syistä:

• verkkoyhteysongelmat
• virheellinen Liquid-koodi teemassasi

Voit etsiä koodimuutokset teemasi koodista ja korjata koodin. Jos pystyt tunnistamaan kyseisen olemassa olevan tiedoston, voit palauttaa sen saatavilla olevaan aiempaan versioon koodieditorin Aikajana-näkymässä.

Vaiheet:

1. Napsauta virheilmoituksessa linkitettyä .liquid-osiotiedostoa tai tarkista tiedostojen viimeisimmät muutokset. Tämä vie sinut Muokkaa HTML/CSS (Cascading Style Sheets) -sivulle, ja tiedosto avautuu koodieditorissa.
2. Selaa tiedoston koodia ja yritä löytää virheellistä HTML- tai Liquid-koodia. Koodieditori näyttää mahdolliset syntaksivirheet punaisella. Yleisiä ongelmia ovat esimerkiksi seuraavat:
   • Ylimääräiset HTML-lopputunnisteet, esimerkiksi lopputunniste </div> ilman aloitustunnistetta <div>
   • Sulkemattomat HTML-tunnisteet, esimerkiksi aloitustunniste <div> ilman lopputunnistetta </div>
   • Virheelliset HTML-tunnisteet, esimerkiksi <div class="my-class" ilman >-merkkiä
   • Virheellinen Liquid-koodi
   • Virheellinen HTML-koodi sisällytetyssä teeman koodinpätkätiedostossa
3. Kun olet löytänyt ongelman, korjaa koodi teematiedostossasi. Jos käytät koodieditorin Aikajana-näkymää aiemman version valitsemiseen ja valitset Palauta sisältö, koko tiedoston sisältö korvataan. Kopioi nykyisen tiedoston sisältö ensin turvalliseen paikkaan, jos haluat mahdollisesti säilyttää jotkin muutokset.
4. Napsauta Tallenna.
5. Palaa teemaeditoriin valitsemalla Muokkaa teemaa ja varmista, että virheilmoitus on poistunut.
6. Siirry myyntipaikkaasi ja tarkista, että se näkyy odotetusti.

”Ainutlaatuisten käyttäjänimien enimmäismäärä ylittyi” -virhe

Jos etusivullasi näkyy Liquid-virheilmoitus, kuten ”Exceeded maximum number of unique handles for all_products”, se tarkoittaa yleensä, että olet lisännyt etusivullesi liian monta Esittelytuote-osiota (useimmissa teemoissa tyypillisesti yli 20 osiota).

Voit ratkaista ongelman seuraavasti:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.
2. Etsi nykyinen teemasi ja valitse Muokkaa teemaa.
3. Siirry etusivullesi.
4. Poista joitakin Esittelytuote-osioita pysyäksesi teeman rajoissa.
5. Harkitse sen sijaan Esittelykokoelma-osioiden käyttöä, joiden avulla voit näyttää useita tuotteita tehokkaammin ja parantaa kauppasi tehokkuutta.

Maksukuvakkeet sisältyvät yleensä oletusarvoisesti useimpien teemojen alatunnisteisiin, jotta asiakkaat näkevät, mitä maksutapoja hyväksyt. Jos maksukuvakkeet eivät näy teemasi alatunnisteessa, voit tarkistaa seuraavat asiat:

1. Siirry teemaeditorissa Alatunniste-osioon ja varmista, että Näytä maksukuvakkeet -asetus on käytössä.
2. Siirry Shopifyn ohjausnäkymässä kohtaan Asetukset > Maksut ja varmista, että käytössä on vähintään yksi aktiivinen maksutapa. Joidenkin maksutapojen kuvakkeet tulevat näkyviin vasta, kun tilin asennus on valmis.
3. Jos käytät kolmannen osapuolen maksuportaalia, maksukuvakkeet eivät välttämättä näy alustan rajoitusten vuoksi.

Jos olet tarkistanut nämä asetukset, eivätkä maksukuvakkeet vieläkään näy, sinun on ehkä hankittava tukea teemallesi.