# 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](mailto:support@getpupledot.com). 

### Requirements

#### [1. Add to Cart Button with type="submit" (inside \<form>)](#1.-add-to-cart-button-with-type-submit-inside-less-than-form-greater-than)

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.

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

#### [2. Form Element with action="/cart/add"](#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`.

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

#### [3. Variant selectors](#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.

```html
<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`.

```html
<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:

```javascript
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);
```