Advanced Theme Integration
If our automated install didn't work on your theme you can use the manual instructions below:
Product Liquid - This replaces "Add to Cart" button with "Customize this Product" button.
Find your add to cart button. This is most often in product-form.liquid or product-template.liquid
It will look something like this:
<button type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %} {% if product.available == false %}disabled{% endif %}" data-label={{ add_to_cart_label | json }}>
<span class="text">
{% if product.available %}{{ add_to_cart_label }}{% else %}{{ settings.sold_out_text }}{% endif %}
</span>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
<path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
</svg>
</button>
We are adding this before the button:
{% if product.type == 'Bare Product' %}
<a href="/pages/customize?product_id={{ product.id }}" class="action_button add_to_cart">Customize this Product</a>
{% elsif product.type == 'Custom Product' %}
<a href="/pages/customize?product_id={{ product.id }}" class="action_button add_to_cart">Customize this Product</a>
{% else %}
and this after the button:
{% endif %}
This is what it looks like on Turbo theme after changes have been applied:
{% if product.type == 'Bare Product' %}
<a href="/pages/customize?product_id={{ product.id }}" class="action_button add_to_cart">Customize this Product</a>
{% elsif product.type == 'Custom Product' %}
<a href="/pages/customize?product_id={{ product.id }}" class="action_button add_to_cart">Customize this Product</a>
{% else %}
<button type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %} {% if product.available == false %}disabled{% endif %}" data-label={{ add_to_cart_label | json }}>
<span class="text">
{% if product.available %}{{ add_to_cart_label }}{% else %}{{ settings.sold_out_text }}{% endif %}
</span>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
<path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
</svg>
</button>
{% endif %}
To hide Quantity box and buy now buttons you can add this code:
{% if product.type == 'Bare Product' %}
{% elsif product.type == 'Custom Product' %}
{% else %}
<THE CODE YOU ARE HIDING>
{% endif %}
For example, on Turbo to hide the Payment button the code looks like this:
{% if product.type == 'Bare Product' %}
{% elsif product.type == 'Custom Product' %}
{% else %}
{% if show_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endif %}