Minimum Theme Requirements

For Shopify merchants integrating Purple Dot into Shopify Themes built with Liquid, the theme must meet the 3 criteria below.

If you need help, please contact support.

Requirements

1. Add to Cart Button with type="submit" (inside <form>)

Any button that is used to add products to the cart should have the type attribute set to submit and should also be inside the <form> HTML element.

<button type="submit">Add to Cart</button>

2. Form Element with action="/cart/add"

Each of these buttons must be wrapped in a <form> element, with the action attribute set to /cart/add.

<form action="/cart/add" method="post">
    <!-- Your Product form content goes here -->
</form>

3. Variant selectors

Within the form, there should be an input or select element with the name attribute set to id. The value of this input element must be updated dynamically based on the current variant selected in the form. This ensures that Purple Dot can correctly identify the selected product variant.

<input type="hidden" name="id" value="{{ variant.id }}"/>

Additional requirement for a select based implementation is that only the option of the variant the shopper had actually selected is selected.

<select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
      <option
        {% if product.selected_variant.id == variant.id %}
          selected
        {% endif %}
        value="{{ variant.id }}">
        <...>
      </option>
    {% else %}
        <option 
          {% if product.selected_variant.id == variant.id %}
            selected
          {% endif %}
          disabled="disabled"
          value="{{ variant.id }}">
          <...>
        </option>
    {% endif %}
  {% endfor %}
</select>

Test your PDP

Run this code in your console, when on a merchants PDP:

const form = document.querySelector('form[action*="/cart/add"]');
const variantID = form?.querySelector('[name="id"]');
const button = form?.querySelector('button[type="submit"]');

console.log('form should exist -->', !!form);
console.log('form should contain an element identifying the product variant -->', !!variantID);
console.log('form should contain a submit button -->', !!button);