SKU-koodien näyttäminen tuotesivuilla

Huomio

Vanhoja teemoja ei ole saatavilla Theme Storessa. Vanhoissa teemoissa ei ole Shopifyn Online Store 2.0 ‑teemoihin sisältyviä ominaisuuksia, eikä Shopifyn ilmaisiin vanhoihin teemoihin tehdä muita päivityksiä kuin tietoturvakorjauksia.

Huomaa

Jos käytät ilmaista Shopify-teemaa, voit ottaa yhteyttä Shopify-tukeen, jos tarvitset tähän tutoriaaliin liittyvää apua. Tarvitset 15 minuuttia suunnitteluaikaa. Lue lisää Shopifyn suunnittelukäytännöstä.

Huomaa

tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.

• Selvitä teemasi arkkitehtuuriversio
• Tutustu Online Store 2.0:n teemojen mukauttamiseen

SKU-koodit (varastoyksiköt) ovat yleensä alfanumeerisia koodeja, joita käytetään tuotteiden tunnistamiseen ja varaston seuraamiseen. Jos kaupassa käytetään SKU-koodeja, jokaiselle yksittäiselle tuoteversiolle määritetään oma yksilöllinen koodi. Voit näyttää tuotesivuilla tuoteversioiden SKU-koodit muokkaamalla teeman koodia:

Osiin jaetut ja jakamattomat teemat

Huomautus: Tämän tutoriaalin vaiheet vaihtelevat sen mukaan, käytätkö osiin jaettua vai osiin jakamatonta teemaa. Osiin jaetussa teemassa etusivun asettelua voi järjestää vetämällä ja pudottamalla elementtejä, osiin jakamattomassa teemassa ei.

Teeman Muokkaa koodia -sivulla saat selville tukeeko teemasi osioita. Jos Osiot-hakemistossa on tiedostoja, käytössäsi on osioihin jaettu teema. Osioihin jakamattomat teemat on julkaistu ennen lokakuuta 2016, eikä niiden Osiot-hakemistossa ole tiedostoja.

Jos käytät osioihin jaettua teemaa, klikkaa Osioihin jaetut teemat -painiketta ja noudata ohjeita. Jos käytät vanhempaa teemaa, jota ei ole jaettu osioihin, klikkaa Osioihin jakamattomat teemat -painiketta ja noudata ohjeita.

Osiin jaettujen teemojen ohjeet

SKU-koodien näyttäminen tuotesivuilla

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
3. Klikkaa Sections-hakemistossa product.liquid tai product-template.liquid.
4. Etsi seuraava Liquid-tunniste:

{{ product.title }}

Tämä on koodi, joka hahmontaa tuotenimikkeesi tuotesivulla.

1. Liitä seuraava koodi uudelle riville sen koodirivin alapuolelle, joka sisältää tunnisteen {{ product.title }}:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Klikkaa Tallenna.

Valitse teema

Tämän mukautuksen seuraavat toimintavaiheet vaihtelevat teeman mukaan. Klikkaa teeman painiketta ja noudata ohjeita.

Lisää SKU-koodit tuoteversioihin administa

Jotta SKU-koodit näkyvät tuotesivuillasi, sinun on lisättävä tuoteversioihin SKU-koodit Shopify Administa.

1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

2. Klikkaa muokattavaa tuotetta.

3. Lisää Versiot-osiossa SKU-koodit tuotteille, joilla on useita tuoteversioita:

4. Klikkaa Tallenna.

Osiin jakamattomien teemojen ohjeet

SKU-koodien näyttäminen tuotesivuilla

Huomaa

Tämä mukautus ei toimi osioihin jakamattoman Boundless-teeman kanssa. Osioihin jakamattomat teemat on julkaistu ennen lokakuuta 2016, eikä niiden Osiot-hakemistossa ole tiedostoja.

Vaiheet:

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
3. klikkaa Templates-hakemistossa product.liquid.
4. Etsi seuraava Liquid-tunniste:

{{ product.title }}

Tämä on koodi, joka hahmontaa tuotenimikkeesi tuotesivulla.

1. Liitä seuraava uudelle riville sen koodirivin alapuolelle, joka sisältää tunnisteen {{ product.title }}:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Klikkaa Tallenna.
2. Jos käytät ilmaista Shopify-teemaa, joka ei ole Brooklyn tai Venture, etsi seuraava koodirivi:

var selectCallback = function(variant, selector) {

Jos et löydä yllä olevaa koodiriviä Asettelut-hakemiston product.liquid-tiedostosta, löydät sen silloin theme.liquid-tiedostosta.

• Brooklyn ja Venture: Jos käytät Brooklyn- tai Venture-teemaa, sinun on etsittävä eri koodirivi ja ja muokattava sitä. Klikkaa Resurssit-hakemistossa theme.js.liquid ja etsi seuraava koodirivi:

theme.productVariantCallback = function (variant, selector) {

1. Liitä seuraava koodi alle uudelle riville:

if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Koodisi pitäisi näyttää suurin piirtein tältä:

var selectCallback = function(variant, selector) {

      if (variant) {
        document.querySelector('.variant-sku').innerText = variant.sku;
      }
      else {
        document.querySelector('.variant-sku').innerText = '';
      }

        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart : theme.productStrings.addToCart,
            sold_out : theme.productStrings.soldOut,
            unavailable : theme.productStrings.unavailable
          }
        });
      };

1. Klikkaa Tallenna.

Lisää SKU-koodit tuoteversioihin administa

Jotta SKU-koodit näkyvät tuotesivuillasi, sinun on lisättävä tuoteversioihin SKU-koodit Shopify Administa.

1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

2. Klikkaa muokattavaa tuotetta.

3. Jos tuotteilla on useampi versio, lisää SKU-numerosi Versiot-osiossa:

   

   Jos tuotteilla ei ole versioita, lisää SKU-numerosi Varasto-osiossa:

   

4. Klikkaa Tallenna.