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

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

Köpknappar och varukorgar genereras från den inbäddade koden som du lägger till i käll-HTML för din webbsida. Om du vill ändra utseendet eller beteendet för en knapp eller varukorg på en webbsida måste du ändra den tillhörande inbäddade koden.

På den här sidan

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

Så här tar du bort en befintlig Köpknapp, kollektion eller inbäddad varukorg:

  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. Den inbäddade koden kommer se ut som följande kod för en Köpknapp:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Köp din produkt</a></noscript>
  1. Spara dina ändringar.

Redigera en Köpknapp

Om du vill ändra utseendet eller inställningarna för en befintlig Köpknapp måste du redigera innehållet i dess huvudsakliga div-tagg i den inbäddade koden som visas i käll-HTML:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

Varje funktion i den inbäddade Köpknappen styrs av ett separat attribut i den huvudsakliga div-taggen. Du kan lägga till, ta bort eller uppdatera dessa attribut direkt i käll-HTML.

Om du till exempel vill att en befintlig Köpknapp ska leda användaren till produktsidan i stället för betalningssidan:

  1. Öppna HTML på sidan som innehåller den köpknapp du vill ändra.

  2. Hitta attributet data-redirect_to i den huvudsakliga div-taggen i Köpknappens inbäddade kod: 

     data-redirect_to="checkout"

  3. Ändra värdet för attributet till product: 

     data-redirect_to="product"

  4. Spara dina ändringar.

En Köpknapps huvudsakliga div-tagg har många attribut som du kan redigera:

Redigerbara taggattribut för Köpknapp
Attribut Värde Standard
data-butik MyShopify-domänen (t.ex. storename.myshopify.com) är ansluten till knappen. Din Shopify-domän
data-product_handle Den utvalda produktens namn som är baserat på produktens titel. Var och en av dina produkter har ett unikt namn i Shopify. Namn på den utvalda produkten
data-embed_type Skiljer mellan inbäddningskod för Köpknappar, inbäddade kollektioner och inbäddade varukorgar. Möjliga värden är produkt , varukorg och kollektion. produkt
data-display_size Den maximala bredden på hela inbäddningen (inte på knappen). Kan vara kompakt (230px) eller standard (450px). Gäller endast för en Köpknapp för en produkt. kompakt
data-has_image Om det är en fullständig produktinbäddning (sant) eller endast köpknapp (falskt). sant
data-redirect_to Dit Köpknappen länkar. Kan vara kassa, produkt eller varukorg. Om du vill att Köpknappen ska anslutas till en inbäddad varukorg på samma sida måste data-redirect_to vara varukorg. Kassan
data-product_modal Startar produktmodalen för att visa när en produkt klickas på. Om värdet på data-redirect_to är modal måste det här attributet vara sant, annars ska det vara falskt. falskt
data-buy_button_text Texten som visas på Köpknappen. Köp nu
data-button_background_color Hexkoden för köpknappens färg, utan #. Kan vara tre eller sex hexadecimala tecken. 7db461
data-button_text_color Hexkoden för köpknappens text, utan #. Kan vara tre eller sex hexadecimala tecken. ffffff
data-background_color Bakgrundsfärg på området runt Köpknappen. Det kan vara en hexkod (per regler ovan) eller transparent. Om den är transparent tillämpas ingen utfyllnad för det inbäddade innehållet. transparent
data-show_product_price Åsidosätt för huruvida produktpriset ska visas eller inte. Kan vara sant eller falskt. Det aktuella värdet av data-has_image
data-show_product_title Åsidosätt för huruvida produktnamn ska visas eller inte. Kan vara sant eller falskt. Det aktuella värdet av data-has_image
data-buy_button_out_of_stock_text Texten som visas när en produkt är slut i lager. Slut på lagret
data-buy_button_product_unavailable_text Texten som visas när en produkt inte är tillgänglig. Ej tillgänglig
data-product_title_color Hexkoden för produkttitelns text, utan #. Kan vara tre eller sex hexadecimala tecken. 000000

Redigera varukorgen för din webbplats

Om du vill ändra utseendet eller beteendet för din webbplats varukorg måste du lägga till en separat HTML-kod och sedan redigera dess attribut. Varje attribut styr en annan del av hur varukorgen ser ut eller hur det fungerar.

Så här redigerar du webbplatsens varukorg:

  1. Öppna HTML på sidan som innehåller varukorgen som du vill redigera.

  2. Klistra in följande kod:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

  1. Byt ut your-shop-name.myshopify.com med din butiks myshopify.com-address.

  2. Lägg till relevanta attribut till varukorgens huvudsakliga div-tagg och ändra det för att inkludera det värde som du vill ha. Om du till exempel vill ändra texten som visas högst upp i kundvagnen måste du lägga till data-cart_title="your text" till den huvudsakliga div-taggen i koden. Resultatet ser ut så här:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. Spara dina ändringar när du är klar.

Kundvagnsattribut

Det finns många attribut som du kan använda för att anpassa din webbplats varukorg:

Anpassningsattribut för varukorg
Attribut Värde Standard
data-butik Relevant myshopify-domän (till exempel storename.myshopify.com). Din Shopify-domän
data-embed_type Skiljer mellan inbäddningskod för Köpknappar, inbäddade kollektioner och inbäddade varukorgar. Möjliga värden är produkt , varukorg och kollektion. varukorg
data-checkout_button_text Texten som visas på knappen som leder till betalningssidan från i varukorgen (inte varukorgsknappen). Kassa
data-button_text_color Hexkoden för varukorgsknappens text, utan #. Kan vara tre eller sex hexadecimala tecken. ffffff
data-button_background_color Hexkoden för varukorgsknappens färg, utan #. Kan vara tre eller sex hexadecimala tecken. 7db461
data-background_color Bakgrundsfärgen på området runt den inbäddade varukorgen. Det kan vara en hexkod (per regler ovan) eller transparent. Om den är transparent tillämpas ingen utfyllnad för det inbäddade innehållet. transparent
data-text_color Hexkoden för varukorgsknappens text, utan #. Kan vara tre eller sex hexadecimala tecken. 000000
data-accent_color Hexkoden för kantlinjens färg som visas runt varukorgen, utan #. Kan vara tre eller sex hexadecimala tecken. 000000
data-cart_title Texten som visas högst upp i den inbäddade kundvagnen när den öppnas på en sida. Din varukorg
data-cart_total_text Texten som visas bredvid det totala beloppet i den inbäddade varukorgen. Totalt
data-discount_notice_text Rabattnotisen som visas i den inbäddade varukorgen. Fraktkostnader och rabattkoder läggs till i kassan.
data-sticky Visar om knappen visas där den placeras i markeringen eller fästs i sidans kant. Nyligen byggda inbäddade varukorgar har detta inställt på sant i den inbäddade koden. falskt
data-empty_cart_text Texten som visas om varukorgen är tom. Din varukorg är tom
data-next_page_button_text Texten som visas på knappen Nästa sida i en inbäddad kollektion. Nästa sida

Redigera en inbäddad kollektion

Inbäddad kod för en inbäddad kollektion innehåller två div-element. Den första div innehåller koden för en inbäddad varukorg och den andra div innehåller koden för de inbäddade köpknapparna som tar formen av en modal fönsterknapp för varje produkt i kollektionen.

Det andra div-elementet innehåller också följande attribut:

Definition av attribut i Köpknappskod
Attribut Värde Standard
data-collection_handle Den utvalda kollektionens namn som är baserat på produktens titel. Var och en av dina kollektioner har ett unikt namn i Shopify. Namn på utvald kollektion
data-embed_type Skiljer mellan inbäddningskod för Köpknappar, inbäddade kollektioner och inbäddade varukorgar. Möjliga värden är produkt , varukorg och kollektion. kollektion

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

Prova gratis