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