How to integrate your infinite options bundle with PageFly

This guide will walk you through the process of integrating your infinite options bundle with your PageFly landing page.

Step 1.

To get started, open the code editor of your currently published theme.

Step 2.

If you have already followed the instructions in our article, "Set up infinite options manually on Online Store 1.0," you can bypass this step. If not, you'll need to create a new file named simple-bundles-options.liquid in your snippets folder (snippets/simple-bundles-options.liquid). Insert the content provided below into your new file:

The file should appear as shown here:

<script>
  (function() {
    // function to update the hidden input value
    function updateHiddenInputValue() {
        var selects = document.querySelectorAll('#{{ div_id }} select');
        var values = [];
        
        selects.forEach(function(select) {
            var selectedOption = select.options[select.selectedIndex];
            if (selectedOption) {
                values.push(selectedOption.value);
            }
        });
        
        if (values.length === 0) {
          return;
        }
        var hiddenInputValue = values.join(' <> ');
        var hiddenInput = document.querySelector('#{{ div_id }} input[name="properties[_bundle_selection]"]');
        if (!hiddenInput) {
            hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'properties[_bundle_selection]';
            document.getElementById('{{ div_id }}').appendChild(hiddenInput);
        }
        hiddenInput.value = hiddenInputValue;
    }
    // call the function initially to update the hidden input value
    window.addEventListener('pageshow', updateHiddenInputValue);
    // listen for changes on each select element and update the hidden input value
    var selects = document.querySelectorAll('#{{ div_id }} select');
    selects.forEach(function(select) {
        select.addEventListener('change', updateHiddenInputValue);
    });
  })();
</script>

Step 3.

Open PageFly and navigate to [Pages > Product Pages > Create from a template OR Create a Blank page]. Choose the option that aligns with your intent.

Step 4.

Assign the bundle(s) you have previously created to the template you are designing in "Please select a product" and then "Select Product".

Step 5.

Drag and drop a custom HTML/Liquid block to your preferred location on the page. Then, open the code editor and get ready to insert the code provided in the next step.

Step 6.

Copy and paste the following code into the open 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>

Refer to the image below to confirm that it looks correct:

Step 7.

Finally, save your work and publish your template. Your infinite options bundle should now be displayed on your product page.

This is how it should appear when published:

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