Sådan redigerer eller sletter du en Køb-knap eller integreret indkøbskurv

Denne side blev udskrevet kl. Apr 19, 2024. Besøg https://help.shopify.com/da/manual/online-sales-channels/buy-button/edit-delete for at se den aktuelle version.

Køb-knapper og indkøbskurve genereres ud fra de kodestykker, som du kopierer i din Shopify-administrator og indsætter i HTML-kilden på din webside. Disse kodestykker kaldes integreringskoder. Hvis du vil ændre udseendet eller funktionsmåden af en knap eller indkøbskurv, skal du redigere den tilknyttede integreringskode.

På denne side

Slet en Køb-knap, integreret kollektion eller integreret indkøbskurv

Fremgangsmåde:

  1. Åbn HTML-kilden for den webside, som indeholder Køb-knappen, den integrerede kollektion eller den integrerede indkøbskurv.
  2. Slet hele integreringskoden fra HTML-kilden, der begynder med <script data-shopify-buy-ui> og slutter med </script>. For en Køb-knap ser integreringskoden således ud: 
<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. Gem dine ændringer.

Køb-knappen, den integrerede kollektion eller den integrerede indkøbskurv vil ikke længere blive vist på din webside.

Rediger en Køb-knap

Hvis du vil ændre udseendet af eller indstillingerne for en eksisterende Køb-knap, skal du redigere den integreringskode, du har føjet til din HTML-kilde.

Alle Køb-knapper er opbygget af separate komponenter i integreringskoden. Hvis du f.eks. føjer et produkt med en indkøbskurv til din webside, vil integreringskoden generere en product-komponent, en cart-komponent og en toggle-komponent for indkøbskurv:

Hvis du vil have, at din produktkomponent skal åbne et modusvindue med produktoplysninger, genererer integreringskoden en modal-komponent og en modalProduct-komponent:

I følgende kodestykke er der separate komponenter til 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 komponenter konfigureres separat via konfigurationsobjekter i integreringskoden. Du kan ændre udseendet af eller funktionsmåden for dine Køb-knapper ved at redigere konfigurationsobjekterne i integreringskoden.

Hver komponent har mange attributter, som du kan redigere. Du kan se en komplet liste med redigerbare valgmuligheder i vores udviklerdokumentation. Hvis du vil konfigurere en valgmulighed, der ikke allerede vises i integreringskoden, skal du føje den relevante nøgle til det relevante objekt (se eksemplet).

Rediger en komponents typografi

Alle komponenter har et indlejret styles-konfigurationsobjekt, som du kan redigere eller tilføje for at ændre komponentens udseende. Disse typografier er formateret på samme måde som CSS. Hver nøgle på øverste niveau i objektet styles repræsenterer et element i komponenten, f.eks. titlen eller knappen. I dette objekt er hver nøgle en CSS-egenskab (f.eks. "baggrundsfarve" eller "ramme"), og værdien er en CSS-fil.

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

Der kan føjes en hvilken som helst gyldig CSS-attribut til styles. Bemærk, at egenskabsnavne med bindestreger skal være placeret i anførselstegn.

Du kan få mere at vide om tilpasning af CSS ved at læse dokumentationen til udviklere.

Eksempel: Erstat link til indkøbskurv med modus for produktoplysninger

I dette eksempel kan du ændre din nuværende integreringskode for at dirigere kunden til en produktoplysningsmodus i stedet for indkøbskurven:

  1. Åbn HTML-koden for siden med den produktindlejring, som du vil ændre.
  2. Find konfigurationsobjektet product.
  3. Find buttonDestination-nøglen i objektet: 
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Ret værdien for den pågældende nøgle til 'modal' (sørg for at medtage anførselstegnene): 
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Gem dine ændringer.

Eksempel: Rediger layoutet for din produktindlejring

I dette eksempel kan du redigere layoutet for din produktindlejring, så billedet vises i siden og ikke foroven:

  1. Åbn HTML-koden for siden med den produktindlejring, som du vil ændre.
  2. Find konfigurationsobjektet product.
  3. Tilføj en layout-nøgle, og angiv derefter værdien til 'horizontal': 
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
<aside class="note">
<h4>Bemærk</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. Gem dine ændringer.

Rediger indkøbskurven på dit website

Hvis du vil ændre udseendet eller funktionsmåden for indkøbskurven på dit website, skal du redigere cart-konfigurationsobjektet i integreringskoden.

Fremgangsmåde:

  1. Åbn HTML-koden for siden med den indkøbskurv, du vil redigere.
  2. Find konfigurationsobjektet cart i integreringskoden: 
options: {
      cart: {
        startOpen: false
      }
}
  1. Rediger eller tilføj den egenskab, du vil ændre. Du kan finde en komplet liste med egenskaber, der kan konfigureres, i dokumentationen til udviklere.
  2. Gem dine ændringer.

Rediger en integreret kollektion

Redigering af en integreret kollektion minder meget om redigering af et produkt eller en indkøbskurv. Hvis du vil redigere egenskaberne for produkter i kollektionen (f.eks. layoutet for hvert produkt), skal du finde konfigurationsobjektet product og redigere det på samme måde, som du ville redigere en produktintegrering. Hvis du vil redigere egenskaberne for selve kollektionen (f.eks. teksten på knappen Næste side), skal du redigere nøglen productSet i stedet.

Nogle egenskaber, f.eks. teksten til en komponent, konfigureres via indlejrede objekter, som er objekter, der vises inde i andre objekter. Teksten til knappen Næste side vises inde i productSet-komponentens text-objekt:

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

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis