Manually Adding Custom Product Builder To a New Theme. – Custom Product Builder / Quiz Support

When Custom Product Builder App is installed to the Shopify store (after the charges are accepted) it runs auto install scripts and adds all necessary files to your published theme.

If you decide to change the theme to another one later, you would need to follow the following steps manually in order to add the necessary files to your new theme, so that Custom Product Builder can initialize in your new theme.

Here are the steps:

Go to Online Store -> Themes
Click Actions -> Duplicate (Create a backup just in case)
Click Actions -> Edit Code:

Add a new snippet called 'customproductbuilder-initializer'. It will add .liquid extension automatically when you click save.

Paste the following code into the created snippet.

          
    {% assign custombuilder = shop.metafields.customproductbuilder %}

      {% if custombuilder %}

        {% assign productEditor = custombuilder.productEditor %}

        {% assign productList = productEditor | split: ',' %}
        {% assign productId = product.id | append: '' %}

        {% if productList contains productId%}

          {{ 'https://code.jquery.com/jquery-3.0.0.min.js' | script_tag }}
          {{ 'https://cdn.shopify.com/s/assets/external/app.js' | script_tag }}
          {{ 'customproductbuilder.css' | asset_url | stylesheet_tag }}
          
          {% comment %}
          Delete comment tags below code if you want to see title and product description on the page too.
          {% endcomment %}
          {% comment %}
          <div style="padding-left: 70px;">

            <h1>{{product.title}}</h1>
            <p>{{product.description}}</p>
          </div>
          {% endcomment %}
         
          <div id="product-builder"
                shop-name="{{shop.permanent_domain}}"
                product-id="{{product.id}}"
                styles-path="{{'customproductbuilder.css' | asset_url }}"
                data-cpb-user-id="{{customer.id}}"
                product-handle="{{product.handle }}"
                data-cpb-configuration-url="{{ product.metafields.customproductbuilder['configurableUrl'] }}">
          </div>

          <script> 
               document.addEventListener('DOMContentLoaded',function(){
                      setTimeout(function(){
                          var cpb = document.createElement('script');
                          cpb.setAttribute('src','https://master.thecustomproductbuilder.com/dist/custom-product-builder.js');
                           document.head.appendChild(cpb);

                          var theme = document.createElement('script');
                          theme.setAttribute('src','https://master.thecustomproductbuilder.com/dist/customizer-theme-main.js');
                          document.head.appendChild(theme);
                      }, 500);
                  });
          </script>

        {% else %}
          {% section 'product-page' %}
        {% endif %}

      {% else %}
        {% section 'product-page' %}
      {% endif %}

Open template file called 'product.liquid'
Cut the following code from 'product.liquid' file that calls product template section. The line will look one of the following ways:
```
{% section 'product-template' %} or {% section 'product' %} or {% section 'product-page' %}
```
and paste it into 'customproductbuilder-initializer.liquid' instead of the lines in bold above.
```
{% section 'product-page' %}
```
After that paste the following line into 'product.liquid' instead of the code that was just cut out.
```
{% include 'customproductbuilder-initializer' %}
```
So we are replacing the line that calls default product template with the custom product builder initializer code that will launch the builder or default product page. Save the files.

Last step is to add 'customproductbuilder.css' file to the assets section of your theme files.

Paste the following code inside of 'customproductbuilder.css':

    /* Please use this file to customize the styles of the custom product builder */

    #product-builder {
        width: 100%;
        position: relative;
        border: none;       
    }

You can add any other CSS or edit the above snippet to customize the look of the Custom Product Builder page in this file as well.

IMPORTANT:

Related articles