How to integrate Simple Bundles with GemPages

If you are currently using GemPages as your landing page builder and you want to show your bundles follow the steps below. Note that the process varies between Infinite Options bundle type and Single-price bundle/Separately-priced items.

Step 1.

Open GemPages, select Product Pages in the sidebar and Create a New template.

Step 2.

Assign the bundle(s) you have previously created to the template you are designing in "Assign Product".

With these steps you have already assigned the bundle(s) to your template. You just need to finish designing the template to your liking.

Step 3 (From this step you will set up the Infinite options bundle).

Open the code editor of your published theme.

Step 4.

If you have previously followed the steps in the article "Set up infinite options manually on Online Store 1.0" you can skip this step. Otherwise, create a new file in the snippets folder and name it  simple-bundles-options.liquid (snippets/simple-bundles-options.liquid).

Add the following contents to the file:

It should look like the following:

Step 5.

Go back to the GemPages template that you are designing for your Infinite Options bundle and add a custom liquid block (you must drag it to where you want to place it).

Open the custom liquid editor and add the following code:

{{ '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 the following:

Step 5.

Finally, don't forget to save and publish your template. After that your Infinite Options bundle should already be visible on the product page.

How it looks already published:

If you have any questions, please feel free to reach out to our team and we would happy to help you get set up. 😊