How to integrate Simple Bundles with GemPages

This article applies to Simple Bundles 1.0. If you're using Simple Bundles 2.0, refer to How to build an Infinite Options Bundle in Simple Bundles 2.0.

To show Simple Bundles 1.0 bundles on a GemPages product page, assign the bundle products to a GemPages product page template. That's all a Single-price bundle needs, because its options are regular Shopify variants. An Infinite options bundle also needs a Liquid snippet in your theme and a custom code element in the GemPages template.

The steps below use GemPages v7 labels. Older screenshots may show the GemPages v6 editor.

How do I add a bundle to a GemPages template?

In GemPages, go to Pages and select the Product page type.
Create a new product page template, or pick an existing one.

GemPages product pages list with the option to create a new template — Creating a product page template in GemPages

Click Assign Product next to the template name, check your bundle products, and click Confirm.

Assign Product dialog in GemPages with a bundle selected — Assigning bundle products to the template

Finish designing the template, then save and publish it.

Note: If you're assigning an Infinite options bundle, also complete the steps in the next section. Without them, customers can't choose bundle options on the page.

How do I set up an Infinite options bundle in GemPages?

Step 1: Add the options snippet to your theme

If you've already followed Set up infinite options manually on Online Store 1.0, your theme already has this snippet. Skip to Step 2.

In your Shopify admin, go to Online Store > Themes. Next to your current theme, click ⋯ > Edit code.

Opening the code editor for the published Shopify theme — Opening the theme code editor

In the snippets folder, add a new file named simple-bundles-options.liquid.
Paste the following code into the file and click Save.

It should look like this:

simple-bundles-options.liquid snippet file in the theme code editor — The simple-bundles-options.liquid snippet

Step 2: Add a custom code element to the GemPages template

Open the GemPages template for your Infinite options bundle.
From the Advanced section of the left sidebar, drag a Custom Code element to where you want the bundle options to appear. In GemPages v6, use the Liquid element instead.

Dragging a custom code element into the GemPages template — Adding a custom code element

Click + Add… to open the code editor. In the HTML/Liquid tab, paste the following code and click Save.

GemPages code editor for the custom code element — GemPages code editor

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

{% assign current_variant = product.selected_or_first_available_variant %}
<div style="display: none" id="simple-bundles-options-html">
  {% render 'simple-bundles-options', variant: current_variant, div_id: 'simple-bundles-options' %}
</div>

<style>
  #simple-bundles-options-html select {
    width: 100%;
    margin-bottom: 8px;
    background: #ffffff;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: auto 16px !important;
    padding: 10px;
  }
  #simple-bundles-options-html {
    display: block !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
</style>

It should look like this:

Custom code element in GemPages with the Simple Bundles options code added — Options code added to the template

Save and publish the template. The bundle options now show on the product page.

Saving and publishing the GemPages template — Saving and publishing the template

Here's how it looks once published:

Published GemPages product page showing the infinite options dropdowns — Bundle options on the published page

If you have questions, contact our team and we'll help you get set up.

Set up infinite options manually on Online Store 1.0

Bundle type: Infinite options bundle | add unlimited bundle options without variants

How to use Simple Bundles with PageFly

How to integrate Simple Bundles with GemPages

How do I add a bundle to a GemPages template?

How do I set up an Infinite options bundle in GemPages?

Step 1: Add the options snippet to your theme

Step 2: Add a custom code element to the GemPages template

Related articles