Get a product Variant to be separate from other product variants
Hi Shopify Community,
I need help with a product page customisation I can't seem to figure out. Essentially, I have set up my product page with the following structure shown below, with the material and finish variants together in one section, (with a material / finish details dropdown description), and a separate section for the ring size, (with a ring size chart dropdown).
The way I have achieved this setup, is by having only 2 product variants, (Material, Finish), and then having the Ring Size (US / EU) added using a theme element called a "Line Item Property" which allows you to create a dropdown menu using a product metafield.
The problem I have is that I need this ring size option to be a product variant and not a product metafield dropdown, so that I can have stock tracked and displayed on the product page for each individual ring size.
Is there a way to split up the <variant-selects> element, so that when a variant name is equal to "Ring Size (US/EU)" it is placed in a different location on the page. The code for the product variants are below.
<variant-selects
class="variant-picker grid gap-5 no-js-hidden"
form="{{ product_form_id }}"
data-section="{{ section_id }}"
data-url="{{ product.url }}"
{%- if update_url == false %} data-update-url="false"{% endif -%}
{{ block.shopify_attributes }}
>
{%- for option in product.options_with_values -%}
{%- liquid
assign is_size = false
if block.settings.size_chart != blank
assign size_trigger = 'products.general.size_trigger' | t | downcase
assign downcased_option = option.name | downcase
if downcased_option contains size_trigger
assign is_size = true
endif
endif
-%}
<div class="product-form__input product-form__input--dropdown variant-input-wrapper"
data-option-index="option{{ forloop.index }}"
data-option-slug="{{ option.name | handleize }}"
>
<div class="form__label flex items-center justify-between gap-2 w-full">
{%- if block.settings.show_variant_labels -%}
<label class="flex gap-2" for="Option-{{ section_id }}-{{ forloop.index0 }}">
{{- option.name -}}
</label>
{%- endif -%}
{%- if is_size -%}
<div class="flex items-center gap-2">
{%- render 'icon', icon: 'ruler', size: 'xs', class: 'stroke-1' -%}
<button type="button" class="link text-sm leading-tight cursor-pointer" aria-controls="SizeChart-{{ section_id }}" aria-expanded="false">
{{- 'products.general.size_chart' | t -}}
</button>
<x-modal id="SizeChart-{{ section_id }}" class="x-modal drawer z-30 fixed bottom-0 left-0 h-full w-full pointer-events-none"
role="dialog"
aria-modal="true"
aria-label="{{ block.settings.size_chart.title | escape }}"
hidden
>
<overlay-element class="overlay fixed-modal invisible opacity-0 fixed bottom-0 left-0 w-full h-screen pointer-events-none" aria-controls="SizeChart-{{ section_id }}" aria-expanded="false"></overlay-element>
<div class="drawer__inner z-10 absolute top-0 flex flex-col w-full h-full overflow-hidden">
<gesture-element class="drawer__header flex items-center justify-between opacity-0 invisible relative">
<span class="drawer__title heading title-md">{{ block.settings.size_chart.title | escape }}</span>
<button class="button button--secondary button--close drawer__close hidden sm:flex items-center justify-center" type="button" is="hover-button" aria-controls="SizeChart-{{ section_id }}" aria-expanded="false" aria-label="{{ 'general.accessibility.close' | t | escape }}">
<span class="btn-fill" data-fill></span>
<span class="btn-text">
{%- render 'icon', icon: 'close', size: 'sm' -%}
</span>
</button>
</gesture-element>
<div class="drawer__content opacity-0 invisible flex flex-col h-full grow shrink">
<div class="drawer__scrollable relative flex flex-col gap-5 md:gap-7 grow shrink">
<div class="rte text-base md:text-lg">{{ block.settings.size_chart.content }}</div>
</div>
</div>
</div>
</x-modal>
</div>
{%- endif -%}
</div>
<div class="field">
<select id="Option-{{ section_id }}-{{ forloop.index0 }}"
class="select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
is="custom-select"
>
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{%- render 'icon', icon: 'chevron-up', size: 'sm', class: 'absolute' -%}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
Looking into the code, each variant has a unique variable called "data-option-slug", which is equal to the variants name.
Please let me know if there is an easy fix for this problem. I greatly appreciate the support and generosity in advance.
Kind Regards,
Nicolas
Hi Gr_trading,
Thanks for the response. The issue I have is that I need the Ring Size to be a product variant, however I don't know how to implement this while maintaining my current product page setup, (having the material / finish description underneath the material and finish variants, and then having in a separate block to these, the ring size variant with the ring size chart below). Like the image below.
The issue is that I am not competent enough in html, or JavaScript to figure out how to resolve this issue, as the code is complicated due to the variants being unique for each product and are obtained using a for-loop. I would have to either create divs and add the dropdowns inside the for-loop for each (not a clue how to do this), or figure out how to change the location of the ring-size variants position on the page. Like I said above, these variants have a unique "data-option-slug" which should be able to be used to target a specific variant.
Hope this explains everything.
Kind Regards,
Nicolas
Community Blog Articles
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024