Hjelp
Logg på

Tilpasse eller fjerne en Kjøp-knapp, innebygd kolleksjon eller innebygd handlekurv

Du kan endre utseendet eller atferden til en Kjøp-knapp, innebygd kolleksjon eller innebygd handlekurv ved å redigere innbyggingskoden i nettsidens kilde-HTML. Du kan også slette en innbygging ved å fjerne koden fra nettsiden.

En Kjøp-knapp viser et produkt med en kjøpsknapp. En innebygd kolleksjon viser flere produkter. En innebygd handlekurv viser en frittstående handlekurv som kunder kan bruke på tvers av sider.

Innbyggingskode er kodebiten du kopierte fra Shopify-administratoren og limte inn i nettsidens HTML da du opprettet Kjøp-knappen eller handlekurven. Innbyggingskoden er skrevet i JavaScript, programmeringsspråket som brukes til å legge til interaktive funksjoner på nettsider.

På denne siden

Forstå innbyggingskoden for Kjøp-knappen

Hver Kjøp-knapp er bygget av separate deler som kalles komponenter. En komponent er en navngitt del av innbyggingskoden som styrer én del av opplevelsen for Kjøp-knappen. For eksempel, når du legger til et produkt med en handlekurv på nettsiden, genererer innbyggingskoden følgende komponenter:

  • en product-komponent, som viser produktinformasjonen og kjøpsknappen
  • en cart-komponent, som viser innholdet i handlekurven
  • en toggle-komponent for handlekurven, som viser ikonet som åpner handlekurven

Hvis produktkomponenten åpner et pop-up-vindu med produktinformasjon, genererer innbyggingskoden to ekstra komponenter: en modal-komponent for selve pop-up-vinduet og en modalProduct-komponent for produktinformasjonen inni pop-up-vinduet.

I følgende kodebit er det separate komponenter for product og cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Hver komponent konfigureres gjennom et konfigurasjonsobjekt i innbyggingskoden. Et objekt er en strukturert gruppe med innstillinger, formatert som en liste med nøkkel-verdi-par:

  • En nøkkel er navnet på en innstilling, for eksempel buttonDestination.
  • En verdi er hva innstillingen er satt til, for eksempel 'cart'.

Et objekt ligner på et regneark: hver nøkkel tilsvarer et kolonnenavn, og hver verdi tilsvarer innholdet i en celle. For å endre utseendet eller atferden til Kjøp-knappene, redigerer du nøklene og verdiene i konfigurasjonsobjektene.

Hver komponent har mange redigerbare nøkler. For en fullstendig liste over redigerbare nøkler, se utviklerdokumentasjonen. For å konfigurere en nøkkel som ikke allerede er i innbyggingskoden, legger du til nøkkelen i det aktuelle objektet. For et eksempel, se Endre layout for en produktinnbygging.

Tilpass komponentstiler

Hver komponent har et nestet styles-konfigurasjonsobjekt som styrer komponentens utseende. Et nestet objekt er et objekt som er plassert inni et annet objekt.

styles-objektet bruker CSS, språket som brukes til å beskrive hvordan nettsideelementer utformes visuelt. Hver toppnivånøkkel i styles-objektet representerer et element i komponenten, som for eksempel tittelen eller knappen. Inni den nøkkelen er hver nestede nøkkel en CSS-egenskap (for eksempel background-color eller border), og verdien er en CSS-verdi.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Enhver gyldig CSS-egenskap kan legges til i styles. Pass på at egenskapsnavn med bindestrek settes i anførselstegn.

For mer informasjon om CSS-tilpasning, kan du se utviklerdokumentasjonen.

Komponenter for innebygd kolleksjon

Innebygde kolleksjoner bruker de samme konfigurasjonsobjektene som Kjøp-knapper. For å endre layout eller andre egenskaper for produkter i kolleksjonen, finner du konfigurasjonsobjektet product og redigerer det på samme måte som en produktinnbygging. For å redigere egenskaper for selve kolleksjonen, som for eksempel teksten på knappen Neste side, redigerer du i stedet konfigurasjonsobjektet productSet.

Noen nøkler, som for eksempel teksten til en komponent, konfigureres gjennom nestede objekter. For eksempel er teksten til knappen Neste side inni text-objektet til komponenten productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

En modal for produktinformasjon er et pop-up-vindu som viser produktinformasjon. For å lede kunden til en modal for produktinformasjon i stedet for handlekurven, redigerer du innbyggingskoden for Kjøp-knappen i nettsidens kilde-HTML.

Trinn:

  1. Åpne HTML-koden for siden som inneholder produktinnbyggingen du vil endre.
  2. Finn product-konfigurasjonsobjektet.
  3. Finn buttonDestination-nøkkelen i objektet:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Endre verdien av den nøkkelen til 'modal', inkludert anførselstegnene:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Lagre endringene.

Endre layout for en produktinnbygging

En horisontal layout for produktinnbygging plasserer bildet ved siden av produktinformasjonen i stedet for over den. For å bytte til denne layouten, redigerer du innbyggingskoden for Kjøp-knappen i nettsidens kilde-HTML.

Trinn:

  1. Åpne HTML-koden for siden som inneholder produktinnbyggingen du vil endre.
  2. Finn product-konfigurasjonsobjektet.
  3. Legg til en layout-nøkkel, og sett deretter verdien til 'horizontal'. Sørg for at verdien inkluderer anførselstegnene og at forrige linje slutter med et komma:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Lagre endringene.

Endre utseendet og atferden til en innebygd handlekurv

For å endre utseendet eller atferden til en handlekurv, redigerer du konfigurasjonsobjektet cart i innbyggingskoden.

Trinn:

  1. Åpne HTML-koden til siden som inneholder handlekurven du vil redigere.
  2. Finn cart-konfigurasjonsobjektet i innbyggingskoden:
options: {
      cart: {
        startOpen: false
      }
}
  1. Rediger en eksisterende nøkkel, eller legg til en ny, for å endre handlekurvens utseende eller atferd. For en fullstendig liste over konfigurerbare nøkler, se utviklerdokumentasjonen.
  2. Lagre endringene.

Slette en Kjøp-knapp, en innebygd kolleksjon eller en innebygd handlekurv

For å fjerne en Kjøp-knapp, innebygd kolleksjon eller innebygd handlekurv fra nettsiden, sletter du innbyggingskoden fra kilde-HTML-en.

Trinn:

  1. Åpne HTML-kildekoden til nettsiden som inneholder Kjøp-knappen, den innebygde kolleksjonen eller den innebygde handlekurven.
  2. Slett hele innbyggingskoden fra kilde-HTML-en, som begynner med <script data-shopify-buy-ui> og slutter med </script>. Følgende er et eksempel på en innbyggingskode for en Kjøp-knapp:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Lagre endringene.