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

Advarsel

Dette er et avanceret selvstudium, som ikke understøttes af Shopify. Der forudsættes kendskab til webdesignsprog som HTML, CSS, JavaScript og Liquid. Hvis du har brug for hjælp, kan du ansætte en Shopify-ekspert.

Køb-knapper og indkøbskurve genereres ud fra den integreringskode, der føjes til HTML-kilden på din webside. Hvis du vil ændre udseendet af eller funktionsmåden for en knap eller indkøbskurv på en webside, skal du ændre den tilknyttede integreringskode.

Tip

Integreringskoden i HTML-kilden tilsidesætter de indstillinger, du vælger, når du opretter en knap eller en indkøbskurv i Shopify-administratoren. Hvis du ved en fejl angiver en ugyldig værdi for integreringskoden, erstattes den automatisk af standardværdien.

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

Sådan sletter du en eksisterende Køb-knap, kollektion eller integreret indkøbskurv:

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. Integreringskoden ser ud som følgende kode for en Køb-knap:

 

<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øb dit produkt</a></noscript> 

1. Gem dine ændringer.

Rediger en Køb-knap

Hvis du vil ændre udseendet af eller indstillingerne for en eksisterende Køb-knap, skal du redigere indholdet i div-hovedtagget i integreringskoden, der vises i HTML-kilden:

 

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

 

Alle funktioner i den integrerede Køb-knap styres af en separat attribut i div-hovedtagget. Du kan tilføje, fjerne eller opdatere disse attributter direkte i HTML-kilden.

Det kan f.eks. være, at du vil have en eksisterende Køb-knap til at dirigere brugeren til produktsiden i stedet for betalingssiden:

1. Åbn HTML-koden for siden med den Køb-knap, som du vil ændre.

2. Find attributten data-redirect_to i div-hovedtagget i Køb-knappens integreringskode:

   data-redirect_to="checkout"

3. Ret værdien af attributten til produkt:

   data-redirect_to="produkt"

4. Gem dine ændringer.

En Køb-knaps div-hovedtag har mange attributter, som du kan redigere:

Køb-knappens tagtilskrivninger, der kan redigeres

Attribut	Værdi	Standard
data-shop	Domænet myshopify (som f.eks. butiksnavn.myshopify.com) er tilknyttet knappen.	Dit Shopify-domæne
data-product_handle	Handlen til det udvalgte produkt, som er baseret på produktets titel. Alle dine produkter har et unikt handle i Shopify.	Handlen til det udvalgte produkt
data-embed_type	Der skelnes mellem integreringskode for Køb-knapper, integrerede kollektioner og integrerede indkøbskurve. Mulige værdier er produkt, indkøbskurv og kollektion.	produkt
data-display_size	Den maksimale bredde for hele indlejringen (ikke af knappen). Kan være kompakt (230 px) eller almindelig (450 px). Gælder kun for en Køb-knap til et enkelt produkt.	kompakt
data-has_image	Om det er en fuld produktindlejring (sand) eller kun Køb-knap (falsk).	sandt
data-redirect_to	Der, hvor Køb-knappen linker til. Kan være betaling, produkt eller indkøbskurv. Hvis du vil have, at Køb-knappen skal oprette forbindelse til en integreret indkøbskurv på den samme side, skal data-redirect_to være indkøbskurv.	betaling
data-product_modal	Udløser produktets modus, så det vises, når der klikkes på et produkt. Hvis værdien af data-redirect_to er modus, skal denne attribut være sand, ellers skal den være falsk.	falsk
data-buy_button_text	Teksten, som vises på Køb-knappen.	Køb nu
data-button_background_color	Hex-koden for farven på Køb-knappen uden #. Kan være tre hex-tegn eller seks.	7DB461
data-button_text_color	Hex-koden for farven på teksten på Køb-knappen uden #. Kan være tre hex-tegn eller seks.	ffffff
data-background_color	Baggrundsfarven for området omkring Køb-knappen. Det kan være en hex-kode (ifølge reglerne ovenfor) eller gennemsigtig. Hvis den er gennemsigtig, anvendes der ingen udfyldning til indholdet i integreringen.	gennemsigtighed
data-show_product_price	Tilsidesættelse af, om produktets pris skal vises eller ej. Kan være sand eller falsk.	Den aktuelle værdi af data-has_image
data-show_product_title	Tilsidesættelse af, om produkttitlen skal vises eller ej. Kan være sand eller falsk.	Den aktuelle værdi af data-has_image
data-buy_button_out_of_stock_text	Teksten, der vises, når et produkt ikke er på lager.	Ikke på lager
data-buy_button_product_unavailable_text	Teksten, der vises, når et produkt ikke er tilgængeligt.	Ikke tilgængelig
data-product_title_color	Hex-koden for farven på teksten i produkttitlen uden #. Kan være tre hex-tegn eller seks.	000000

Rediger indkøbskurven på dit website

Hvis du vil ændre udseendet af eller funktionsmåden for dit websites indkøbskurv, skal du tilføje et separat kodestykke af en HTML-kode og derefter redigere attributterne. Hver enkelt attribut styrer en forskellig del af indkøbskurvens udseende, eller måden den fungerer på.

Sådan redigerer du indkøbskurven på dit website:

1. Åbn HTML-koden for siden, der indeholder indkøbskurven, du vil redigere.

2. Indsæt følgende kode:

<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. Erstat your-shop-name.myshopify.com med din butiks myshopify.com-adresse.

2. Føj de relevante attributter til indkøbskurvens div-hovedtag, og rediger det, så det indeholder den ønskede værdi. Hvis du f.eks. vil ændre teksten, der vises øverst i indkøbskurven, skal du føje data-cart_title="your text" til div-hovedtagget i kodestykket. Resultatet vil se således ud:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">

1. Når du er færdig, skal du gemme dine ændringer.

Egenskaber for indkøbskurv

Bemærk

Sørg for, at de attributter for indkøbskurven, du tilføjer eller ændrer, er inkluderet i samme <div>-tag, der indeholder attributten data-embed_type="cart", og ikke i det <div>-tag, der indeholder attributten data-embed_type="product".

Der er mange attributter, som du kan bruge til at tilpasse indkøbskurven på dit website:

Tilskrivninger for tilpasning af indkøbskurv

Attribut	Værdi	Standard
data-shop	Det relevante myshopify-domæne (f.eks. storename.myshopify.com).	Dit Shopify-domæne
data-embed_type	Der skelnes mellem integreringskode for Køb-knapper, integrerede kollektioner og integrerede indkøbskurve. Mulige værdier er produkt, indkøbskurv og kollektion.	indkøbskurv
data-checkout_button_text	Teksten, der vises på knappen, som fører til betalingssiden inde fra indkøbskurven (ikke indkøbskurv-knappen).	Betalingsproces
data-button_text_color	Hex-koden for farven på teksten på indkøbskurven uden #. Kan være tre hex-tegn eller seks.	ffffff
data-button_background_color	Hex-koden for farven på indkøbskurv-knappe #. Kan være tre hex-tegn eller seks.	7DB461
data-background_color	Baggrundsfarven for området omkring den integrerede indkøbskurv. Det kan være en hex-kode (ifølge reglerne ovenfor) eller gennemsigtig. Hvis den er gennemsigtig, anvendes der ingen udfyldning til indholdet i integreringen.	gennemsigtighed
data-text_color	Hex-koden for farven på teksten på indkøbskurven uden #. Kan være tre hex-tegn eller seks.	000000
data-accent_color	Hex-koden for farven på kanten rundt om indkøbskurven uden #. Kan være tre hex-tegn eller seks.	000000
data-cart_title	Den tekst, der vises øverst i den integrerede indkøbskurv, når den åbnes på en side.	Din indkøbskurv
data-cart_total_text	Den tekst, der vises ved siden af det samlede beløb i den integrerede indkøbskurv.	I alt
data-discount_notice_text	Den rabatmeddelelse, der vises i den integrerede indkøbskurv.	Leverings- og rabatkoder tilføjes ved betalingsprocessen.
data-sticky	Angiver, om knappen vises, hvor den er anbragt i markeringen, eller om den er fastgjort i den ene del af siden. Nyligt udviklede integrerede kurve har denne angivet til sand i integreringskodens output.	falsk
data-empty_cart_text	Den tekst, der vises, hvis indkøbskurven er tom.	Din indkøbskurv er tom
data-next_page_button_text	Den tekst, der vises på knappen Næste side i en integreret kollektion.	Næste side

Rediger en integreret kollektion

Integreringskoden for en integreret kollektion indeholder to div-elementer. Det første div indeholder koden for en integreret indkøbskurv, og det andet div indeholder koden for den integrerede Køb-knap, som har form af en modusvinduesknap for hvert produkt i kollektionen.

Bemærk

Koden for den integrerede indkøbskurv og Køb-knapper kan redigeres som beskrevet ovenfor, men attributten data-redirect_to skal være angivet til modal og data-product_modal skal være true.

Det andet div-element indeholder også følgende attributter:

Definition af tilpasninger af Køb-knappens kode

Attribut	Værdi	Standard
data-collection_handle	Handlen til den udvalgte kollektion, som er baseret på kollektionens titel. Alle dine kollektioner har et unikt handle i Shopify.	Handlen til den udvalgte kollektion
data-embed_type	Der skelnes mellem integreringskode for Køb-knapper, integrerede kollektioner og integrerede indkøbskurve. Mulige værdier er produkt, indkøbskurv og kollektion.	kollektion