Product Page Integration

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