NORTH JS TECH
Skip to content
North Js Tech

Storefront Widget

The Storefront Widget is the front-end display of your bundle that appears on your Shopify store. It is what customers interact with to build their bundle, view discounts, and add products to the cart.

What is the Storefront Widget?

The Storefront Widget is a dynamic bundle interface that:

  • Displays selected products or collections
  • Shows active discounts and tier progress
  • Allows customers to add/remove items
  • Updates pricing and savings in real time

It connects directly with your bundle configuration from the Visual Editor.

Where It Appears

The widget can be displayed in multiple places on your store:

  • Product pages
  • Custom landing pages
  • App embed sections
  • Standalone bundle pages (if configured)

You can control placement through theme integration or app embed settings.

Key Features

1. Real-Time Bundle Building

Customers can:

  • Select products
  • Adjust quantities
  • Instantly see updated pricing

2. Dynamic Discount Display

  • Shows tier-based discounts (quantity or amount)
  • Displays messages like:
    • “Add 2 more items to get 20% OFF”
    • “Spend $50 more to unlock Free Shipping”

3. Progress Indicators

  • Visual progress bars or messages guide customers
  • Encourages users to reach the next discount tier

4. Live Price Updates

  • Subtotal, discount, and total update instantly
  • Clear breakdown of savings is shown

5. Free Gift & Offers Display

  • Automatically shows eligible free gifts
  • Allows selection if multiple gift options are available

6. Add to Cart Integration

  • Customers can add the entire bundle to cart with one click
  • Bundle is processed with applied discounts

Customization Options

You can fully customize the Storefront Widget from the Styling tab:

  • Colors, fonts, and layout
  • Product card design
  • Button styles
  • Progress bar and tier display
  • Mobile and desktop responsiveness

How It Works with Discounts

The widget automatically reflects:

  • Quantity-Based Tiers → Based on number of items
  • Amount-Based Tiers → Based on total spend
  • All discount types (percentage, fixed, gift, shipping, etc.)

As customers interact, the widget updates in real time.

Benefits

  • Improves user experience with interactive bundling
  • Increases average order value (AOV)
  • Boosts conversion rates with clear incentives
  • Fully synchronized with your bundle logic

Summary

The Storefront Widget is the customer-facing part of your bundle system. It turns your bundle configuration into an interactive shopping experience, helping customers easily understand offers, build bundles, and complete purchases.

Last updated April 8, 2026

Let's talk