Skip to main content

Theme App Extension

The Spiff Commerce theme app extension framework is a solution for merchants who don't want to get their hands dirty with code. For merchants who aren't technical and, even if they are, they need to spend their time in other areas of their business. You can add and customize the look and feel of a Spiff Commerce button all in the Shopify theme editor. The Spiff Commerce theme app extension is only compatible with themes that are updated to shopify online store 2.0.

Render Button​

To render the Spiff Commerce button you need to first navigate to the theme editor and press on the Add block button located in the sidebar. You will see a list of available apps that are compatible as a theme app extension. Press the Spiff Customise Button to add a button to your page.

Add Block Button

Button Settings​

Once a button has been added to your page you can press on it to reveal the button settings.

  • Product: The product handle to sync (Will automatically set the correct product)
  • Tick me to enable bulk products: (Work in progress)
  • Tick me to enable design products: Enables Design Products
  • Tick me to enable redirect products: (Work in progress)
  • Tick me to enable cart staging products: (Work in progress)
  • Tick me to enable redirect to cart: Enables cart redirection on cart add
  • Tick me to hide button when product is not available: Hides the button when the product is not valid
  • Tick me to disable button: Initially disables the button
  • Button Text: Change Button text
  • Button Width: Change button width, measured in % defaults to 100%
  • Button height: Change button height, measured in PX defaults to 50px
  • Button Color: Change button background
  • Button Text Color: Change button Text Color
  • Font Size: Measured in PX defaults to 16px
  • Font Weight: Defaults to 100
  • Border Radius: Change border radius, measured in PX defaults
  • Margin Top: Change Margin Top, measured in PX defaults to 25px
  • Margin Right: Change Margin Right, measured in PX defaults to 0px
  • Margin Bottom: Change Margin Bottom, measured in PX defaults to 0px
  • Margin left: Change Margin Left, measured in PX defaults to 0px

Button events​

The buttons for our Theme App Extension fire the following events, which are all fired on the document element as Custom Events.

spiffAddToCart​

This event is fired once the experience has been completed and items have been added to cart. This will event will not fire if no items were added to cart, or if the button has been configured to redirect or reload the page after adding items to cart.

The detail of the event contains an array of items added to the cart, as described on the Shopify docs.

document.addEventListener("spiffAddToCart", (e) => {
    for (const item of e.detail.items) {
        console.log("product added variant to cart", item.product_id);
    }
});