Bearbeiten oder Löschen eines Buy Buttons oder eines eingebetteten Warenkorbs

Buy Buttons und Warenkörbe werden aus den Code-Snippets generiert, die Sie aus Ihrem Shopify-Adminbereich kopieren und in den HTML-Code Ihrer Webseite einfügen. Diese Code-Snippets werden als Einbettungscode bezeichnet. Wenn Sie die Darstellung oder das Verhalten einer Schaltfläche oder eines Warenkorbs ändern möchten, müssen Sie den zugehörigen Einbettungscode bearbeiten.

Löschen eines Buy Buttons, einer eingebetteten Kategorie oder eines eingebetteten Warenkorbs

So löschen Sie einen bestehenden Buy Button, eine Kategorie oder einen eingebetteten Warenkorb:

  1. Öffnen Sie den HTML-Quellcode der Webseite, die den Buy Button, die eingebettete Kategorie oder den eingebetteten Warenkorb enthält.
  2. Löschen Sie den gesamten Einbettungscode aus dem Quell-HTML, beginnend mit <script data-shopify-buy-ui> und endend mit </script>. Im Fall eines Buy Buttons sieht der Einbettungscode wie folgt aus:
<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. Speichern Sie Ihre Änderungen.

Der Buy Button, die eingebettete Kategorie oder der eingebettete Warenkorb werden nicht mehr auf Ihrer Webseite angezeigt.

Bearbeiten eines Buy Buttons

Um das Erscheinungsbild oder die Einstellungen eines vorhandenen Buy Buttons zu ändern, müssen Sie den Einbettungscode bearbeiten, den Sie Ihrem Quell-HTML hinzugefügt haben.

Jeder Buy Button besteht aus separaten Komponenten im Einbettungscode. Wenn Sie beispielsweise ein Produkt mit einem Warenkorb zu Ihrer Webseite hinzufügen, generiert der Einbettungscode eine product-Komponente, eine cart-Komponente und eine Warenkorb-toggle-Komponente:

Wenn Sie möchten, dass Ihre Produktkomponente ein modales Fenster mit Produktdetails öffnet, generiert der Einbettungscode eine modal-Komponente und eine modalProduct-Komponente:

Im folgenden Code-Snippet gibt es separate Komponenten für das product und den 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'
          }
        }
      }
    }
  });
});

Diese Komponenten werden separat über Konfigurationsobjekte im Einbettungscode konfiguriert. Sie können das Erscheinungsbild oder Verhalten Ihrer Buy Buttons ändern, indem Sie die Konfigurationsobjekte im Einbettungscode bearbeiten.

Jede Komponente hat viele Attribute, die Sie bearbeiten können. Eine vollständige Liste der konfigurierbaren Optionen finden Sie in unserer Entwicklerdokumentation. Wenn Sie eine Option konfigurieren möchten, die nicht bereits in Ihrem Einbettungscode angezeigt wird, müssen Sie den entsprechenden Schlüssel zum entsprechenden Objekt hinzufügen (siehe Beispiel).

Stil einer Komponente bearbeiten

Jede Komponente verfügt über ein verschachteltes styles-Konfigurationsobjekt, das Sie bearbeiten oder hinzufügen können, um das Erscheinungsbild der Komponente zu ändern. Diese Stile sind ähnlich wie CSS formatiert. Jeder Top-Level-Schlüssel im Objekt styles stellt ein Element in der Komponente dar, zum Beispiel den Titel oder die Schaltfläche. Innerhalb dieses Objekts ist jeder Schlüssel eine CSS-Eigenschaft (zum Beispiel 'background-color' oder 'border') und der Wert ist ein CSS-Wert.

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

Jede gültige CSS-Eigenschaft kann styles hinzugefügt werden. Beachten Sie, dass Eigenschaftsnamen mit Bindestrichen in Anführungszeichen gesetzt werden müssen.

Weitere Informationen zur CSS-Anpassung finden Sie in der Entwicklerdokumentation.

In diesem Beispiel können Sie Ihren aktuellen Einbettungscode so ändern, dass Ihr Kunde anstelle des Einkaufswagens auf ein Modal mit Produktdetails geleitet wird:

  1. Öffnen Sie den HTML-Code der Seite mit der Produkteinbettung, die Sie ändern möchten.
  2. Finden Sie das Konfigurationsobjekt product.
  3. Finden Sie den Schlüssel buttonDestination im Objekt:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Ändern Sie den Wert dieses Schlüssels in 'modal' um (stellen Sie sicher, dass Sie die Anführungszeichen einschließen):
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Speichern Sie Ihre Änderungen.

Beispiel: Ändern Sie das Layout Ihrer Produkteinbettung

In diesem Beispiel können Sie das Layout Ihrer Produkteinbettung so ändern, dass das Bild auf der Seite statt auf der Oberseite angezeigt wird:

  1. Öffnen Sie den HTML-Code der Seite mit der Produkteinbettung, die Sie ändern möchten.
  2. Finden Sie das Konfigurationsobjekt product.
  3. Fügen Sie einen Schlüssel layout hinzu und legen Sie dann den Wert auf 'horizontal' fest:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. Speichern Sie Ihre Änderungen.

Bearbeiten des Einkaufswagens Ihrer Website

Wenn Sie das Erscheinungsbild oder Verhalten des Warenkorbs Ihrer Website ändern möchten, müssen Sie das Konfigurationsobjekt cart in Ihrem Einbettungscode bearbeiten.

So bearbeiten Sie den Warenkorb Ihrer Website:

  1. Öffnen Sie den HTML-Code der Seite mit dem Warenkorb, den Sie bearbeiten möchten.
  2. Finden Sie das Konfigurationsobjekt cart in Ihrem Einbettungscode:
options: {
      cart: {
        startOpen: false
      }
}
  1. Bearbeiten oder fügen Sie die Eigenschaft hinzu, die Sie ändern möchten. Eine vollständige Liste der konfigurierbaren Eigenschaften finden Sie in der Entwicklerdokumentation.

  2. Speichern Sie Ihre Änderungen.

Eine eingebettete Kategorie bearbeiten

Das Bearbeiten einer eingebetteten Kategorie ähnelt dem Bearbeiten eines Produkts oder eines Warenkorbs. Um die Eigenschaften der Produkte innerhalb der Kategorie zu bearbeiten (zum Beispiel das Layout jedes Produkts), müssen Sie das Konfigurationsobjekt product finden und auf dieselbe Weise bearbeiten, wie Sie ein eingebettetes Produkt bearbeiten würden. Um die Eigenschaften der Kategorie selbst zu bearbeiten (zum Beispiel den Text der Schaltfläche Nächste Seite ), bearbeiten Sie stattdessen die productSet-Komponente.

Einige Eigenschaften, wie zum Beispiel der Text einer Komponente, werden über verschachtelte Objekte konfiguriert. Hierbei handelt es sich um Objekte, die innerhalb anderer Objekten angezeigt werden. Der Text für die Schaltfläche Nächste Seite wird beispielsweise in der productSet-Komponente und zwar im text-Objekt angezeigt:

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

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus