Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
hey have two products which i have assigned in my block settings i want to know how i can change the variable
value of the assigned product from one two another based on radio clicks.
{%- assign product = block.settings.featured_product | default: product | default: collections['all'].products.first -%}
in above i want to toggle block.settings.featured_product and block.settings.featured_product-2 based on below radio checks
<div>
<label>
<input type="radio" name="featured_product_toggle" value="1" checked>
{{ block.settings.featured_product.title }}
</label>
<label>
<input type="radio" name="featured_product_toggle" value="2">
{{ block.settings.featured_product-2.title }}
</label>
</div>
how i can do that
To toggle between block.settings.featured_product and block.settings.featured_product-2 based on radio clicks in Liquid, use the following approach:
HTML:
<div>
<label>
<input type="radio" name="featured_product_toggle" value="1" checked>
{{ block.settings.featured_product.title }}
</label>
<label>
<input type="radio" name="featured_product_toggle" value="2">
{{ block.settings.featured_product-2.title }}
</label>
</div>
<div id="product-container">
<div class="product-title">{{ block.settings.featured_product.title }}</div>
<div class="product-description">{{ block.settings.featured_product.description }}</div>
</div>
<div id="product-1" style="display: none;">
<div class="product-title">{{ block.settings.featured_product.title }}</div>
<div class="product-description">{{ block.settings.featured_product.description }}</div>
</div>
<div id="product-2" style="display: none;">
<div class="product-title">{{ block.settings.featured_product-2.title }}</div>
<div class="product-description">{{ block.settings.featured_product-2.description }}</div>
</div>
This code allows you to toggle the displayed product information based on the selected radio button.
I guess you misunderstood i want to change the value of this liquid variable {%- assign product = block.settings.featured_product | default: product | default: collections['all'].products.first -%} based on input select as it will change the assigned product to my featured product
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025