How to add 'Personalize It' button on Shopify products. (Both O.S 2.0 and old)

How to create a personalize button that will redirect from basic product to CPB product.

1. Shopify 1.0 Themes

In the customproductbuilder-initializer.liquid file find this code:

<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}}"
product-handle="{{product.handle}}" ></div>

And replace it with:

<div
id="product-builder"
style="height:0px;min-height:0px;opacity:0;pointer-events:none;"
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}}"
product-handle="{{product.handle}}" ></div>

<div class="basic-product--js">{% section 'product-template' %}</div>
<script>
(function() {
var builder = document.querySelector('#product-builder');
var basicProduct = document.querySelector('.basic-product--js');

function showCPB() {
builder.removeAttribute('style');
basicProduct.remove();
}
if(location.href.indexOf('configid=') + 1) {
showCPB();
}
document.addEventListener('click',function(e){
if(e.target.classList.contains('personalize-it--js')) {
e.preventDefault(); 
showCPB(); 
}
});
})();
</script>

If in your theme the product section is called differently than "product-template" like in the example, please replace the code highlighted in blue with correct for your theme section name. 

Now the basic product page should be opened and the CPB product is loaded in the background.

We only need to remove some elements from the page (like add to cart button) and add our personalize it button.

To do so, open the product section file, in the example it's product-template.liquid section.

We need to find the place where we want to put our new button.

Some themes have it inside of the file, some might have included/rendered other files.

In my case there's a file {%- render 'product-form' -%} inside that contains product quantity and add to cart buttons which I want to replace. Place the next code there:

{% if product.type == 'cpb_product' %}

<a class="btn btn_personalize personalize-it--js" href="#">PERSONALIZE IT!</a>

{% else %}
{% comment %}Put here everything you want to hide when the personalize it button is shown{% endcomment %}


{% endif %}

And the last step is to add some styles to our new button if needed in the file customproductbuilder.css

.btn_personalize {
background-color: #FFC423;
border-radius: 0;
padding: 15px 20px;
}

2. Shopify 2.0 Themes

Please, check this article first. If it doesn't work, do the steps below or contact our support. 

1. In your theme files find the file "product.json", it should be in the "Templates" folder.

2. In this file you need to find a block of code with the "main" tag and the "type" tag in it. It will look similar to this:

3. Look at the value of the "type" tag, in this example, the value is "main-product". Please copy this value without the quotes and paste it into the search field to find a corresponding file.

4. In this file you need to find a line "{% schema %}", you may need to scroll down more than half of the file.

5. Nearly under that line, it should be the "class" tag with a value (in this case "section"). You need to add "cpb-basic-product" to this value like in the screenshot above and save the file.

After these steps go to your online store and check if the 'Personalize button' mode works correctly. If not, please, contact our support to solve the issue.