Use Your Products As Variants - Free Tutorial

Do you want to connect multiple products together like they are variants?

Well that’s what we needed to do with one of the Shopify apparel stores we’re managing.

By using AI to automate, they’ve been able to push their volume and grow their design and product catalog, but many of the designs are printed on different products. Without linking them together, customers wouldn’t even know they have the option to get that design on a hoodie instead of a t-shirt.

What I’m going to show you in this tutorial is what the problem this store had and how we made a quick customization to solve it, so that you can do it for your store too.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

 

Product Preparation

This code links variants together using the “Product Type” in the products page and a custom metafield and metaobject (details below).

Set the product types appropriately on your product page. You may use any Product Type you wish.

Create snippet product-style-picker-custom.liquid with this custom code

NOTE: If you want to set the variants to a particular order, remove the comment blocks and modify the line: {% assign desired_order = "T-Shirt,V-Neck,Long Sleeves,Sweatshirt,Hoodie,Tank Top,Tumbler" | split: "," %} with your own product types, in the order you want. Note: they must match exactly with the Product Types in your products

Full Snippet:

{% comment %}
  Renders product style picker based on related products

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the style picker is associated.
  Usage:
  {% render 'product-style-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}

{%- if product.metafields.custom.design_group -%}
  {% assign related_products_metaobject = product.metafields.custom.design_group.value %}
  {% assign related_products = related_products_metaobject.product_grouping.value %}

  {%- if block.settings.picker_type == 'button' -%}
    <!-- Styles as radio buttons -->
    {% comment %}{% assign desired_order = "T-Shirt,V-Neck,Long Sleeves,Sweatshirt,Hoodie,Tank Top,Tumbler" | split: "," %}{% endcomment %}
    
    <form id="styleForm" action="#" method="GET">
        <label for="ProductSelect-Style" class="form__label">Style</label>
        <fieldset class="js product-form__input">
            {% for type in desired_order %}
                {% assign related_product = related_products | where: "type", type | first %}
                {% if related_product %}
                    <input 
                        type="radio" 
                        id="related_product-{{ related_product.id }}" 
                        name="related_product" 
                        value="{{ related_product.url }}"
                        {% if product.handle == related_product.handle %}checked{% endif %}
                        onchange="document.getElementById('styleForm').action=this.value; document.getElementById('styleForm').submit();"
                    >
                    <label for="related_product-{{ related_product.id }}">{{ related_product.type }}</label>
                {% endif %}
            {% endfor %}
        </fieldset>
        <script type="application/json">
            {{ related_products | json }}
        </script>
    </form>

  {%- else -%}
    <!-- Styles as dropdown -->
    <form id="styleForm">
      <div class="product-form__input product-form__input--dropdown">
        <label for="ProductSelect-Style" class="form__label">Style</label>
        <div class="select">
          <select 
            id="ProductSelect-Style" 
            class="select__select" 
            onchange="document.getElementById('styleForm').action=this.value; document.getElementById('styleForm').submit();"
            >
            {% for related_product in related_products %}
              <option value="{{ related_product.url }}" {% if product.handle == related_product.handle %}selected{% endif %}>
                {{ related_product.type }}
              </option>
            {% endfor %}
          </select>
          {% render 'icon-caret' %}
        </div>
      </div>
    </form>
  {%- endif -%}
{%- endif -%}

Render the above variant style liquid file in main-product.liquid

Find the following code in main-product.liquid

{%- when 'variant_picker' -%}
    {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}

and place this code beneath it

	{% if product.metafields.custom.design_group %}
	  {% render 'product-style-picker-custom', product: product, block: block, product_form_id: product_form_id %}
	{% endif %}

Create metaobject related_product with fields

• Important: the handle for the metaobject must be “related_product” because it is hard-coded in the snippet.
• Design Group: contains the name of the design to be grouped together
  • Important: the handle for this field must be “design_group” because it is hard-coded in the snippet.
• Product Grouping: the list of products that are combined together
  • Important: the handle for this field must be “product_grouping” because it is hard-coded in the snippet.

Create metafield design_group

• Create a metafield with type related_product

Create Metaobject content

• In Shopify admin, go to Content—>Add Entry—>select metaobject (related_product)
• Create an entry for a new design, giving it a name and selecting the list of products to group

Update Products

• For all the grouped products, update their design_group metafield with the appropriate metaboject content that was created