Uređivanje koda teme

Oprez

Ako su promjene koje ste unijeli u kôd teme nekompatibilne s ažuriranjem teme, u ažuriranoj će se kopiji ukloniti sve promjene koda. Kôd teme trebali biste uređivati samo ako ne možete unijeti potrebne promjene s pomoću aplikacije Shopify ili u alatu za uređivanje tema.

Kôd teme možete urediti da biste u alatu za uređivanje koda unijeli detaljne promjene u internetsku trgovinu. Većina datoteka koje čine temu sadrži Liquid, Shopifyjev jezik predloška. Datoteke teme sadrže i HTML, CSS, JSON te JavaScript. Kôd teme uređujte isključivo ako poznajete HTML i CSS te imate osnovno razumijevanje jezika Liquid.

Kôd teme možete urediti tek nakon što je kupite. To uključuje upotrebu AI generatora koda u alatu za uređivanje tema. Ako upotrebljavate probnu verziju plaćene teme, morate je kupiti prije no što u nju budete mogli unositi promjene koda.

Razvijajte svoje poslovanje

Ako želite dodati prilagođene značajke ili kôd, ali nemate iskustva s razvojem mrežnih mjesta u jezicima HTML, CSS i JavaScript, razmislite o angažiranju Shopify Partnera.

Oprez

Kako biste se pripremili za prilagođavanje teme, izvršite sljedeće preporučene zadatke:

• Duplicirajte svoju temu kako biste izradili sigurnosnu kopiju. Tako ćete lako moći odbaciti promjene i započeti iznova ako to bude potrebno.
• Provjerite razumijete li koja je razina podrške dostupna.
• Saznajte više o zahtjevima i najboljim praksama za prijenos slika.

Uređivač koda prikazuje direktorij datoteka vaše teme te prostor za prikaz i uređivanje datoteka. Kada kliknete datoteku u direktoriju, ona se otvara u uređivaču koda. Možete istovremeno otvoriti i uređivati više datoteka. Također, možete istovremeno otvoriti i pregledavati više datoteka.

Uređivanje koda teme

Uređivač koda možete upotrijebiti za izmjenu datoteka svoje teme.

Koraci:

Stolno računalo

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

Mobilni uređaj

1. U aplikaciji Shopify dodirnite ikonu .

2. U odjeljku Prodajni kanali dodirnite Internetska trgovina.

3. Dodirnite Upravljaj temama.

4. Dodirnite > Uredi kod.

Spremanje promjena

Kada uređujete datoteku, pored naziva kartice prikazuje se točka koja označava nespremljene promjene. Kliknite na gumb Spremi kako biste spremili promjene. Za spremanje promjena možete pritisnuti i ⌘ + S na Macu ili Ctrl + S na sustavu Windows.

Formatiranje koda teme

Da biste popravili uvlaku koda, otvorite paletu naredbi s ⌘ + Shift + P na Macu ili Ctrl + Shift + P na sustavu Windows, unesite format, a zatim odaberite Format document.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Otvorite datoteku koju želite formatirati.

4. Pritisnite ⌘ + P na Macu ili Ctrl + P na sustavu Windows.

5. U paletu naredbi unesite format, a zatim pritisnite tipku Enter.

6. Spremite datoteku.

Praćenje promjena u datotekama

Za vraćanje izmijenjene datoteke teme na prethodnu verziju upotrijebite prikaz Vremenski okvir za tu datoteku.

Prikaz Vremenski okvir vraća jednu po jednu postojeću datoteku. Ne vraća cijelu temu i ne može obnoviti izbrisane datoteke teme. Povijest vremenskog okvira je ograničena, stoga starije verzije možda neće biti dostupne.

Vraćanjem se zamjenjuje cjelokupan sadržaj datoteke, uključujući promjene koje biste možda htjeli zadržati. Prije vraćanja datoteke kopirajte njezin trenutačni sadržaj na sigurno mjesto ako želite zadržati neke promjene.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Otvorite postojeću datoteku koju želite pregledati ili vratiti.

4. Neobavezno: ako želite zadržati neke trenutačne promjene, kopirajte trenutačni sadržaj datoteke na sigurno mjesto prije njezina vraćanja.

5. U prikazu Vremenski okvir kliknite unos u vremenskom okviru da biste usporedili razlike.

6. Za zamjenu cjelokupnog sadržaja datoteke odabranom prethodnom verzijom desnom tipkom miša kliknite unos u vremenskom okviru, a zatim odaberite Vrati sadržaj.

7. Kliknite na Vrati.

Theme Check

Uređivač koda uključuje Theme Check, značajku koja pomaže u sprječavanju pogrešaka pružanjem trenutnih povratnih informacija dok se kod piše, umjesto otkrivanja pogrešaka u vašoj aktivnoj temi.

U uređivaču koda Theme Check može prepoznati sljedeće pogreške u uređenom kodu:

• Skripte koje blokiraju parsiranje, a koje mogu usporiti internetsku trgovinu
• Nedosljednosti između datoteka prijevoda, kao što su ključevi prijevoda koji nedostaju ili prijevodi koji se ne podudaraju u datoteci regionalnih parametara
• Predlošci koji nedostaju

Pogreške su označene crvenom linijom ispod koda. Za prikaz pogreške prijeđite mišem preko istaknute linije.

Pretraživanje i zamjena u uređivaču koda

Unutar uređivača koda možete pretraživati na bilo koji od sljedećih načina:

• Pretražite kod u određenoj datoteci.
• Pretražite kod u svim datotekama teme.

Također, možete zamijeniti kod u određenoj datoteci ili na više mjesta u svim datotekama teme. Možete pretraživati datoteku i prema njezinom nazivu kako biste otvorili datoteku.

Pretraživanje unutar datoteke

Možete pretražiti i zamijeniti kod u određenoj datoteci. Upotrijebite tipke sa strelicama za pregled svakog mjesta gdje se taj kod nalazi.

Nakon pretraživanja koda, kod možete zamijeniti u datoteci.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Otvorite datoteku koju želite pretražiti.

4. Pritisnite ⌘ + F na Macu ili Ctrl + F na sustavu Windows.

5. U polje Traži unesite željeni pojam.

6. Neobavezno: kako biste zamijenili kod, izvršite sljedeće radnje:

• U modalnom prozoru za pretraživanje kliknite ikonu .
• U polje Zamijeni unesite zamjenski kod. Možete kliknuti Zadrži veličinu slova kako bi veličina slova zamjenskog koda odgovarala postojećoj instanci.
• Kliknite ikonu Zamijeni da biste zamijenili jednu po jednu instancu ili kliknite ikonu Zamijeni sve da biste odjednom zamijenili sve instance.

Pretraživanje u svim datotekama

Kliknite gumb za pretraživanje na lijevoj bočnoj traci kako biste pretražili sve datoteke teme. U rezultatima se prikazuje svaka instanca vašeg pojma za pretraživanje i datoteka u kojoj se pojavljuje.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Kliknite ikonu da biste otvorili ploču za pretraživanje.

4. U polje Traži unesite željeni pojam.

5. Neobavezno: kako biste zamijenili kod, izvršite sljedeće radnje:

• U modalnom prozoru za pretraživanje kliknite ikonu .
• U polje Zamijeni unesite zamjenski kod.
• Zamijenite jednu po jednu instancu ili sve instance odjednom.

Napredne opcije pretraživanja

Da biste suzili rezultate pretraživanja, upotrijebite jednu ili više sljedećih opcija pretraživanja:

• Opcija Razlikuj velika i mala slova vraća pojmove za pretraživanje koji odgovaraju veličini slova. Na primjer, ako unesete product, pretraživanje će istaknuti sve instance riječi „product” ili „Product”. Ako odaberete Razlikuj velika i mala slova, pretraživanje će istaknuti samo instance riječi product.
• Opcija Podudaranje cijele riječi vraća pojmove za pretraživanje koji odgovaraju točnoj riječi i isključuje djelomična podudaranja. Na primjer, ako unesete cart, pretraživanje će istaknuti instance riječi „cart”, ali ne i „carton”.
• Opcija Upotrijebi regularni izraz vraća rezultate pretraživanja koji odgovaraju regularnom izrazu (regex). Regex je niz znakova koji određuje uzorak podudaranja u tekstu.

Oprez

Upotreba regularnih izraza napredna je tehnika prilagodbe. Možete upotrijebiti alat treće strane kao što je regex101 ili RegExr za smjernice o izradi niza za regex.

Na ploči Pretraživanje možete odabrati i datoteke te mape koje želite uključiti u rezultate pretraživanja ili ih iz njih isključiti.

Kliknite da biste otvorili napredni izbornik. Možete unijeti bilo koju putanju datoteke ili mape u polja datoteke za uključivanje ili datoteke za isključivanje. Da biste dodali više od jedne datoteke ili mape, odvojite ih zarezom i razmakom. Na primjer, za pretraživanje datoteka u mapi sections, unesite ./sections u polje datoteke za uključivanje.

Također možete pretraživati unutar određene mape iz prikaza imenika datoteka. Kliknite desnom tipkom miša na mapu, a zatim iz padajućeg izbornika odaberite Pronađi u mapi...

Upravljanje datotekama teme

Možete upravljati datotekama u kodu teme. Možete izbrisati datoteke, dodati nove, preimenovati ih te vratiti izmijenjene postojeće datoteke koda iz njihova prikaza Vremenski okvir kada je dostupna prethodna verzija. Datoteke resursa u mapi assets, poput slika, fontova te CSS i JavaScript datoteka, nemaju povijest vremenskog okvira.

Otvaranje datoteke teme

Da biste otvorili datoteku teme, kliknite mapu, a zatim naziv datoteke iz preglednika. Datoteke možete i pretraživati prema nazivu ili datotečnom nastavku, a zatim ih otvoriti.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Pritisnite ⌘ + P na Macu ili Ctrl + P na sustavu Windows.

4. Unesite naziv datoteke u traku za pretraživanje i odaberite datoteku ili odaberite datoteku s popisa Nedavno otvoreno.

Dodavanje nove datoteke teme

Da biste dodali datoteku, odaberite mapu, kliknite ikonu Nova datoteka te unesite naziv i datotečni nastavak.

Nazivi datoteka mogu sadržavati znakove od A do Z, od 0 do 9 i ne mogu uključivati razmake. Riječi odvojite crticama ili donjim crtama. Datotečni nastavak definiran je točkom . i vrstom nastavka. Na primjer, .liquid ili .css.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Kliknite mapu u koju želite dodati novu datoteku.

4. Kliknite desnom tipkom miša na naziv mape i iz padajućeg izbornika odaberite Nova datoteka...

5. Unesite novi naziv datoteke.

6. Pritisnite tipku Enter na tipkovnici.

Prijenos novog resursa

Možete prenijeti novi resurs, poput ikone ili slikovne datoteke, u mapu assets alata za uređivanje koda.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Kliknite desnom tipkom miša na mapu assets.

4. Kliknite Prenesi...

5. Odaberite datoteku koju želite prenijeti.

6. Kliknite Otvori.

Preimenovanje datoteke teme

Možete kliknuti datoteku desnom tipkom miša da biste je preimenovali. Pazite da ne uredite ili uklonite datotečni nastavak. Datotečni nastavak definiran je točkom . i vrstom nastavka. Na primjer, .liquid ili .css. Nazivi datoteka mogu sadržavati znakove od A do Z, od 0 do 9 i ne mogu uključivati razmake. Riječi odvojite crticama ili donjim crtama. Ako naziv datoteke nije valjan, novi naziv datoteke neće se spremiti.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Kliknite desnom tipkom miša na datoteku i iz padajućeg izbornika odaberite Preimenuj...

4. Unesite novi naziv datoteke.

5. Pritisnite tipku Enter na tipkovnici.

Brisanje datoteke teme

Oprez

Brisanje datoteke teme može uzrokovati pogreške u temi. Prije brisanja bilo koje datoteke obavezno izradite duplikat teme.

Možete izbrisati bilo koju datoteku u temi. Izbrisane datoteke teme ne mogu se vratiti.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na > Uredi kod.

3. Kliknite desnom tipkom miša na datoteku i iz padajućeg izbornika odaberite Trajno izbriši.

4. Kliknite Izbriši.