Redigera eller radera en Köpknapp eller en inbäddad varukorg

Den här sidan skrevs ut den Apr 26, 2024. Besök https://help.shopify.com/sv/manual/online-sales-channels/buy-button/edit-delete för den aktuella versionen.

Köpknappar och varukorgar genereras från kodfragment som du kopierar från din Shopify-admin och klistrar in i din webbsidas käll-HTML. Dessa kodfragment kallas för inbäddningskod. Du måste redigera den tillhörande inbäddade koden om du vill ändra utseende eller beteende för en knapp eller varukorg.

På den här sidan

Radera en Köpknapp, inbäddad kollektion eller inbäddad varukorg

Steg:

  1. Öppna käll-HTML på webbsidan som innehåller Köpknappen, inbäddad kollektion eller inbäddad varukorg.
  2. Ta bort hela den inbäddade koden från käll-HTML som börjar med <script data-shopify-buy-ui> och slutar med </script>. Den inbäddade koden ser ut som följande kod 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 dina ändringar.

Köpknappen, den inbäddade kollektionen eller den inbäddade varukorgen kommer inte längre att visas på din webbsida.

Redigera en Köpknapp

Om du vill ändra utseendet eller inställningarna för en befintlig Köpknapp måste du redigera den inbäddade koden som du har lagt till i din käll-HTML.

Varje köpknapp är uppbyggd av separata komponenter i den inbäddade koden. Om du till exempel lägger till en produkt med en varukorg till din webbsida kommer den inbäddade koden att generera en product-komponent, en cart-komponent och en varukorgskomponent toggle:

Om du vill att din produktkomponent ska öppna ett modalfönster med produktdetaljer kommer den inbäddade koden att generera en modal-komponent och en modalProduct-komponent:

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'
          }
        }
      }
    }
  });
});

Dessa komponenter konfigureras separat via konfigurationsobjekt i den inbäddade koden. Du kan ändra utseende eller beteende för dina Köpknappar genom att redigera konfigurationsobjekten i den inbäddade koden.

Varje komponent har många attribut som du kan redigera. Om du vill ha en fullständig lista över redigerbara alternativ, se vår utvecklardokumentation. Om du vill konfigurera ett tillval som inte redan visas i din inbäddade kod måste du lägga till lämplig tangent till lämpligt objekt, (se exemplet).

Redigera stilen på en komponent

Varje komponent har ett inbäddat styles konfigurationsobjekt som du kan redigera eller lägga till för att ändra komponentens utseende. Dessa formatmallar är formaterade på samma sätt som CSS. Varje tangent på toppnivå i styles-objektet representerar ett element i komponenten, till exempel namn eller knapp. Inom det här objektet är varje tangent ett CSS-värde (till exempel "bakgrundsfärg" eller "border") och värdet är ett CSS-värde.

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

Alla giltiga CSS-värden kan läggas till i styles. Observera att värdenamn med bindestreck måste vara inom citattecken.

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

Exempel: byt ut länk till varukorg med modal för produktdetaljer

I det här exemplet kan du ändra din nuvarande inbäddade kod för att rikta din kund till en modal för produktdetaljer istället för varukorgen:

  1. Öppna HTML på sidan som innehåller den inbäddade produkten som du vill ändra.
  2. Hitta konfigurationsobjektet product.
  3. Hitta buttonDestination-tangenten i objektet: 
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Ändra värdet för den tangenten till 'modal' (se till att du inkluderar citattecknen): 
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Spara dina ändringar.

Exempel: ändra layouten för din produktinbäddning

I det här exemplet kan du ändra layouten för din produktinbäddning så att bilden visas på sidan istället för högst upp:

  1. Öppna HTML på sidan som innehåller den inbäddade produkten som du vill ändra.
  2. Hitta konfigurationsobjektet product.
  3. Lägg till en layout-tangent och ange sedan värdet till 'horizontal': 
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
<aside class="note">
<h4>Observera</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. Spara dina ändringar.

Redigera varukorgen för din webbplats

Om du vill ändra utseendet eller beteendet för din webbsidas varukorg måste du redigera cart-konfigurationsobjektet i din inbäddningskod.

Steg:

  1. Öppna HTML på sidan som innehåller varukorgen som du vill redigera.
  2. Hitta cart-konfigurationsobjektet i din inbäddade kod: 
options: {
      cart: {
        startOpen: false
      }
}
  1. Redigera eller lägg till värdet som du vill ändra. Om du vill ha en fullständig lista över konfigurerbara egenskaper, se utvecklardokumentationen.
  2. Spara dina ändringar.

Redigera en inbäddad kollektion

Att redigera en inbäddad kollektion liknar att redigera en produkt eller en varukorg. För att redigera egenskaperna för produkterna i kollektionen (till exempel layouten för varje produkt) måste du hitta konfigurationsobjektet product och redigera det på samma sätt som du skulle redigera en produktinbäddning. Redigera istället tangenten productSet om du vill redigera egenskaperna i själva kollektionen (till exempel texten på knappen Nästa sida).

Vissa egenskaper, t.ex. texten till en komponent, konfigureras genom inbäddade objekt, vilket är objekt som visas inuti andra objekt. Texten för knappen Nästa sida visas t.ex. inuti productSet-komponentens text-objekt:

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

Är du redo att börja sälja med Shopify?

Prova gratis