How to add color swatches on colection page in Dawn theme

Technical Q&A
1

{% capture option_titles %}Color,color,Colour,colour{% endcapture %}

{% assign option_titles = option_titles | split:‘,’ %}
{% for option in product.options %}
{% if option_titles contains option %}
{% capture option_index %}option{{ forloop.index }}{% endcapture %}
{% assign option_values = product.variants | map: option_index | uniq %}
{% if option_values.size != 1 %}
{% for opt in option_values %}

{% endfor %} {% endif %} {% endif %} {% endfor %} .option_circles { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; border:1px solid #ccc; }
2

Hi,

Where do you ad this code? the collections.liquid? Where in the liquid do you place the code?

1 Like
3

Please add the complete details where to add the code?

4

Where is this code added in Dawn 9.o theme?

5

@Steve_Klein kindly add this code in card-product.liquid

6

ok, thanks so where in my card-product.liquid code would this be placed?

{% comment %}
Renders a product card

Accepts:

  • card_product: {Object} Product Liquid object (optional)
  • media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  • show_vendor: {Boolean} Show the product vendor. Default: false
  • show_rating: {Boolean} Show the product rating. Default: false
  • extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  • lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  • show_quick_add: {Boolean} Show the quick add button.
  • section_id: {String} The ID of the section that contains this card.
  • horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false (optional)
  • horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {{ card_product.featured_media.alt | escape }} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}
{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }}) {{- card_product.metafields.reviews.rating_count }} {{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}
{%- liquid assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if card_product.variants.size > 1 or qty_rules -%} {{ 'products.product.choose_options' | t }} {%- if horizontal_quick_add -%} {% render 'icon-arrow' %} {%- endif -%}
{% render 'icon-close' %}
{%- else -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }} {%- if horizontal_quick_add -%} {% render 'icon-plus' %} {%- endif -%}
{%- endform -%} {%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}
{%- else -%}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price' %}
{%- endif -%}