Design Volume Discount Bundles Section with Row & Product Element

What is a Product Bundle?

A product bundle is a special offer where multiple units of the same product (or different products) are grouped together at a discounted price.

The main benefits of using product bundles include:

• Higher Conversions: Offering bundles creates urgency and a sense of added value, making it easier to nudge customers toward purchase decisions.
• Increased Average Order Value (AOV): Bundles encourage customers to buy in larger quantities, raising the total amount they spend per order.

How to Design Product Bundles with GemPages

Step 1: Create Product Bundles in Shopify

Before designing your bundle section in GemPages, you need to set up the bundle products in your Shopify Admin. The easiest method is to create each bundle as a separate product. This way, you can clearly track inventory and pricing for each option. For example, you might create:

• Product 1:
  • Title: My Product X1
  • Price: $30
• Product 2:
  • Title: My Product X2
  • Compare Price: $60
  • Price: $48 (Save 20%)
• Product 3:
  • Title: My Product X3
  • Compare Price: $90
  • Price: $63 (Save 30%)

For each product, you should upload an image that can showcase the number of items in the bundle to enhance the visual appeal.

Here’s how to do this: 

• On your Shopify store, click on the “Product” section, and choose “Add a product”.
• Fill in the product information and click “Save”.

• Continue and add the other 2 products. There are now 3 products as 3 bundles in your product list.

Step 2: Create a Row with Three Columns

Drag and drop the Row element from the left sidebar. Configure the Row to display three columns—one for each bundle option.

Step 3: Add the Product Element

• In the first column, drag and drop the Product element.

• Under Product Source, select the single-pack product you created earlier in Shopify.

Step 4: Customize the Product Element

• Click on the Product element to open its settings in the left sidebar.
• Customize the design by adjusting text size, adding buttons, or including supporting elements like badges or highlights.

Step 5: Edit the Remaining Bundles

• Duplicate the first Product element into the second and third columns.

• For each duplicated Product element, update the Product Source:

Column 2 → 3-Pack bundle:

Column 3 → 5-Pack bundle: