Connecting CSS file in 2.0 themes (Dawn and others)

To connect css file to the Custom product builder app, please follow the steps below.

In Sales channels -> Online Store press -> More actions -> Edit code

Under "Sections" create the file customproductbuilder.liquid, and put in the code below:

{% comment %} == BEGIN CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}

{% if product.type == 'cpb_product' %}
{{ 'customproductbuilder.css' | asset_url | stylesheet_tag }}
{{ 'customproductbuilder.js' | asset_url | script_tag }}
{% endif %}

{% comment %} == END CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}

{% schema %}
{
"name": "customproductbuilder",
"settings": [],
"presets": [
{
"name": "customproductbuilder"
}
]
}
{% endschema %}

It should look like this:

Among Assets, you need to generate customproductbuilder.css and customproductbuilder.js files. Custom code should be placed in those files.

Don't forget to press Save on all files.

Exit from the code editor and Press Customize on the theme you are working with.

Open the template of the product you are working with, and on the left side press "Add section". In search type in customproductbuilder. Pull this new section app so it would be next to the Custom Product Builder app section.