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

Buy Buttons und Warenkörbe werden aus den Code-Snippets generiert, die du aus deinem Shopify-Adminbereich kopierst und in den HTML-Code deiner Webseite einfügst. Diese Code-Snippets werden als Einbettungscode bezeichnet. Wenn du die Darstellung oder das Verhalten einer Schaltfläche oder eines Warenkorbs ändern möchtest, musst du den zugehörigen Einbettungscode bearbeiten.

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

Schritte:

  1. Öffne 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. Speichere deine Ä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, musst du den Einbettungscode bearbeiten, den du deinem Quell-HTML hinzugefügt hast.

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 Konfigurations Objekte 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 findest du in der Entwicklerdokumentation.

In diesem Beispiel kannst du deinen aktuellen Einbettungscode so ändern, dass dein Kunde anstelle des Warenkorbs 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. Speichere deine Änderungen.

Beispiel: Ändere das Layout deiner Produkteinbettung

In diesem Beispiel kannst du das Layout deiner 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üge einen Schlüssel layout hinzu und lege dann den Wert auf 'horizontal' fest:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. Speichere deine Änderungen.

Bearbeiten des Warenkorbs Ihrer Website

Wenn du das Erscheinungsbild oder Verhalten des Warenkorbs deiner Website ändern möchtest, musst du das Konfigurationsobjekt cart in deinem Einbettungscode bearbeiten.

Schritte:

  1. Öffne den HTML-Code der Seite mit dem Warenkorb, den du bearbeiten möchtest.
  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. Speichere deine Ä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), musst du das Konfigurationsobjekt product finden und auf dieselbe Weise bearbeiten, wie du ein eingebettetes Produkt bearbeiten würdest. Um die Eigenschaften der Kategorie selbst zu bearbeiten (zum Beispiel den Text der Schaltfläche Nächste Seite), bearbeite 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'
    }
  }
}

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren