Dawn theme - wanting to add "More colours" text under product name

Technical Q&A
1

I want to add the words “More Colors” underneath the product title, but only when that specific product actually has more colors available. I spoke with Shopify support and they advised advanced coding is needed as this is not available for Dawn theme just yet. Can anyone assist here? I don’t want it for all my products as not all have more than 1 colour available to purchase. I hope that makes sense :slightly_smiling_face:

2

As Shopify support told, this will need coding. I don’t know how much advanced it is since I am not sure what exactly you need. I mean do you just need the text or you need that text to do something.

If you have different color variants you can set up color swatches or image swatches for those colours. See reference site below.

Reference site: www.kpsclothing.in

Please reach out via mail for a convenient conversation and solution.

Thanks

3

Hi there,

I just need the text there, however by doing the coding myself and through Shopify support, it adds that text for ALL products, but not all products have different colour variants. In relation to the swatches, I do have the variants already set up, but my main image for a particular product is just in 1 colour and don’t want that to deter customers, so they know there is more than 1 colour available :slightly_smiling_face:

Any help here would be appreciated

4

Okay, please share the store url and the place you need to show the text and if you have some specific style needs

Thanks

5

Pic1
Pic11920×890 93.7 KB

Pic2
Pic21920×890 85.9 KB

Hi there,

Please see below:

https://www.khamora.com.au/

Pic 1: where I want it to sit ideally but can also sit like Pic 2, I am not too fussed on where or how it sits, like pic 2 works, but if I am being picky, the text size of that can be smaller. However, the main thing is I want it not for all products, only for ones that have multiple colours.

Thank you :slightly_smiling_face:

6

Here you go. So open your card-product.liquid file and if you haven’t made any changes to it yet then please replace all the code with this. Please always make sure to take a backup of your theme just in case. Hope this works. Also i am assuming, i haven’t checked every product but from one or two products i guess you just have color option available so no size, weight, etc.

{% 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)
  • image_shape: {String} Image mask to apply to the product image card. Values are “arch”, “blob”, “chevronleft”, “chevronright”, “diamond”, “parallelogram”, and “round”. (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)
  • skip_styles: {Boolean} Don’t include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
  • 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)
  • placeholder_image: {String} The placeholder image to use when no product exists. Default: ‘product-apparel-2’ (optional)

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- unless skip_styles -%}
{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{{ ‘component-volume-pricing.css’ | asset_url | stylesheet_tag }}

{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘quick-order-list.css’ | asset_url | stylesheet_tag }}
{{ ‘quantity-popover.css’ | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- 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: ‘’, show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{% if card_product.variants.size == 1 and quick_add == ‘bulk’ %}
{% liquid
assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
assign has_qty_rules = false
if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
assign has_qty_rules = true
endif
%}


{{ ‘products.product.volume_pricing.note’ | t }}


{{ ‘products.product.volume_pricing.note’ | t }}

{% else %}

{{ 'products.product.volume_pricing.note' | t }}
{% endif %} {% if card_product.variants.size == 1 and quick_add == 'bulk' %}
{%- if has_qty_rules -%}
{%- if quantity_rule.increment > 1 -%} {{- 'products.product.quantity.multiples_of' | t: quantity: quantity_rule.increment -}} {%- endif -%} {%- if quantity_rule.min > 1 -%} {{- 'products.product.quantity.min_of' | t: quantity: quantity_rule.min -}} {%- endif -%} {%- if quantity_rule.max != null -%} {{- 'products.product.quantity.max_of' | t: quantity: quantity_rule.max -}} {%- endif -%}
{%- endif -%} {{- 'icon-close.svg' | inline_asset_content -}} {%- if card_product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
  • {{ card_product.selected_or_first_available_variant.quantity_rule.min }}+ {%- assign price = card_product.selected_or_first_available_variant.price | money_with_currency -%} {{ 'sections.quick_order_list.each' | t: money: price }}
    • {%- for price_break in card_product.selected_or_first_available_variant.quantity_price_breaks -%}
  • {{- price_break.minimum_quantity -}} + {%- assign price = price_break.price | money_with_currency -%} {{ 'sections.quick_order_list.each' | t: money: price }}
    • {%- endfor -%}
{%- endif -%}
{% endif %} {%- endif -%} {% if card_product.variants.size>1 %} More Colours {% endif %}
{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %} {% if quick_add == 'standard' %}
{%- liquid 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 -%} {{- 'icon-arrow.svg' | inline_asset_content -}} {%- endif -%} {%- render 'loading-spinner' -%}
{{- 'icon-close.svg' | inline_asset_content -}}
{%- 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 -%} {{- 'icon-plus.svg' | inline_asset_content -}} {%- endif -%} {%- render 'loading-spinner' -%} {%- endform -%} {%- endif -%}
{% elsif quick_add == 'bulk' %} {% if card_product.variants.size == 1 %} {% if card_product.selected_or_first_available_variant.available == false %} {{ 'products.product.sold_out' | t }} {{ 'products.product.sold_out' | t }} {% else %} {% render 'quantity-input', variant: card_product.selected_or_first_available_variant, min: 0 %} {% endif %} {% else %}
{%- 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 -%} {{ 'products.product.choose_options' | t }} {%- render 'loading-spinner' -%}
{{- 'icon-close.svg' | inline_asset_content -}}
{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {{ card_product.featured_media.alt | escape }} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- endif -%} {{ 'products.product.view_full_details' | t -}} {{- 'icon-arrow.svg' | inline_asset_content -}}

{{ card_product.title | escape }}

 {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}
{{ 'products.product.volume_pricing.note' | t }}
{%- endif -%}

{{ card_product.title | escape }}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}
{{ 'products.product.volume_pricing.note' | t }}
{%- endif -%}
{% 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 -%} {%- liquid assign ratio = 1 assign placeholder = true if media_aspect_ratio == 'portrait' assign ratio = 0.8 endif -%}
{%- if placeholder_image -%} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price', placeholder: placeholder, show_compare_at_price: true %}
{%- endif -%}
7

Hi there,

I don’t see “card-product.liquid” here on the left hand side of the coding categories, can you direct me to where I can find it or what the equivalent would be in my theme? Thank you :slightly_smiling_face:

8

You are using the dawn theme right? Dawn theme should have this snippet file.

9

Hi there,

I am so sorry I thought I was on the Dawn Theme, but looks like I am using Clarity theme - is there a way around it for that theme? Thanks :slightly_smiling_face:

10

Ofcourse there is and the implementation is pretty much the same but obviously the file name and it’s layout will be slight different as different themes have different code structure.

And since you are using a paid theme I will need collaborator access to your store since I am on a development store and dev store does not allow to edit paid themes.

Please reach out via mail for a convenient conversation and solution.

Thanks

Shadab Ali

11

Hi there,

Thank you for that :slightly_smiling_face: I am pretty certain Clarity is one of the free themes I had the option of selecting, however, please walk me through steps on how to allow access for you as collaborator if that is the only option here and we can go from there. Thanks

12

You can get the collaborator access code from under settings ----> users and permissions. You will see a 4 digit code using which I can send request which you can later accept. You will also have the ability to choose what access to give me.

I will also recheck may be Shopify added this under the list of free themes.

Thanks

13

Apologies for my late response - please see code - 7554

14

Have requested access.

15

Thank you have accepted, if you need specific access to something pls let me know I have provided access to change code :slightly_smiling_face:

16

I Wont need it at least not anymore since i am pretty much done. If you now see your live site it will have a more colours text under products which have a color option and more than 1 color option.

I would definitely suggest you something which would make your site much better looking and convertible is to add swatches on the collection grid as well just as you have it on the product page. This will give your site a much better look and make your site more engaging. Please check the reference site below.

Reference Site: www.kpsclothing.in

Also let me know if you need any changes on the text. and i took the second option for display this looks better in my opinion unless you want it otherwise.

Thanks
Shadab

17

Hi there thank you for your assistance thus far, however, the “More Colours” is only visible on one product, but I do have more products which have more than 1 colour variant. I like the text but is there any way to not make it bold? thank you

Also I am not sure how to add swatches to the collection grid as that would be ideal and I wouldn’t need the “More Colours” text but I am not sure how to add it, so any guidance would be appreciated

Thank you

18

It may have more products but i believe they aren’t live yet, I mean they are not active but in draft state as in the all collections i can see only 14 products in total. If you set the products to active the code will take effect on products with more than two colour variants.

And as for the swatches you must have the reference. I was able to implement that and that was one of clients store. So I can pretty much do that for you but as you might have guessed it comes with a price.

If you are willing to do the colour swatches fine if not then please set your products to active and check if my code takes effect or not.

Best

19

Hi there, 9 out of 14 products, have more than 1 colour variant, so that should have showed up for all 9, as they are all active and ready to go. Thanks

20

Alright then let me take a look and update it accordingly.