Show SKU on product preview - Dawn Theme

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
1292 327 391

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 18 (18)

LuffyOnePiece
Shopify Partner
650 93 119

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
372 47 63

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 Email Me Buy Me A Coffee

EBOOST
Shopify Partner
1292 327 391

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
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
1292 327 391

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
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
1292 327 391

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
shakkhoza
Shopify Partner
11 0 0

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

EBOOST
Shopify Partner
1292 327 391

Hi @shakkhoza ,

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

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
shakkhoza
Shopify Partner
11 0 0
EBOOST
Shopify Partner
1292 327 391

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:

<span class="sku">{{ product.selected_or_first_available_variant.sku }}</span>

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.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
shakkhoza
Shopify Partner
11 0 0

Thanks where would I paste this code into?Screenshot 2024-09-20 at 11.52.20.png

EBOOST
Shopify Partner
1292 327 391

Hi,

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

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
shakkhoza
Shopify Partner
11 0 0

{% 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 }}

<div class="card-wrapper js">
{%- 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 -%}

<a href="{{ product_card_href }}" class="full-unstyled-link">
<span class="visually-hidden">{{ product_card_product.title | escape }}</span>

<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- 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 %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w{%- endif -%}"
src="{{ product_card_product.featured_media | 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.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>

{%- 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 -%}
</div>
</div>
{%- else -%}
<div class="card__content"><h2 class="card__text h3">{{ product_card_product.title }}</h2></div>
{%- endif -%}

<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">{{ 'products.product.sold_out' | t }}</span>
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>

<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}

{%- if product_card_product.featured_media -%}
<span class="card-information__text h5">
{{ product_card_product.title | escape }}
</span>
{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- 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
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
<div class="ruk_rating_snippet" data-sku="{{- product_card_product.handle -}};{{- product_card_product.variants | map: 'sku' | join: ';' -}};{{- product_card_product.variants | map: 'id' | join: ';' -}}"></div>
{%- assign product_tags_string = product_card_product.tags | join: ', ' -%}
{%- if product_tags_string contains 'Enquiry' -%}
<span class="price-item price-item--regular">{{ 'Request a quote' }}</span>
{%- 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 %}
<span class="product-stock-information">{{- product_card_product.metafields.my_fields.stock_information -}}</span>
{% endunless %}
{%- endif -%}
</div>
</div>
</a>
{%- if hide_add_to_basket == false -%}
{%- unless product_tags_string contains 'Enquiry' -%}
<form class="card-basket-form" method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}"/>
<quantity-input class="input-wrapper product-quantity quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">
{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}
</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1">
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">
{{ 'products.product.quantity.increase' | t: product: product.title | escape }}
</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<input type="submit"
value="{{ 'products.product.add_to_cart' | t }}"
class="add-to-basket button button--secondary" />
</form>
{%- endunless -%}
{%- endif -%}

<a href="{{ product_card_href }}" class="view-details button button--full-width button--primary">{{ 'products.product.view_details' | t }}</a>
</div>

<script type="text/javascript">

window.addEventListener('load', function () {
document.querySelectorAll('.js.card-wrapper').forEach(function (item) {
item.addEventListener('click', function (e) {
// Prevent linking to product page when reviews are clicked
if (e.target.classList.toString().includes('ruk')) {
e.preventDefault();
}
});
});
});

</script>

Thank you

EBOOST
Shopify Partner
1292 327 391

Hi,

You can use code below:

EBOOST_0-1726880736377.png

 

{% 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 }}

<div class="card-wrapper js">
  {%- 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 -%}

  <a href="{{ product_card_href }}" class="full-unstyled-link">
    <span class="visually-hidden">{{ product_card_product.title | escape }}</span>

    <div
      class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}"
      tabindex="-1"
    >
      <div class="card__inner">
        {%- 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
          -%}

          <div
            {% if add_image_padding %}
              class="card__media-full-spacer"
            {% endif %}
          >
            <div
              class="media media--transparent media--{{ media_size }} media--hover-effect"
              {% if media_size == 'adapt' and product_card_product.featured_media %}
                style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
              {% endif %}
            >
              <img
                srcset="
                  {%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
                  {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                  {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                  {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                  {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w{%- endif -%}
                "
                src="{{ product_card_product.featured_media | 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.featured_media.alt | escape }}"
                loading="lazy"
                class="motion-reduce"
                width="{{ product_card_product.featured_media.width }}"
                height="{{ product_card_product.featured_media.height }}"
              >

              {%- if product_card_product.media[1] != null 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 -%}
            </div>
          </div>
        {%- else -%}
          <div class="card__content">
            <h2 class="card__text h3">{{ product_card_product.title }}</h2>
          </div>
        {%- endif -%}

        <div class="card__badge">
          {%- if product_card_product.available == false -%}
            <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif product_card_product.compare_at_price > product_card_product.price
            and product_card_product.available
          -%}
            <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- endif -%}
        </div>
      </div>
    </div>

    <div class="card-information">
      <div class="card-information__wrapper">
        {%- if show_vendor -%}
          <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
          <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
        {%- endif -%}

        {%- if product_card_product.featured_media -%}
          <span class="card-information__text h5">
            {{ product_card_product.title | escape }}
          </span>
        {%- endif -%}

        {% comment %} TODO: metafield {% endcomment %}
        <span class="caption-large light">{{ block.settings.description | escape }}</span>
        {%- 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
          %}
          <div
            class="rating"
            role="img"
            aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}"
          >
            <span
              aria-hidden="true"
              class="rating-star color-icon-{{ settings.accent_icons }}"
              style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
            ></span>
          </div>
          <p class="rating-text caption">
            <span aria-hidden="true">
              {{- product_card_product.metafields.reviews.rating.value }} /
              {{ product_card_product.metafields.reviews.rating.value.scale_max -}}
            </span>
          </p>
          <p class="rating-count caption">
            <span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
            <span class="visually-hidden">
              {{- product_card_product.metafields.reviews.rating_count }}
              {{ 'accessibility.total_reviews' | t -}}
            </span>
          </p>
        {%- endif -%}
        <div
          class="ruk_rating_snippet"
          data-sku="{{- product_card_product.handle -}};{{- product_card_product.variants | map: 'sku' | join: ';' -}};{{- product_card_product.variants | map: 'id' | join: ';' -}}"
        ></div>
        {%- assign product_tags_string = product_card_product.tags | join: ', ' -%}
        <div class="box-price" style="display: flex; justify-content: space-between;align-items: center;">
        {%- if product_tags_string contains 'Enquiry' -%}
          <span class="price-item price-item--regular">{{ 'Request a quote' }}</span>
        {%- else -%}
          {%- render 'price', product: product_card_product, price_class: '' -%}
        {%- endif -%}
        <span class="sku" style="font-size: 13px;">{{ product_card_product.selected_or_first_available_variant.sku }}</span>
        </div>
        {%- if hide_stock_information == false -%}
          {% unless product_card_product.metafields.my_fields.stock_information == blank %}
            <span class="product-stock-information">
              {{- product_card_product.metafields.my_fields.stock_information -}}
            </span>
          {% endunless %}
        {%- endif -%}
      </div>
    </div>
  </a>
  {%- if hide_add_to_basket == false -%}
    {%- unless product_tags_string contains 'Enquiry' -%}
      <form class="card-basket-form" method="post" action="/cart/add">
        <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
        <quantity-input class="input-wrapper product-quantity quantity">
          <button class="quantity__button no-js-hidden" name="minus" type="button">
            <span class="visually-hidden">
              {{ 'products.product.quantity.decrease' | t: product: product.title | escape }}
            </span>
            {% render 'icon-minus' %}
          </button>
          <input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1">
          <button class="quantity__button no-js-hidden" name="plus" type="button">
            <span class="visually-hidden">
              {{ 'products.product.quantity.increase' | t: product: product.title | escape }}
            </span>
            {% render 'icon-plus' %}
          </button>
        </quantity-input>
        <input
          type="submit"
          value="{{ 'products.product.add_to_cart' | t }}"
          class="add-to-basket button button--secondary"
        >
      </form>
    {%- endunless -%}
  {%- endif -%}

  <a href="{{ product_card_href }}" class="view-details button button--full-width button--primary">
    {{- 'products.product.view_details' | t -}}
  </a>
</div>

<script type="text/javascript">
  window.addEventListener('load', function () {
    document.querySelectorAll('.js.card-wrapper').forEach(function (item) {
      item.addEventListener('click', function (e) {
        // Prevent linking to product page when reviews are clicked
        if (e.target.classList.toString().includes('ruk')) {
          e.preventDefault();
        }
      });
    });
  });
</script>

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

Kyle_liu
Shopify Partner
372 47 63

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 Email Me Buy Me A Coffee
Josh_01
Tourist
33 0 3

Hi!

How are you?

I need help with custom coding. Are you available?

Thanks