Shopify themes, liquid, logos, and UX
Hi community,
I want to hide a specific variant for all of my option. So the name and the option itself should not be visible
The name of the option is "Packung", and it is not alwys in the first position. But the name is always Packung.
Thanks in advance for your suggestions.
Please do not offer any apps, I want to solve it via Code 🙂
V4Y
Solved! Go to the solution
This is an accepted solution.
In case anybody needs this solution, here is the new code from @Dan-From-Ryviu .
Thank you very much!
{% 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.
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
<style>
.product-form__input.Packung { display: none !important; }
</style>
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<variant-radios
id="variant-radios-{{ section.id }}"
class="no-js-hidden"
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 -%}
<fieldset class="js product-form__input {{ option.name }}">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options', product: product, option: option, block: block %}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects
id="variant-selects-{{ section.id }}"
class="no-js-hidden"
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 -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label {{ option.name }}" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select {{ option.name }}">
<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 %}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">
{{- 'products.product.product_variants' | t -}}
</label>
<div class="select">
<select
name="id"
id="Variants-{{ section.id }}"
class="select__select"
form="{{ product_form_id }}"
>
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}
selected="selected"
{% endif %}
{% if variant.available == false %}
disabled
{% endif %}
value="{{ variant.id }}"
>
{%- liquid
echo variant.title
echo variant.price | money | strip_html | prepend: ' - '
if variant.available == false
echo 'products.product.sold_out' | t | prepend: ' - '
endif
if variant.quantity_rule.increment > 1
echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
endif
if variant.quantity_rule.min > 1
echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
endif
if variant.quantity_rule.max != null
echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
endif
# TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
# theme-check-disable
assign cart_quantity = cart | item_count_for_variant: variant.id
# theme-check-enable
if cart_quantity > 0
echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
endif
-%}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
Hi @Vapes4You
Could you share your drop your link here to check?
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi Dan,
Sure the shop is: https://vapes4you.de
The link to the product in the screenshot is: https://vapes4you.de/products/menthol-blaubeere-e-zigaretten-liquid?_pos=1&_psq=menthol-b&_ss=e&_v=1...
Go to your Online store > Themes > Edit code, open product-variant-picker.liquid file, replace code of this file with this one
{% 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.
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<variant-radios
id="variant-radios-{{ section.id }}"
class="no-js-hidden"
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 -%}
{%- unless option.name == "Packung" -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options', product: product, option: option, block: block %}
</fieldset>
{%- endunless -%}
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects
id="variant-selects-{{ section.id }}"
class="no-js-hidden"
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 -%}
{%- unless option.name == "Packung" -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<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 %}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endunless -%}
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">
{{- 'products.product.product_variants' | t -}}
</label>
<div class="select">
<select
name="id"
id="Variants-{{ section.id }}"
class="select__select"
form="{{ product_form_id }}"
>
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}
selected="selected"
{% endif %}
{% if variant.available == false %}
disabled
{% endif %}
value="{{ variant.id }}"
>
{%- liquid
echo variant.title
echo variant.price | money | strip_html | prepend: ' - '
if variant.available == false
echo 'products.product.sold_out' | t | prepend: ' - '
endif
if variant.quantity_rule.increment > 1
echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
endif
if variant.quantity_rule.min > 1
echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
endif
if variant.quantity_rule.max != null
echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
endif
# TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
# theme-check-disable
assign cart_quantity = cart | item_count_for_variant: variant.id
# theme-check-enable
if cart_quantity > 0
echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
endif
-%}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Happy I could help ❤️!
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi, would some edits to this code make it possible to just hide unavailable variants? I'm using Dawn ver 12. I've tried experimenting with it myself but I'm not much of a coder 🙂
Please send me your product page link
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi @Dan-From-Ryviu ,
Unfortunately I had to unmark your post as solution. The variant picker is broken. When I change the variant of the product, the checkout button does not work anymore.
I had to undo the changes in the code and now it works again.
Hi @Vapes4You Could you explain what did you change the variant?
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi,
I have made screenshots of the behavior.
1. Product page (original) Option Stärke 3mg/ml
2. Product page (original) after click on Option Stärke 6mg/ml
3. Product page (after code edit) Option Stärke 3mg/ml
4. Product Page (after code edit) after click on Option Stärke 6mg/ml
The behaviour is the same for every option. Even If go back to option 3mg/ml it always shows me, that the variant is not available and the "add to cart" button is disabled.
Kind regards
Could I access your store so I can duplicate theme and check?
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes, sure
This is an accepted solution.
In case anybody needs this solution, here is the new code from @Dan-From-Ryviu .
Thank you very much!
{% 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.
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
<style>
.product-form__input.Packung { display: none !important; }
</style>
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<variant-radios
id="variant-radios-{{ section.id }}"
class="no-js-hidden"
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 -%}
<fieldset class="js product-form__input {{ option.name }}">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options', product: product, option: option, block: block %}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects
id="variant-selects-{{ section.id }}"
class="no-js-hidden"
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 -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label {{ option.name }}" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select {{ option.name }}">
<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 %}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">
{{- 'products.product.product_variants' | t -}}
</label>
<div class="select">
<select
name="id"
id="Variants-{{ section.id }}"
class="select__select"
form="{{ product_form_id }}"
>
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}
selected="selected"
{% endif %}
{% if variant.available == false %}
disabled
{% endif %}
value="{{ variant.id }}"
>
{%- liquid
echo variant.title
echo variant.price | money | strip_html | prepend: ' - '
if variant.available == false
echo 'products.product.sold_out' | t | prepend: ' - '
endif
if variant.quantity_rule.increment > 1
echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
endif
if variant.quantity_rule.min > 1
echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
endif
if variant.quantity_rule.max != null
echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
endif
# TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
# theme-check-disable
assign cart_quantity = cart | item_count_for_variant: variant.id
# theme-check-enable
if cart_quantity > 0
echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
endif
-%}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
Hi @Dan-From-Ryviu,
is this solution works for Dawn 14.0.0 ? I have the same issue but the code is not working...
best regards,
Julien
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