Een koopknop of ingesloten winkelwagen bewerken of verwijderen

Koopknoppen en winkelwagens worden gegenereerd vanuit de codefragmenten die je kopieert vanaf je Shopify-beheercentrum en plakt in de bron-HTML van je webpagina. Deze codefragmenten worden ook wel invoegcode genoemd. Als je het uiterlijk of de werking van een knop of winkelwagen wilt wijzigen, moet je 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 je wijzigingen op.

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

Een koopknop bewerken

Bewerk de invoegcode die je aan je bron-HTML hebt toegevoegd als je het uiterlijk of de instellingen van een bestaande koopknop wilt wijzigen.

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

.

Als je wilt dat met je productcomponent een modaal 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 invoegcode te bewerken.

Elke component heeft veel attributen die je kunt bewerken. Zie onze documentatie voor ontwikkelaars voor een volledige lijst met bewerkbare opties. Voeg de juiste sleutel toe aan het juiste object (zie het voorbeeld) als je een optie wilt configureren die nog niet in je invoegcode wordt weergegeven.

De stijl van een component bewerken

Elke component heeft een genest styles-configuratieobject, dat je 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 kun je je huidige invoegcode wijzigen om je klant door te verwijzen naar een modaal met productdetails in plaats van de winkelwagen:

  1. Open de HTML-code van de pagina met de productinsluiting die je 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 je de aanhalingstekens opneemt):
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Sla je wijzigingen op.

Voorbeeld: de opmaak van je productinsluiting wijzigen

In dit voorbeeld kun je de indeling van je 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 je 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 je wijzigingen op.

De winkelwagen van je website bewerken

Bewerk het cart-configuratieobject in je invoegcode als je het uiterlijk of de werking van de winkelwagen van je website wilt wijzigen.

Stappen:

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

  2. Sla je 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 opmaak van elk product), zoek het product-configuratieobject en bewerk 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), bewerk 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