Een koopknop of ingesloten winkelwagen bewerken of verwijderen

Let op

Dit is een uitgebreide tutorial en deze wordt niet ondersteund door Shopify. Hiervoor is kennis van een webontwerptaal zoals HTML, CSS, JavaScript en Liquid vereist. Als je hulp nodig hebt, kun je een Shopify-partner inhuren.

Koopknoppen en winkelwagens worden gegenereerd vanuit de invoegcode die je toevoegt aan de bron-HTML van je webpagina. Bewerk de bijbehorende invoegcode als je het uiterlijk of de werking van een knop of winkelwagen op een webpagina wilt wijzigen.

Tip

De invoegcode in de bron-HTML overschrijft de instellingen die je kiest bij het maken van een knop of winkelwagen in het Shopify-beheercentrum. Als je per ongeluk een ongeldige waarde invoert voor de invoegcode, wordt deze automatisch vervangen door de standaardwaarde.

Een koopknop, ingesloten collectie of ingesloten winkelwagen verwijderen

Een bestaande koopknop, collectie of ingesloten winkelwagen verwijderen:

1. Open de bron-HTML van de webpagina die de koopknop, ingesloten collectie of ingesloten winkelwagen bevat.

2. Verwijder de volledige invoegcode uit de bron-HTML. De invoegcode ziet eruit als de volgende code voor een koopknop:

 

<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">Je product kopen</a></noscript> 

1. Sla je wijzigingen op.

Een koopknop bewerken

Bewerk de content van de bijbehorende div-mastertag in de invoegcode die wordt weergegeven in de bron-HTML als je het uiterlijk of de instellingen van een bestaande koopknop wilt wijzigen:

 

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

 

Elke functie van de ingesloten koopknop wordt bestuurd door een afzonderlijk attribuut in de hoofd-div-tag. Je kunt deze attributen rechtstreeks in de bron-HTML toevoegen, verwijderen of bijwerken.

Als je de gebruiker bijvoorbeeld via een bestaande koopknop naar de productpagina wilt leiden in plaats van naar de checkoutpagina:

1. Open de HTML-code van de pagina met de koopknop die je wilt wijzigen.

2. Zoek naar het attribuut data-redirect_to binnen de div-mastertag van de invoegcode van de koopknop:

   data-redirect_to="checkout"

3. Wijzig de waarde van het attribuut in product:

   data-redirect_to="product"

4. Sla je wijzigingen op.

De div-mastertag van een koopknop heeft veel attributen die je kunt bewerken:

Bewerkbare attributen Koopknop-tags

Attribuut	Waarde	Standaard
data-shop	Het myshopify-domein (zoals winkelnaam.myshopify.com) verbonden met de knop.	Je Shopify-domein
data-product_handle	De handle van het uitgelichte product die is gebaseerd op de titel van het product. Al je producten hebben een unieke handle in Shopify.	De handle van het uitgelichte product
data-embed_type	Hiermee wordt onderscheid gemaakt tussen invoegcode voor koopknoppen, ingesloten collecties en ingesloten winkelwagens. Mogelijke waarden zijn product, winkelwagen en collectie.	product
data-display_size	De maximale breedte van de volledige insluiting (niet van de knop). Kan compact (230px) of normaal (450px) zijn. Is alleen van toepassing op een koopknop voor één product.	compact
data-has_image	Of het een volledige productinsluiting (waar) of alleen een koopknop (onwaar) is.	true
data-redirect_to	Waar de koopknop naar verwijst. Dit kan de checkout, een product of de winkelwagen zijn. Als je wilt dat de koopknop wordt gekoppeld aan een ingesloten winkelwagen op dezelfde pagina, moet data-redirect_to winkelwagen zijn.	checkout
data-product_modal	Hiermee wordt de product-modaal geactiveerd zodat deze wordt weergegeven wanneer er op een product wordt geklikt. Als de waarde van data-redirect_to modaal is, moet dit attribuut waar zijn, anders moet het onwaar zijn.	false
data-buy_button_text	De tekst die wordt weergegeven op de koopknop.	Koop nu
data-button_background_color	De hex-code van de kleur van de koopknop, zonder de #. Kan uit drie of zes hexadecimale tekens bestaan.	7db461
data-button_text_color	De hex-code van de kleur van de tekst van de koopknop, zonder de #. Kan uit drie of zes hexadecimale tekens bestaan.	ffffff
data-background_color	De achtergrondkleur van het gebied rond de koopknop. Dit kan een hex-code (volgens bovenstaande regels) of transparant zijn. Als deze transparant is, wordt er geen opvulling toegepast op de content van de insluiting.	transparant
data-show_product_price	Overschrijving voor het al dan niet weergeven van de productprijs. Kan waar of onwaar zijn.	De huidige waarde van data-has_image
data-show_product_title	Overschrijving voor het al dan niet weergeven van de producttitel. Kan waar of onwaar zijn.	De huidige waarde van data-has_image
data-buy_button_out_of_stock_text	De tekst die wordt weergegeven wanneer een product niet op voorraad is.	Niet op voorraad
data-buy_button_product_unavailable_text	De tekst die wordt weergegeven wanneer een product niet beschikbaar is.	Niet beschikbaar
data-product_title_color	De hex-code van de kleur van de tekst van de producttitel, zonder de #. Kan uit drie of zes hexadecimale tekens bestaan.	000000

De winkelwagen van je website bewerken

Voeg een afzonderlijk HTML-codefragment toe en bewerk vervolgens de attributen hiervan als je het uiterlijk of de werking van de winkelwagen van je website wilt wijzigen. Elk attribuut bestuurt een ander deel van het uiterlijk en de werking van de winkelwagen.

De winkelwagen van je website bewerken:

1. Open de HTML van de pagina met de winkelwagen die je wilt bewerken.

2. Plak de volgende code:

<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. Vervang your-shop-name.myshopify.com door het myshopify.com-adres van je winkel.

2. Voeg de relevante attributen toe aan de div-mastertag van de winkelwagen en wijzig deze zo dat hierin de gewenste waarde wordt opgenomen. Voeg data-cart_title="your text" toe aan de div-mastertag in het codefragment als je bijvoorbeeld de tekst bovenaan de winkelwagen wilt wijzigen. Het resultaat ziet er dan als volgt uit:

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

1. Sla de wijzigingen op wanneer je klaar bent.

Winkelwagenattributen

Opmerking

Zorg ervoor dat je de winkelwagenattributen die je toevoegt of wijzigt, opneemt in dezelfde <div>-tag met het data-embed_type="cart"-attribuut en niet in de <div>-tag met het data-embed_type="product"-attribuut.

Er zijn veel attributen die je kunt gebruiken om de winkelwagen van je website aan te passen:

Attributen winkelwagen aanpassen

Attribuut	Waarde	Standaard
data-shop	Het relevante myshopify-domein (zoals winkelnaam.myshopify.com).	Je Shopify-domein
data-embed_type	Hiermee wordt onderscheid gemaakt tussen invoegcode voor koopknoppen, ingesloten collecties en ingesloten winkelwagens. Mogelijke waarden zijn product, winkelwagen en collectie.	winkelwagen
data-checkout_button_text	De tekst die wordt weergegeven op de knop die naar de checkoutpagina leidt vanuit de winkelwagen (niet de knop Winkelwagen).	Checkout
data-button_text_color	De hex-code van de tekstkleur van de knop Winkelwagen, zonder de #. Kan uit drie of zes hexadecimale tekens bestaan.	ffffff
data-button_background_color	De hex-code van de kleur van de knop Winkelwagen, zonder de #. Kan uit drie of zes hexadecimale tekens bestaan.	7db461
data-background_color	De achtergrondkleur van het gebied rond de ingesloten winkelwagen. Dit kan een hex-code (volgens bovenstaande regels) of transparant zijn. Als deze transparant is, wordt er geen opvulling toegepast op de content van de insluiting.	transparant
data-text_color	De hex-code van de tekstkleur van de knop Winkelwagen, zonder de #. Kan uit drie of zes hexadecimale tekens bestaan.	000000
data-accent_color	De hex-code van de kleur van de rand die rond de winkelwagen wordt weergegeven, zonder de #. Kan uit drie of zes hexadecimale tekens bestaan.	000000
data-cart_title	De tekst die bovenaan de ingesloten winkelwagen wordt weergegeven wanneer deze is geopend op een pagina.	Je winkelwagen
data-cart_total_text	De tekst die wordt weergegeven naast het totale bedrag in de ingesloten winkelwagen.	Totaal
data-discount_notice_text	Het kortingsbericht dat wordt weergegeven in de ingesloten winkelwagen.	Verzend- en kortingscodes worden toegevoegd bij de checkout.
data-sticky	Hiermee wordt aangegeven of de knop wordt weergegeven waar deze in de opmaak is geplaatst of aan de zijkant van de pagina. Voor recent gemaakte ingesloten winkelwagens is dit ingesteld op waar in de uitvoer van de invoegcode.	false
data-empty_cart_text	De tekst die wordt weergegeven als de winkelwagen leeg is.	Je winkelwagen is leeg
data-next_page_button_text	De tekst die wordt weergegeven op de knop Volgende pagina in een ingesloten collectie.	Volgende pagina

Een ingesloten collectie bewerken

De invoegcode voor een ingesloten collectie bevat twee div-elementen. De eerste div bevat de code voor een ingesloten winkelwagen en de tweede div bevat de code voor de ingesloten koopknoppen, die de vorm hebben van een modal-vensterknop voor elk product in de collectie.

Opmerking

De code voor de ingesloten winkelwagen en koopknoppen kunnen worden bewerkt zoals hierboven is beschreven, maar het data-redirect_to-attribuut moet dan worden ingesteld op modal en data-product_modal moet true zijn.

Het tweede div-element bevat ook de volgende attributen:

Definitie van attributen in de code van de Koopknop

Attribuut	Waarde	Standaard
data-collection_handle	De handle van de uitgelichte collectie die is gebaseerd op de titel van de collectie. Elk van je collecties heeft een unieke handle in Shopify.	De handle van de uitgelichte collectie
data-embed_type	Hiermee wordt onderscheid gemaakt tussen invoegcode voor koopknoppen, ingesloten collecties en ingesloten winkelwagens. Mogelijke waarden zijn product, winkelwagen en collectie.	collectie