Redigering eller sletting av en Kjøp-knapp eller en innebygd handlekurv

Advarsel

Dette er en avansert opplæring og støttes ikke av Shopify. Kjennskap til webdesign-språk som HTML, CSS, JavaScript og Liquid er nødvendig. Hvis du trenger hjelp, kan du leie inn en Shopify-partner.

Kjøp-knapper og -handlekurver genereres fra kodesnuttene du kopierer fra Shopify-administratoren og limer inn i nettstedets kilde-HTML. Disse kodesnuttene kalles en innebygget kode. Hvis du vil endre utseendet eller funksjonen til en knapp eller handlekurv, må du redigere den tilknyttede innebygde koden.

Merk

Disse instruksjonene gjelder for innbyggingskoden for Kjøp-knapp som er generert etter 26. september 2016. Hvis du vil endre innbyggingskode du genererte før denne datoen, må du følge de eldre instruksjonene. Du kan også gjenskape innbyggingskoden gjennom Kjøp-knapp-salgskanalen.

Hvis du ikke er sikker på hvilken versjon av den innebygde koden du har, må du sjekke om den starter med <script data-shopify-buy-ui>. Hvis den gjør det, har du den nyeste versjonen. Hvis det starter med <div data-emebd_type=... eller en annen type <div>-tagg, har du den eldre versjonen.

Slett en Kjøp-knapp, en innebygd samling eller en innebygd handlekurv

Steg:

1. Åpne kilde-HTML-en på nettsiden der Kjøp-knappen er, en innebygd samling eller en innebygd handlekurv.
2. Slett hele den innebygde koden fra HTML-kilden som starter med <script data-shopify-buy-ui> og slutter med </script> For en Kjøp-knapp ser den innebygde koden ut som den følgende koden:

<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.

Kjøp-knappen, den innebygde samlingen eller den innebygde handlekurven vises ikke lenger på nettstedet ditt.

Redigere en Kjøp-knapp

Hvis du vil endre utseendet eller innstillingene til en eksisterende Kjøp-knapp, må du redigere den innebygde koden du har lagt til i kilde-HTML-en.

Hver Kjøp-knapp er laget av separate komponenter i den innebygde koden. Hvis du for eksempel legger til et produkt med en handlekurv på nettstedet ditt, vil den innebygde koden generere en product-komponent, en cart-komponent og en handlekurv-toggle-komponent:

Hvis du vil at produktkomponenten skal åpne et modalt vindu med produktdetaljer, vil den innebygde koden generere en modal-komponent og en modalProduct-komponent:

I følgende kodesnutt 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'
          }
        }
      }
    }
  });
});

Disse komponentene konfigureres separat gjennom konfigurasjonsobjekter i den innebygde koden. Du kan endre utseendet eller funksjonen til Kjøp-knappene ved å redigere konfigurasjonsobjektene i den innebygde koden.

Tips

I JavaScript er et objekt et sett med nøkkelverdipar i formatet {key: value}. Du kan tenke på det som et regneark: En nøkkel er som et kolonnenavn, og en verdi er som innholdet i en celle.

Hver enkelt komponent har mange attributter som du kan redigere. For en fullstendig liste over redigerbare alternativer, kan du se utviklerdokumentasjonen. Hvis du vil konfigurere et alternativ som ikke allerede vises i den innebygde koden, må du legge til den aktuelle nøkkelen i det aktuelle objektet (se eksemplet).

Rediger stilen til en komponent

Hver komponent har et nestet styles konfigurasjonsobjekt som du kan redigere eller legge til for å endre komponentens utseende. Disse stilene er formatert på samme måte som CSS. Alle nøklene på øverste nivå i styles-objektet representerer et element i komponenten, for eksempel tittelen eller knappen. Innenfor dette objektet er hver nøkkel en CSS-egenskap (for eksempel «bakgrunnsfarge» eller «grense»), og verdien er en CSS-verdi.

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

Enhver gyldig CSS-egenskap kan legges til styles. Merk at egenskapsnavn med bindestreker må ha anførselstegn.

Du finner mer informasjon om CSS-tilpasning ved å se i utviklingsdokumentasjonen.

Eksempel: Erstatt kobling til handlekurv med produktdetaljemodal

I dette eksempelet kan du endre den nåværende innbyggingskoden for å sende kunden videre til en produktdetaljmodal i stedet for handlekurven:

1. Åpne HTML-en på den siden som inneholder produktinnbyggingen du vil endre.
2. product Finn konfigurasjonsobjektet.
3. buttonDestination Finn nøkkelen i objektet:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

1. Endre verdien til denne nøkkelen til 'modal' (sørg for at du inkluderer anførselstegnene):

options: {
      product: {
        buttonDestination: 'modal'
      }
}

1. Lagre endringene.

For eksempel: Endre oppsettet til produktinnbyggingen

I dette eksemplet kan du endre oppsettet til produktet ditt, slik at bildet vises på siden i stedet for på toppen:

1. Åpne HTML-en på den siden som inneholder produktinnbyggingen du vil endre.
2. product Finn konfigurasjonsobjektet.
3. Legg til en layout-nøkkel, og angi verdien til 'horizontal':

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

<aside class="note">
<h4>Merk</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

1. Lagre endringene.

Rediger nettstedets handlekurv

Hvis du vil endre utseendet eller funksjonen til nettstedets handlekurv, må du redigere cart konfigurasjonsobjektet i den innebygde koden.

Steg:

1. Åpne HTML-en på siden som inneholder handlekurven du vil redigere.
2. Finn cart konfigurasjonsobjektet i den innebygde koden:

options: {
      cart: {
        startOpen: false
      }
}

1. Rediger eller legg til den egenskapen du vil endre. Se dokumentasjonen for utvikleren for å se en fullstendig liste over konfigurerbare egenskaper.
2. Lagre endringene.

Redigere en innebygd samling

Å redigere en innebygd samling er nesten som å redigere et produkt eller en handlekurv. Hvis du vil redigere egenskapene til produktene i samlingen (for eksempel oppsettet til hvert produkt), må du finne product konfigurasjonsobjektet og redigere det på samme måte som du redigerer en produktinnebygging. Hvis du vil redigere egenskapene til selve samlingen (for eksempel teksten til Neste side-knappen), må du redigere productSet nøkkelen i stedet.

Noen egenskaper, for eksempel teksten til en komponent, konfigureres gjennom nestede objekter, som er objekter som oppstår inni andre objekter. For eksempel vises teksten for Neste side-knappen i productSet komponentens text objekt:

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