Show SKU on product preview - Dawn Theme

[jaimeebrooks]

Hi there,

I am using the Dawn theme and would like to customise the product preview cards to also show the SKU. See example below

https://uv-water-systems.myshopify.com/

PW: meedee

[LuffyOnePiece]

Hi @jaimeebrooks ,

Go to the customization and add the SKU from the Product information block.

Please don’t hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[Kyle_liu]

When a product is on sale, the SKU and the price may not necessarily be on the same line.

[jaimeebrooks]

Hey @LuffyOnePiece thanks so much for your response.

What I am looking for is to add the SKU to the product preview card that appears on the collection page, not the product page (I have already set this up to show the SKU).

Does this make sense? Hope you can help!

Thanks

Jaimee

[EBOOST]

Hi @jaimeebrooks ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. Add code below to end of file

.product__info-container .product__sku {
	float: right;
  	margin: 0!important;
}

[jaimeebrooks]

Hi @EBOOST I really appreciate the suggestion, but I am not looking to do this on the product page, I am looking to add the SKU to the product preview card that appears on collection pages / collection sections.

I would like the SKU to appear where the red boxes are in the example below. Any ideas on how I could do this?

Thanks so much!!

[Kyle_liu]

1、Edit code:

2、Search the file: price.liquid and edit it. Add two lines of code:
Line 34: assign sku=product.selected_or_first_available_variant.sku
Line 128:{{sku}}

3、Search the file: “component-price.css” and edit it，

Add the following code at the end of the document:
.price_sku{
Float: right;
Margin: 0! Important;
Border: 2px solid;
Padding: 0 5px;
Background color: red;
}

4、The display effect is shown in the figure below

[EBOOST]

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Snippets/card-product.liquid

3. find “{% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}”

4. replace with code below:

            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {{ card_product.selected_or_first_available_variant.sku }}
          

[jaimeebrooks]

Thank you @EBOOST that worked on the products pages! You are a lifesaver

A couple of additional things:

• The code didn’t work for the featured collection on the homepage however, is there something else I need to update?

  

• Is there a way to style the SKU text so it sits in a smaller font sitting above the name, under the product image? See mobile example below which is cluttered:

  • 

Thank you in advance!!

Thank you!!!

[EBOOST]

Hi @jaimeebrooks ,

could you check sections/featured-collection.liquid file? If the name is different. You can go to that file to update.

If you can’t check the file name. could you please provide content of sections/featured-collection.liquid and Snippets/card-product.liquid file? I will guide you to update.

[Josh_01]

Hi!

How are you?

I need help with custom coding. Are you available?

Thanks

[shakkhoza]

Hi EBOOST, I have tried this but it is not working for me, any suggestions?

[EBOOST]

Hi @shakkhoza ,

Could you share store URL? I will help check it.

[shakkhoza]

Thank you, it is https://www.cotterillcivils.co.uk/

[EBOOST]

Hi,

I saw you are using Dawn theme and products have SKU. However, code above is not show.
I think this code used " product" instead “card_product”. You try code below:

{{ product.selected_or_first_available_variant.sku }}

If it doesn’t work. You can share code of this file Go to Store Online-> theme → edit code → Snippets/card-product.liquid ? Or let me access to your store to check it.

[shakkhoza]

Thanks where would I paste this code into?

[EBOOST]

Hi,

Could your share content of this file? I will help to put code.

[shakkhoza]

{% comment %}
Renders a product card

Accepts:

• product_card_product: {Object} Product Liquid object (optional)
• product_card_collection: {Object} Collection Liquid object (optional)
• media_size: {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)
• add_image_padding: {Boolean} Enables padding on the image to space out the grid
• show_vendor: {Boolean} Show the product vendor. Default: false
• show_image_outline: {Boolean} Show card outline. Default: true (optional)
• show_rating: {Boolean} Show the product rating. Default: false
• hide_add_to_basket: {Boolean} Hide add to basket form Default: false
• hide_stock_information: {Boolean} Hide stock information Default: false

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

{%- if hide_stock_information == blank %}
{%- assign hide_stock_information = false -%}
{%- endif -%}

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

{%- if product_card_collection -%} {%- assign product_card_href = product_card_product.url | within: product_card_collection | default: '#' %} {%- else -%} {%- assign product_card_href = product_card_product.url | default: '#' -%} {%- endif -%} {{ product_card_product.title | escape }}

{%- if product_card_product.featured_media -%} {%- liquid assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class=“card__media-full-spacer”{% endif %}>

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: ‘1066x’ }} 1066w{%- endif -%}”
src=“{{ product_card_product.media[1] | img_url: ‘533x’ }}”
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=“{{ product_card_product.media[1].alt | escape }}”
loading=“lazy”
class=“motion-reduce”
width=“{{ product_card_product.media[1].width }}”
height=“{{ product_card_product.media[1].height }}”

{%- endif -%}

{%- else -%}

{{ product_card_product.title }}

{%- endif -%}

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

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

{{ product_card_product.vendor }}

{%- endif -%}

{%- if product_card_product.featured_media -%}

{{ product_card_product.title | escape }}

{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
{{ block.settings.description | escape }}
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_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
%}

{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}

({{ product_card_product.metafields.reviews.rating_count }}) {{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{%- assign product_tags_string = product_card_product.tags | join: ', ' -%} {%- if product_tags_string contains 'Enquiry' -%} {{ 'Request a quote' }} {%- else -%} {%- render 'price', product: product_card_product, price_class: '' -%} {%- endif -%} {%- if hide_stock_information == false -%} {% unless product_card_product.metafields.my_fields.stock_information == blank %} {{- product_card_product.metafields.my_fields.stock_information -}} {% endunless %} {%- endif -%}

{%- if hide_add_to_basket == false -%} {%- unless product_tags_string contains 'Enquiry' -%} {{ 'products.product.quantity.decrease' | t: product: product.title | escape }} {% render 'icon-minus' %} {{ 'products.product.quantity.increase' | t: product: product.title | escape }} {% render 'icon-plus' %} {%- endunless -%} {%- endif -%}

{{ ‘products.product.view_details’ | t }}

Thank you

[EBOOST]

Hi,

You can use code below:

{% comment %}
  Renders a product card

  Accepts:
  - product_card_product: {Object} Product Liquid object (optional)
  - product_card_collection: {Object} Collection Liquid object (optional)
  - media_size: {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)
  - add_image_padding: {Boolean} Enables padding on the image to space out the grid
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_image_outline: {Boolean} Show card outline. Default: true (optional)
  - show_rating: {Boolean} Show the product rating. Default: false
  - hide_add_to_basket: {Boolean} Hide add to basket form Default: false
  - hide_stock_information: {Boolean} Hide stock information Default: false

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

{%- if hide_stock_information == blank %}
  {%- assign hide_stock_information = false -%}
{%- endif -%}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

  {%- if product_card_collection -%}
    {%- assign product_card_href = product_card_product.url | within: product_card_collection | default: '#' %}
  {%- else -%}
    {%- assign product_card_href = product_card_product.url | default: '#' -%}
  {%- endif -%}

  
    {{ product_card_product.title | escape }}

    

      

        {%- if product_card_product.featured_media -%}
          {%- liquid
            assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

            if product_card_product.featured_media.aspect_ratio == null
              assign featured_media_aspect_ratio = 1
            endif
          -%}

          

            

              

              {%- if product_card_product.media[1] != null and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- else -%}
          
            ## {{ product_card_product.title }}
          

        {%- endif -%}

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

      

    

    
      

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

        {%- endif -%}

        {%- if product_card_product.featured_media -%}
          
            {{ product_card_product.title | escape }}
          
        {%- endif -%}

        {% comment %} TODO: metafield {% endcomment %}
        {{ block.settings.description | escape }}
        {%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
          {% liquid
            assign rating_decimal = 0
            assign decimal = product_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
          %}
          

            
          

          

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

          

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

        {%- endif -%}
        

        {%- assign product_tags_string = product_card_product.tags | join: ', ' -%}
        
        {%- if product_tags_string contains 'Enquiry' -%}
          {{ 'Request a quote' }}
        {%- else -%}
          {%- render 'price', product: product_card_product, price_class: '' -%}
        {%- endif -%}
        {{ product_card_product.selected_or_first_available_variant.sku }}
        

        {%- if hide_stock_information == false -%}
          {% unless product_card_product.metafields.my_fields.stock_information == blank %}
            
              {{- product_card_product.metafields.my_fields.stock_information -}}
            
          {% endunless %}
        {%- endif -%}
      

    

  
  {%- if hide_add_to_basket == false -%}
    {%- unless product_tags_string contains 'Enquiry' -%}
      
    {%- endunless -%}
  {%- endif -%}

  
    {{- 'products.product.view_details' | t -}}