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 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
