Solved

Show SKU on product preview - Dawn Theme

jaimeebrooks
Shopify Partner
5 0 0

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

 

Screenshot 2024-05-08 at 11.46.28 AM.png

Accepted Solution (1)
EBOOST
Shopify Partner
850 233 262

This is an accepted solution.

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:

<div class="box-price" style="display: flex; justify-content: space-between;">
            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            <span class="sku">{{ card_product.selected_or_first_available_variant.sku }}</span>
          </div>
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Replies 10 (10)

LuffyOnePiece
Shopify Partner
542 79 98

Hi @jaimeebrooks ,

 

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

 

LuffyOnePiece_0-1715138085591.png

 

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

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
jaimeebrooks
Shopify Partner
5 0 0

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

Kyle_liu
Shopify Partner
27 6 6

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

Kyle_liu_1-1715138578040.png

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)

EBOOST
Shopify Partner
850 233 262

Hi @jaimeebrooks ,


May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png
2. Assets/base.css
3. Add code below to end of file

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

EBOOST_0-1715142443052.pngEBOOST_1-1715142485155.png

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
jaimeebrooks
Shopify Partner
5 0 0

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!!

 

Screenshot 2024-05-08 at 4.12.19 PM.png

EBOOST
Shopify Partner
850 233 262

This is an accepted solution.

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:

<div class="box-price" style="display: flex; justify-content: space-between;">
            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            <span class="sku">{{ card_product.selected_or_first_available_variant.sku }}</span>
          </div>
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
jaimeebrooks
Shopify Partner
5 0 0

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?
    Screenshot 2024-05-09 at 10.27.16 AM.png
  •  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:
    • Screenshot 2024-05-09 at 10.25.42 AM.png

Thank you in advance!!

 

 

 

Thank you!!!

EBOOST
Shopify Partner
850 233 262

Hi @jaimeebrooks ,

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

EBOOST_0-1715217849481.png

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.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

Kyle_liu
Shopify Partner
27 6 6

1、Edit code:

Kyle_liu_1-1715149740770.png

 

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:<span class="price_sku">{{sku}}</span>

Kyle_liu_2-1715149814586.png

Kyle_liu_3-1715149991713.png

 

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

 

Kyle_liu_0-1715149701028.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)
Josh_01
Tourist
21 0 2

Hi!

How are you?

I need help with custom coding. Are you available?

Thanks