Teemakoodin muokkaaminen

Varoitus

Jos teeman koodiin tekemäsi muutokset eivät ole yhteensopivia teemPäivityksen kanssa, kaikki koodimuutoksesi poistetaan päivitetystä versiosta. Teeman koodia kannattaa muokata vain, jos et voi tehdä tarvitsemiasi muutoksia Shopify-sovelluksen tai teemaeditorin avulla.

Voit muokata teemasi koodia ja tehdä yksityiskohtaisia muutoksia verkkokauppaasi koodieditorilla. Useimmat teeman muodostavista tiedostoista sisältävät Liquidia, joka on Shopifyn mallikieli. Teematiedostot sisältävät myös HTML:ää, CSS:ää, JSONia ja JavaScriptiä. Muokkaa teeman koodia vain, jos osaat HTML:ää ja CSS:ää ja ymmärrät Liquid-kielen perusteet.

Voit muokata teeman koodia vasta, kun olet ostanut sen. Tämä koskee myös tekoälypohjaisen koodigeneraattorin käyttöä teemaeditorissa. Jos käytät maksullisen teeman kokeiluversiota, sinun on ostettava teema, ennen kuin voit tehdä koodimuutoksia.

Kasvata liiketoimintaasi

Jos haluat lisätä mukautettuja ominaisuuksia tai koodia, mutta sinulla ei ole kokemusta verkkosivujen kehittämisestä HTML:n, CSS:n ja JavaScriptin avulla, harkitse Shopify Partnerin palkkaamista.

Varoitus

Ennen kuin aloitat teeman mukauttamisen, suorita seuraavat suositellut toimet:

• Tee teemastasi kaksoiskappale luodaksesi varmuuskopion. Näin voit tarvittaessa helposti hylätä muutoksesi ja aloittaa alusta.
• Varmista, että ymmärrät, mikä tuen taso on saatavilla.
• Tutustu kuvien lataamista koskeviin vaatimuksiin ja parhaisiin käytäntöihin.

Koodieditori näyttää teematiedostojesi hakemiston ja tilan tiedostojen näyttämistä ja muokkaamista varten. Kun napsautat hakemistossa olevaa tiedostoa, se avautuu koodieditorissa. Voit avata ja muokata useita tiedostoja samanaikaisesti. Voit myös avata ja tarkastella useita tiedostoja samanaikaisesti.

Teemakoodin muokkaaminen

Voit muokata teemasi tiedostoja koodieditorilla.

Vaiheet:

Tietokone

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

Mobiili

1. Napauta Shopify app -sovelluksessa -kuvaketta.

2. Napauta Myyntikanavat-osiossa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Napauta > Muokkaa koodia.

Muutosten tallentaminen

Kun muokkaat tiedostoa, välilehden nimen viereen ilmestyy piste merkiksi tallentamattomista muutoksista. Tallenna muutokset napsauttamalla Tallenna-painiketta. Voit tallentaa muutokset myös näppäinyhdistelmällä ⌘ + S (Mac) tai Ctrl + S (Windows).

Teemakoodin muotoileminen

Voit korjata koodin sisennyksen avaamalla komentopaletin näppäinyhdistelmällä ⌘ + Shift + P (Mac) tai Ctrl + Shift + P (Windows), kirjoittamalla format ja valitsemalla sitten Muotoile asiakirja.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Avaa tiedosto, jonka haluat muotoilla.

4. Paina näppäinyhdistelmää ⌘ + P (Mac) tai Ctrl + P (Windows).

5. Kirjoita komentopalettiin format ja paina sitten Enter-näppäintä.

6. Tallenna tiedosto.

Tiedostomuutosten seuraaminen

Jos haluat palauttaa muokatun teematiedoston aiempaan versioon, käytä kyseisen tiedoston Aikajana-näkymää.

Aikajana-näkymä palauttaa yhden olemassa olevan tiedoston kerrallaan. Se ei palauta koko teemaa eikä se voi palauttaa poistettuja teematiedostoja. Aikajanan historia on rajallinen, joten vanhempia versioita ei välttämättä ole saatavilla.

Palauttaminen korvaa koko tiedoston sisällön, mukaan lukien muutokset, jotka saatat haluta säilyttää. Ennen kuin palautat tiedoston, kopioi nykyisen tiedoston sisältö turvalliseen paikkaan, jos haluat mahdollisesti säilyttää jotkin muutokset.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Avaa olemassa oleva tiedosto, jota haluat tarkastella tai jonka haluat palauttaa.

4. Valinnainen: Jos haluat mahdollisesti säilyttää jotkin nykyisistä muutoksista, kopioi nykyisen tiedoston sisältö turvalliseen paikkaan ennen palauttamista.

5. Klikkaa Aikajana-näkymässä aikajanan merkintää vertaillaksesi eroja.

6. Jos haluat korvata koko tiedoston sisällön valitulla aiemmalla versiolla, klikkaa aikajanan merkintää hiiren kakkospainikkeella ja valitse sitten Palauta sisältö.

7. Napsauta Palauta.

Theme Check

Koodieditori sisältää Theme Check -ominaisuuden, joka auttaa ehkäisemään virheitä antamalla välitöntä palautetta koodia kirjoitettaessa sen sijaan, että virheet havaittaisiin vasta live-teemassasi.

Koodieditorissa Theme Check voi tunnistaa muokatusta koodista seuraavat virheet:

• Jäsentäjän estävät komentosarjat, jotka voivat hidastaa myyntipaikkaa
• Epäjohdonmukaisuudet käännöstiedostojen välillä, kuten puuttuvat käännösavaimet tai käännökset, jotka eivät täsmää paikkatiedostossa
• Puuttuvat mallit

Virheet on merkitty punaisella viivalla koodin alle. Näet virheen viemällä hiiren osoittimen korostetun rivin päälle.

Haku ja korvaaminen koodieditorissa

Voit tehdä hakuja koodieditorissa jommallakummalla seuraavista tavoista:

• Etsi koodia tietystä tiedostosta.
• Etsi koodia kaikista teeman tiedostoista.

Voit myös korvata koodia tietyssä tiedostossa tai useita esiintymiä kaikissa teematiedostoissa. Voit myös etsiä tiedostoa nimen perusteella, jotta voit avata tiedoston.

Haku tiedoston sisällä

Voit etsiä koodia tietystä tiedostosta ja korvata sen. Käytä nuolinäppäimiä kunkin koodin esiintymän tarkastelemiseen.

Kun olet etsinyt koodia, voit korvata sen tiedostossa.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Avaa tiedosto, josta haluat etsiä.

4. Paina ⌘ + F Mac-tietokoneella tai Ctrl + F Windows-tietokoneella.

5. Kirjoita hakutermi Haku-kenttään.

6. Valinnainen: Jos haluat korvata koodia, tee seuraavat toimet:

• Napsauta hakuikkunassa -kuvaketta.
• Kirjoita korvaava koodi Korvaa-kenttään. Voit napsauttaa Säilytä kirjainkoko -vaihtoehtoa, jotta korvaavan koodin kirjainkoko vastaa olemassa olevaa esiintymää.
• Napsauta Korvaa-kuvaketta korvataksesi yhden esiintymän kerrallaan tai napsauta Korvaa kaikki -kuvaketta korvataksesi kaikki esiintymät kerralla.

Haku kaikista tiedostoista

Napsauta vasemman sivupalkin hakupainiketta hakeaksesi kaikista teematiedostoista. Tulokset näyttävät kaikki hakutermisi esiintymät ja tiedoston, jossa se esiintyy.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Avaa hakupaneeli napsauttamalla -kuvaketta.

4. Kirjoita hakutermi Haku-kenttään.

5. Valinnainen: Jos haluat korvata koodia, tee seuraavat toimet:

• Napsauta hakuikkunassa -kuvaketta.
• Kirjoita korvaava koodi Korvaa-kenttään.
• Korvaa yksi esiintymä kerrallaan tai kaikki esiintymät kerralla.

Tarkennetut hakuasetukset

Voit rajata hakutuloksia yhdellä tai useammalla seuraavista hakuvaihtoehdoista:

• Sama kirjainkoko palauttaa hakutermit, jotka vastaavat kirjainkokoa. Jos esimerkiksi kirjoitat tuote, haku korostaa kaikki ”tuote”- tai ”Tuote”-esiintymät. Jos valitset Sama kirjainkoko, haku korostaa vain tuote-esiintymät.
• Vain kokonaiset sanat palauttaa hakutermit, jotka vastaavat tarkalleen sanaa, ja jättää pois osittaiset osumat. Jos esimerkiksi kirjoitat ostoskori, haku korostaa ”ostoskori”-esiintymät, mutta ei ”päälaatikko”-esiintymiä.
• Käytä säännöllistä lauseketta palauttaa hakutulokset, jotka vastaavat säännöllistä lauseketta (regex). Regex on merkkijono, joka määrittää tekstissä vastaavuusmallin.

Varoitus

Regexin käyttö on edistynyt mukautustekniikka. Voit käyttää kolmannen osapuolen työkalua, kuten regex101 tai RegExr, apuna regex-merkkijonon muodostamisessa.

Hakupaneelissa voit myös valita tiedostoja ja kansioita, jotka sisällytetään hakutuloksiin tai jätetään niiden ulkopuolelle.

Avaa tarkennettu valikko napsauttamalla . Voit antaa minkä tahansa tiedoston tai kansion polun sisällytettävät tiedostot- tai pois jätettävät tiedostot -kenttiin. Jos haluat lisätä useamman kuin yhden tiedoston tai kansion, erota ne välilyönnillä ja pilkulla. Jos haluat esimerkiksi etsiä tiedostoja sections-kansiosta, kirjoita ./sections sisällytettävät tiedostot -kenttään.

Voit myös etsiä tietyn kansion sisällöstä tiedostohakemistonäkymässä. Napsauta kansiota hiiren kakkospainikkeella ja valitse sitten Etsi kansiosta... pudotusvalikosta.

Teematiedostojen hallinta

Voit hallita tiedostoja teemasi koodissa. Voit poistaa, lisätä ja nimetä uudelleen tiedostoja sekä palauttaa muokattuja kooditiedostoja niiden Aikajana-näkymästä, kun aiempi versio on saatavilla. assets-kansiossa olevilla resurssitiedostoilla, kuten kuvilla, CSS- ja JavaScript-tiedostoilla sekä fonteilla, ei ole aikajanahistoriaa.

Teematiedoston avaaminen

Avaa teematiedosto napsauttamalla kansiota ja sitten tiedoston nimeä tiedostohallinnassa. Voit myös etsiä tiedostoja nimen tai tiedostopäätteen mukaan ja avata sitten tiedoston.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Paina näppäinyhdistelmää ⌘ + P (Mac) tai Ctrl + P (Windows).

4. Kirjoita tiedostonimi hakupalkkiin ja valitse tiedosto tai valitse tiedosto Äskettäin avatut -luettelosta.

Uuden teematiedoston lisääminen

Lisää tiedosto valitsemalla kansio, napsauttamalla Uusi tiedosto -kuvaketta ja antamalla sitten tiedostonimi ja tiedostopääte.

Tiedostonimet voivat sisältää merkkejä A–Z ja numeroita 0–9, mutta eivät välilyöntejä. Erota sanat yhdysmerkeillä tai alaviivoilla. Tiedostopääte määritellään pisteellä . ja päätteen tyypillä. Esimerkiksi .liquid tai .css.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Napsauta kansiota, johon haluat lisätä uuden tiedoston.

4. Napsauta kansion nimeä hiiren kakkospainikkeella ja valitse Uusi tiedosto... pudotusvalikosta.

5. Anna tiedostolle uusi nimi.

6. Paina näppäimistön Enter-näppäintä.

Uuden resurssitiedoston lataaminen

Voit ladata uuden resurssitiedoston, kuten kuvakkeen tai kuvatiedoston, koodieditorin assets-kansioon.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Napsauta assets-kansiota hiiren kakkospainikkeella.

4. Napsauta Lataa....

5. Valitse tiedosto, jonka haluat ladata.

6. Napsauta Avaa.

Teematiedoston nimeäminen uudelleen

Voit nimetä tiedoston uudelleen napsauttamalla sitä hiiren kakkospainikkeella. Varmista, ettet muokkaa tai poista tiedostopäätettä. Tiedostopääte muodostuu pisteestä . ja päätetyypistä. Esimerkiksi .liquid tai .css. Tiedostonimet voivat sisältää merkkejä A–Z ja 0–9, eivätkä ne voi sisältää välilyöntejä. Erota sanat toisistaan yhdysmerkeillä tai alaviivoilla. Jos tiedostonimi ei kelpaa, uutta nimeä ei tallenneta.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Napsauta tiedostoa hiiren kakkospainikkeella ja valitse pudotusvalikosta Nimeä uudelleen....

4. Anna tiedostolle uusi nimi.

5. Paina näppäimistön Enter-näppäintä.

Teematiedoston poistaminen

Varoitus

Teematiedoston poistaminen saattaa rikkoa teemasi. Ennen kuin poistat tiedostoja, varmista, että teet teemastasi kaksoiskappaleen.

Voit poistaa mitä tahansa tiedostoja teemastasi. Poistettuja teematiedostoja ei voi palauttaa.

Vaiheet:

1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

2. Napsauta > Muokkaa koodia.

3. Napsauta tiedostoa hiiren kakkospainikkeella ja valitse pudotusvalikosta Poista pysyvästi.

4. Napsauta Poista.