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.

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