Manually Adding Custom Product Builder To the Dawn Theme. (O.S 2.0 Theme)

IMPORTANT:

The preferred way to install CPB into new OS 2.0 themes is through Theme App Extenstions.

Click this link to learn how to Enable CPB in app extensions Online Store 2.0

Use the following guide only if you don't want to use App Extensions

• 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> 
  
  {% endif %} 
  {% comment %} == END CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}

• Open section called 'main-product.liquid'
• After the line "<section class="page-width">" (should be around 20th) insert this code:

{% if product.type == 'cpb_product' %}
{% render 'customproductbuilder-initializer', product: product %}
{% else %}

Ex. before:

<section class="page-width">
<div class="product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">

Ex. after:

<section class="page-width">
{% if product.type == 'cpb_product' %}
{% render 'customproductbuilder-initializer' %}
{% else %}
<div class="product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">

• Before line "</section>" (should be around 384th) insert:

{% endif %}{% comment %}not a cpb_product end{% endcomment %}

Ex. before:

  {%- endfor -%}
</section>

Ex. after:

 {%- endfor -%}
{% endif %}{% comment %}not a cpb_product end{% endcomment %}
</section>

• Save the file
• 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.