Addon Block (Product Page)

---

The Addon block offers up to three complementary products directly in the product buy box, for example a refill, a travel case or a care kit. Each add-on is shown as a small card with image, title, price and a toggle switch. When a customer switches an add-on on and clicks Add to cart, the add-on is added to the cart together with the main product.

The block is available in both product sections, Product Information and Product block, with the same settings in each. One block per section.

Adding The Block

1. Open the theme editor and navigate to a product page.
2. In the Product Information section (or the Product block section), click "Add block".
3. Choose Addon.
4. Select up to three products under Product 1–3.
5. Place the block above the Add block, so the add-ons are chosen before the customer clicks Add to cart.

Settings

Section title

Section title: the heading above the add-on cards, "Product Addons" by default. Leave it empty to show the cards without a heading.

Cards Settings

• Card styling:
  • Use theme default: the cards take their look from Theme settings → Cards, so they match the other cards in your store. All card settings below are hidden.
  • Custom (default): set the look for this block only, with the settings below.
• Container styling: No card (plain rows without background, padding or radius), Card (with optional border) or Shadow.
• Card background: transparent by default. Hidden for No card.
• Horizontal padding (desktop) / Vertical padding (desktop): space inside each card, 0–40px.
• Horizontal padding (mobile) / Vertical padding (mobile): the same for phones.
• Card border (0–5px) and Card border color: shown for the Card style. A border of 0 gives a borderless card.
• Box shadow offset, Box shadow blur, Box shadow spread, Box shadow color: shown for the Shadow style.
• Container corner radius: 0–50px.
• Image radius: corner radius of the product image, 0–40px.
• Gap (desktop) / Gap (mobile): space between the add-on cards, 0–40px.

Toggle

• Toggle on color: the switch when the add-on is selected (default black).
• Toggle off color: the switch when it is not selected (default light grey).
• Toggle knob color: the round knob inside the switch (default white).

The toggle colors apply in both card styling modes.

Product 1–3

• Select addon product 1–3: pick a product from your catalog. The first available variant is used.
• Custom title 1–3 (optional): replaces the product title on the card, for example "Refill pack" instead of the full product name.

Block margin

Margin bottom (desktop) and Margin bottom (mobile), 0–100px.

Tips

• Offer add-ons that really belong to the product. One or two good matches convert better than three random ones.
• Use the custom title to keep the cards short. Long product names wrap and push the price and toggle out of line.
• Choose a Toggle on color that stands out from the off color, so customers can see at a glance which add-ons they have selected. Your brand or button color usually works well.
• If your store uses one card style everywhere, set Card styling to Use theme default. Changes under Theme settings → Cards then update the add-on cards too.