Shopify themes, liquid, logos, and UX
I have a variant that is required for third-party app (printify) but it is not needed to be displayed for my store as it's the only single variant available. How do I update the Spotlight theme to hide a variant with only 1 option? I have seen answers for the Dawn theme but this doesn't correlate fully with the Spotlight theme.
Thanks in advance
Hello @BlackT
Can you please share the store URL and password so i can check and find the solution for your issue...
all you want is to hide variant selector if there is only single variant or default variant, am i right ?
Can you just DM me so we can discuss more about it ?
Hey bro, i got the solution for your issue...
Great. Is it complicated? I can't see a DM option.
a little bit complicated.
But you only need to follow below steps:
1. Go to admin > Online Store > Edit code.
2. In the code directory, find the file named "product-variant-picker.liquid" in snippets.
3. Copy the below code and replace it with the current code.
{% comment %}
Renders product variant-picker
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} Id of the product form to which the variant picker is associated.
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- unless product.has_only_default_variant -%}
<variant-selects
id="variant-selects-{{ section.id }}"
data-section="{{ section.id }}"
{{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
{%- liquid
assign swatch_count = option.values | map: 'swatch' | compact | size
assign picker_type = block.settings.picker_type
if swatch_count > 0 and block.settings.swatch_shape != 'none'
if block.settings.picker_type == 'dropdown'
assign picker_type = 'swatch_dropdown'
else
assign picker_type = 'swatch'
endif
endif
-%}
{%- if picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">
{{ option.name }}:
<span data-selected-value>
{{- option.selected_value -}}
</span>
</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
{%- elsif picker_type == 'button' -%}
<fieldset class="js product-form__input product-form__input--pill">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
{%- else -%}
{%- for value in option.values -%}
{% assign variant_size = option.values %}
{% endfor %}
<div class="product-form__input product-form__input--dropdown {% if variant_size.size <= 1 %}{% endif %}">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
{%- if picker_type == 'swatch_dropdown' -%}
<span
data-selected-value
class="dropdown-swatch"
>
{% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
</span>
{%- endif -%}
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endif -%}
{%- endfor -%}
<script type="application/json" data-selected-variant>{{ product.selected_or_first_available_variant | json }}</script>
</variant-selects>
{%- endunless -%}
4. Don't forget to save the file after changes.
Hope this solution works best for your issue.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Best Regards
Parth ghelani
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025