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.

          
{% comment %} == BEGIN CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}
{% if product.type == 'cpb_product' %}
    {% 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}}
    {{ 'customproductbuilder.css' | asset_url | stylesheet_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>

{% else %}
    {% section 'product-template' %}
{% endif %}
{% comment %} == END CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}

If your theme uses parralax or delayed javascript themes.

Delete these 2 lines

{'https://master.thecustomproductbuilder.com/dist/custom-product-builder.js' | script_tag}}
{{'https://master.thecustomproductbuilder.com/dist/customizer-theme-main.js'| script_tag}}

And paste this code after closing tag of div with id 'product-builder'. This code will load our JS after the theme JS is loaded.

<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>

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