Hjälp
Logga in

Anpassa eller ta bort en köpknapp, inbäddad produktserie eller inbäddad varukorg

Du kan ändra utseendet eller beteendet för en köpknapp, inbäddad produktserie eller inbäddad varukorg genom att redigera dess inbäddningskod i webbsidans HTML-källkod. Du kan även ta bort en inbäddning genom att ta bort koden från din webbsida.

En köpknapp visar en produkt med en knapp för att genomföra ett köp. En inbäddad produktserie visar flera produkter. En inbäddad varukorg visar en fristående varukorg som kunder kan använda på flera sidor.

Inbäddningskod är det kodfragment som du kopierade från din Shopify admin och klistrade in i din webbsidas HTML när du skapade köpknappen eller varukorgen. Inbäddningskoden är skriven i JavaScript, vilket är det programmeringsspråk som används för att lägga till interaktiva funktioner på webbsidor.

På den här sidan

Förstå inbäddningskoden för en köpknapp

Varje köpknapp är uppbyggd av separata delar som kallas komponenter. En komponent är ett namngivet avsnitt av inbäddningskoden som styr en del av upplevelsen av köpknappen. När du till exempel lägger till en produkt med en varukorg på din webbsida genererar inbäddningskoden följande komponenter:

  • en product-komponent, som visar produktinformationen och köpknappen
  • en cart-komponent, som visar varukorgens innehåll
  • en toggle-komponent för varukorgen, som visar den ikon som öppnar varukorgen

Om din produktkomponent öppnar ett popup-fönster med produktuppgifter genererar inbäddningskoden ytterligare två komponenter: en modal-komponent för själva popup-fönstret och en modalProduct-komponent för produktinformationen inuti popup-fönstret.

I följande kodfragment finns separata komponenter för product och 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'
          }
        }
      }
    }
  });
});

Varje komponent konfigureras genom ett konfigurationsobjekt i inbäddningskoden. Ett objekt är en strukturerad grupp med inställningar, formaterad som en lista med nyckel-värde-par:

  • En nyckel är namnet på en inställning, till exempel buttonDestination.
  • Ett värde är det inställningen är satt till, till exempel 'cart'.

Ett objekt liknar ett kalkylblad: varje nyckel motsvarar ett kolumnnamn och varje värde motsvarar innehållet i en cell. Om du vill ändra köpknapparnas utseende eller beteende redigerar du nycklarna och värdena i konfigurationsobjekten.

Varje komponent har många redigerbara nycklar. En fullständig lista över redigerbara nycklar finns i utvecklardokumentationen. Om du vill konfigurera en nyckel som inte redan finns i din inbäddningskod lägger du till nyckeln i lämpligt objekt. Ett exempel finns i Ändra layout för en inbäddad produkt.

Anpassa komponentstilar

Varje komponent har ett kapslat styles-konfigurationsobjekt som styr komponentens utseende. Ett kapslat objekt är ett objekt som är placerat inuti ett annat objekt.

styles-objektet använder CSS, vilket är det språk som används för att beskriva hur element på en webbsida formges visuellt. Varje nyckel på toppnivå i styles-objektet representerar ett element i komponenten, till exempel titeln eller knappen. Inom den nyckeln är varje kapslad nyckel en CSS-egenskap (till exempel background-color eller border) och värdet är ett CSS-värde.

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

Alla giltiga CSS-egenskaper kan läggas till i styles. Se till att egenskapsnamn med bindestreck omsluts av citattecken.

För mer information om CSS-anpassning, se utvecklardokumentationen.

Komponenter för inbäddad produktserie

Inbäddade produktserier använder samma konfigurationsobjekt som köpknappar. Om du vill redigera layouten eller andra egenskaper för produkter i produktserien letar du reda på konfigurationsobjektet product och redigerar det på samma sätt som du skulle redigera en inbäddad produkt. Om du vill redigera egenskaper för själva produktserien, till exempel texten på knappen Nästa sida, redigerar du i stället konfigurationsobjektet productSet.

Vissa nycklar, till exempel texten för en komponent, konfigureras genom kapslade objekt. Texten för knappen Nästa sida finns till exempel inuti productSet-komponentens text-objekt:

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

Ett spärrande fönster för produktuppgifter är ett popup-fönster som visar produktinformation. Om du vill leda kunden till ett spärrande fönster för produktuppgifter i stället för varukorgen redigerar du köpknappens inbäddningskod i webbsidans HTML-källkod.

Steg:

  1. Öppna HTML-koden för sidan som innehåller produktinbäddningen som du vill ändra.
  2. Hitta konfigurationsobjektet product.
  3. Hitta nyckeln buttonDestination i objektet:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Ändra värdet för den nyckeln till 'modal', inklusive citattecknen:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Spara ändringarna.

Ändra layout för en inbäddad produkt

En horisontell layout för en inbäddad produkt placerar bilden bredvid produktuppgifterna i stället för ovanför dem. Om du vill byta till den här layouten redigerar du köpknappens inbäddningskod i webbsidans HTML-källkod.

Steg:

  1. Öppna HTML-koden för sidan som innehåller produktinbäddningen som du vill ändra.
  2. Hitta konfigurationsobjektet product.
  3. Lägg till en layout-nyckel och ställ sedan in värdet på 'horizontal'. Se till att värdet inkluderar citattecknen och att den föregående raden avslutas med ett kommatecken:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Spara ändringarna.

Ändra utseende och beteende för en inbäddad varukorg

Om du vill ändra utseendet eller beteendet för en varukorg redigerar du konfigurationsobjektet cart i inbäddningskoden.

Steg:

  1. Öppna HTML-koden för sidan som innehåller varukorgen som du vill redigera.
  2. Hitta konfigurationsobjektet cart i din inbäddningskod:
options: {
      cart: {
        startOpen: false
      }
}
  1. Redigera en befintlig nyckel, eller lägg till en ny, för att ändra varukorgens utseende eller beteende. En fullständig lista över konfigurerbara nycklar finns i utvecklardokumentationen.
  2. Spara ändringarna.

Ta bort en köpknapp, inbäddad produktserie eller inbäddad varukorg

Om du vill ta bort en köpknapp, en inbäddad produktserie eller en inbäddad varukorg från webbsidan raderar du dess inbäddningskod från HTML-källkoden.

Steg:

  1. Öppna HTML-källkoden för webbsidan som innehåller köpknappen, den inbäddade produktserien eller den inbäddade varukorgen.
  2. Radera hela inbäddningskoden från HTML-källkoden, från och med <script data-shopify-buy-ui> till och med </script>. Följande är ett exempel på inbäddningskod för en köpknapp:
<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. Spara ändringarna.