Een koopknop of ingesloten winkelwagen bewerken of verwijderen

Koopknoppen en winkelwagens worden gegenereerd vanuit de codefragmenten die u kopieert vanaf uw Shopify-beheerder en plakt in de bron-HTML van uw webpagina. Deze codefragmenten worden ook wel invoegcode genoemd. Als u het uiterlijk of de werking van een knop of winkelwagen wilt wijzigen, moet u de bijbehorende invoegcode bewerken.

Een koopknop, ingesloten collectie of ingesloten winkelwagen verwijderen

Stappen:

  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, vanaf <script data-shopify-buy-ui> tot en met </script>. Voor een koopknop ziet de invoegcode eruit als de volgende code:
<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. Sla uw wijzigingen op.

De koopknop, ingesloten collectie of ingesloten winkelwagen wordt niet meer weergegeven op je webpagina.

Een koopknop bewerken

Als je het uiterlijk of de instellingen van een bestaande koopknop wilt wijzigen, moet je de invoegcode bewerken die je aan je bron-HTML hebt toegevoegd.

Elke koopknop is opgebouwd uit afzonderlijke componenten in de invoegcode. Als u bijvoorbeeld een product met een winkelwagen aan uw webpagina toevoegt, wordt met de invoegcode een product-component, een cart-component en een winkelwagencomponent toggle gegenereerd:

.

Als u wilt dat met uw productcomponent een modal-venster met productdetails wordt geopend, wordt met de invoegcode een modal-component en een modalProduct-component gegenereerd:

.

In het volgende codefragment zijn er afzonderlijke componenten voor product en 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'
          }
        }
      }
    }
  });
});

Deze componenten worden afzonderlijk geconfigureerd via configuratie_objecten_ in de invoegcode. Je kunt het uiterlijk of gedrag van je koopknoppen wijzigen door de configuratie-objecten in de insluitcode te bewerken.

Elke component heeft veel attributen die u kunt bewerken. Zie onze documentatie voor ontwikkelaars voor een volledige lijst met bewerkbare opties. Als u een optie wilt configureren die nog niet in uw invoegcode wordt weergegeven, moet u de juiste sleutel toevoegen aan het juiste object (zie het voorbeeld).

De stijl van een component bewerken

Elke component heeft een genest styles-configuratieobject, dat u kunt bewerken of toevoegen om het uiterlijk van de component te wijzigen. Deze stijlen zijn op dezelfde manier opgemaakt als CSS. Elke sleutel op het hoogste niveau in het styles-object geeft een element aan in de component, zoals de titel of de knop. Binnen dit object is elke sleutel een CSS-eigenschap (bijvoorbeeld 'achtergrondkleur' of 'rand') en is de waarde een CSS-waarde.

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

Elke geldige CSS-eigenschap kan worden toegevoegd aan styles. Denk eraan dat eigenschapnamen met streepjes tussen aanhalingstekens moeten staan.

Zie de documentatie voor ontwikkelaars voor meer informatie over CSS-aanpassingen.

In dit voorbeeld kunt u uw huidige invoegcode wijzigen om uw klant door te verwijzen naar een modal met productdetails in plaats van de winkelwagen:

  1. Open de HTML-code van de pagina met de productinsluiting die u wilt wijzigen.
  2. Zoek het product-configuratieobject.
  3. Zoek de buttonDestination-sleutel in het object:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Wijzig de waarde van deze sleutel in 'modal' (zorg ervoor dat u de aanhalingstekens opneemt):
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Sla uw wijzigingen op.

Voorbeeld: de indeling van je productinsluiting wijzigen

In dit voorbeeld kunt u de indeling van uw productinsluiting wijzigen, zodat de afbeelding aan de zijkant wordt weergegeven in plaats van bovenaan:

  1. Open de HTML-code van de pagina met de productinsluiting die u wilt wijzigen.
  2. Zoek het product-configuratieobject.
  3. Voeg een layout-sleutel toe en stel de waarde in op 'horizontal':
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. Sla uw wijzigingen op.

De winkelwagen van uw website bewerken

Als u het uiterlijk of de werking van de winkelwagen van uw website wilt wijzigen, moet u het cart-configuratieobject in uw invoegcode bewerken.

Stappen:

  1. Open de HTML van de pagina met de winkelwagen die u wilt bewerken.
  2. Zoek het cart-configuratieobject in je invoegcode:
options: {
      cart: {
        startOpen: false
      }
}
  1. Bewerk de eigenschap die u wilt wijzigen of voeg deze toe. Zie de documentatie voor ontwikkelaars voor een volledige lijst met configureerbare eigenschappen.

  2. Sla uw wijzigingen op.

Een ingesloten collectie bewerken

Het bewerken van een ingesloten collectie is vergelijkbaar met het bewerken van een product of winkelwagen. Als je de eigenschappen van de producten in de collectie wilt bewerken (bijvoorbeeld de lay-out van elk product), zoekt je het product-configuratieobject en bewerkt je dit op dezelfde manier als een productinsluiting. Als je de eigenschappen van de collectie zelf wilt bewerken (bijvoorbeeld de tekst van de knop Volgende pagina), bewerkt je in plaats hiervan de productSet-sleutel.

Sommige eigenschappen, zoals de tekst van een component, worden geconfigureerd via geneste objecten. Dit zijn objecten die binnen andere objecten worden weergegeven. De tekst voor de knop Volgende pagina wordt bijvoorbeeld weergegeven binnen het text-object van de productSet-component:

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis