How to display multiple customizable products on one page – Custom Product Builder / Quiz Support

1. In the themes list click on the "Edit code" button.

2. In the "sections" folder, please, create a new file and name it "cpb-instance.liquid". Replace its content with the code below:

{% liquid
assign productIdFromUser = section.settings.id | plus: 0
assign findFlag = false

for product in collections.first.products
  if product.id == productIdFromUser
    assign product1 = product
    assign findFlag = true
  endif
endfor

if findFlag == false
  assign product1 = collections.first.products[7]
endif

%}

<div class="page-width"> 
  <iframe width="100%" height="900" loading='lazy' id='builder-{{ product1.id }}' style="border: none;" srcdoc='{% render 'cpb-instance-init', product: product1 %}'>
    <p>Your browser doesn't support iframe html tag</p>
  </iframe>
</div>
<script>
  window.addEventListener('message', (event) => {
    if (typeof event.data == 'string' && event.data.includes('frame-{{ product1.id }}')) {
      document.getElementById('builder-{{ product1.id }}').setAttribute('height', event.data.split(':').at(-1))
    }
  });
</script>
{% schema %}
{
  "name": "cpb-instance",
  "settings": [
    {
      "type": "text",
      "id": "id",
      "info": "You can put here the ID of the cpb_product you want to display in this section",
      "label": "Product ID"
    }
  ],

  "presets": [
    {
      "name": "cpb-instance"
    }
  ]
}
{% endschema %}

3. Now, in the snippets folder create another file called "cpb-instance-init.liquid" and paste there the code below:

{% comment %} == BEGIN CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}
<html>
  <body>
  {% assign productId = product.id | append: '' %}

  {{ '//cdn.shopify.com/s/assets/external/app.js' | script_tag}}
  {{'https://cdn.thecustomproductbuilder.com/dist/latest/custom-product-builder.js' | script_tag}}
  {{'https://cdn.thecustomproductbuilder.com/dist/latest/customizer-theme-main.js'| script_tag}} 
  <div
  id="product-builder"
  data-engine="shopify"
  data-shop-name="{{shop.permanent_domain}}"
  data-product-id="{{productId}}"
  data-styles-path="{{'customproductbuilder.css' | asset_url }}"
  data-config-path="{{product.metafields.customproductbuilder['configurableUrl']}}"
  data-cpb-user-id="{{customer.id}}"
  data-customer-id="{{customer.id}}"></div>

  <script>
  document.body.addEventListener("CPB_ON_PRODUCT_MOUNTED", function(event) {
    let height = document.querySelector("#product-builder").clientHeight + 100 + "px";
    window.top.postMessage(`frame-{{ product.id }}: ${height}`);

    const resizeOsbserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
        height = document.querySelector("#product-builder").clientHeight + 100 + "px";
        window.top.postMessage(`frame-{{ product.id }}: ${height}`);
      })
    });

    resizeOsbserver.observe(document.querySelector("#product-builder"));
    })
  </script>

  {{ 'cpb-instance.css' | asset_url | stylesheet_tag }}
  {{ 'cpb-instance.js' | asset_url | script_tag }}


  </body>
</html>
{% comment %} == END CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}

4. After the steps above, you will find a new section it the theme customizer. You can add it to almost any page of your online store.

All you need to do now is to put in an ID of the product you want to display in a particular instance. You can find this ID in the admin panel of CPB App. Please see the screenshots below:

Снимок экрана 2024-09-23 в 18.56.50.png

Снимок экрана 2024-09-23 в 19.09.00.png

Снимок экрана 2024-09-23 в 18.58.02.png

Since all steps above are done, you get multiple instances of CPB on a single page of your online store.

Note: We recommend that you use separate styles/scripts for this type of implementation to avoid conflicts. So we suggest creating files "cpb-instance.css" and "cpb-instance" in the "assets" folder to apply your custom code if needed. We also recommend turning off the "sticky preview" feature for mobile devices, as it can lead to an unexpected behavior of the page.

Important:

If you would like to use several CPB instances on one page, use this method for each one. If you are going to use only one section with the app per page, please use the regular method of installing the app in the theme.

Enable CPB in Theme App Extensions Online Store 2.0 (Dawn and other 2.0 themes)

Related articles