How to display color swatches for each product on the page of all products in Shopify
How to display color swatches for each product on the page of all products in Shopify
I have a block on the main page where I display all the products I need to make sure that colors swatches and size options are displayed for each product. Can this be done standardly without plugins? I displayed it as on the product page using product-variant-picker, but now I have an error in the console on my page, as I understand it, this option is not intended for multiple output on one page
//variant picker
{%- unless product.has_only_default_variant -%}
<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 %}
>
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
{% render 'custom-product-variant-options', product: product, option: option %}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- endunless -%}
//product card
<li>
....
<div class="variants-picker__list">
{% render 'product-variant-picker', product: product, product_form_id: product_form_id %}
</div>
<li>
Run code snippetExpand snippet
An example of how it should be
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)•Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand