Color swatches on featured collection products in dawn theme

Store Design
1

hi i want to show the swatches images on products of collection page
here is the code for featured collection

    {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
  • {% render 'cus-card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, show_quick_add: section.settings.enable_quick_add, section_id: section.id %}

    • {%- endfor -%}
    {%- endfor -%}

in the cus-card-product snippet i can do the followings changes for the swatches

<variant-radios class=“no-js-hidden” data-section=“{{ section_id }}” data-url=“{{ card_product.url }}” {{ block.shopify_attributes }}>
{%- for option in card_product.options_with_values -%}


{{ option.name }}
{% if option.name == “Color” or option.name == “Colors” %}

{% if option.selected_value %}
{{ option.selected_value }}
{% endif %}

{% endif %}

{%- for value in option.values -%}
<input class=“{% if option.name == “Color” or option.name == “Colors” %}swatchesRadio{% endif %}”
type=“radio” id=“{{ section_id }}-{{ option.position }}-{{ forloop.index0 }}”
name=“{{ option.name }}”
value=“{{ value | escape }}”
form=“{{ product_form_id }}”

>
{% assign variant = card_product.selected_or_first_available_variant %}
{% if option.name == “Color” or option.name == “Colors” or option.name == “Letter” %}
{% assign image_url = value | handleize | downcase | append: ‘.png’ | file_url %}
<label class=“jkb1 color-options color-{{ value | handle }}”
for=“{{ section_id }}-{{ option.position }}-{{ forloop.index0 }}”
style=“background: url({{ image_url }});background-color:{{ value | handleize }}; width: 33px; height: 33px; background-size: cover;”>
{{ value }}


{% else %}

{{ value }}


{% endif %}
{%- endfor -%}

{%- endfor -%}


i can bold the swatches code
now the issue is that the instead of showing the image it show the color here is the code where images need to be shown
<label class=“jkb1 color-options color-{{ value | handle }}”
for=“{{ section_id }}-{{ option.position }}-{{ forloop.index0 }}”
style=“background: url({{ image_url }});background-color:{{ value | handleize }}; width: 33px; height: 33px; background-size: cover;”>
{{ value }}

here is the link for practice store :https://arslan-ts335.myshopify.com/products/uwell-caliburn-ak3-pod-vape-device

password is 335

when you open product page scroll down to see the featured collection

1 Like
2

Hi @Jack_Khan_Baba

You actually need someone to write the code for you. This is not just a simple solution

3

well i can solve it by pasting a simple query thanks for your advise

1 Like