Product Description HELP

clementgordon · March 25, 2026, 11:37am

Hi guys, I want to make my product information section look like the screenshot I will upload below. Currently, my description seems to be super faded and very far apart and also I cannot seem to find the “Save X%” Widget anywhere so if anyone could help me solve these 2 problems that would be great.

Mustafa_Ali · March 25, 2026, 11:43am

Hey @clementgordon Welcome to Shopify Community can you please share the Website URL

clementgordon · March 25, 2026, 11:45am

ProtoMan44 · March 25, 2026, 11:54am

Hey @clementgordon
Hey, thanks for posting here.
Can you please share the link so we can inspect it? Thanks

Mustafa_Ali · March 25, 2026, 12:02pm

Hey @clementgordon Try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
.product__description.rte.quick-add-hidden {
    font-size: 15px !important;
}
}
@media screen and (max-width: 767px) {
.product__description.rte.quick-add-hidden {
    font-size: 14px !important;
}
}
p {
    margin-bottom: -20px !important;
}
</style>

clementgordon · March 25, 2026, 12:20pm

Hi thankyou very much but would it be possible for you to make it more like this in terms of spacing and also do you have any idea of where I could get the save widget from?

ProtoMan44 · March 25, 2026, 12:25pm

put this css in style tag:

.product__description.rte p {
margin-top: -19px;
}

clementgordon · March 25, 2026, 12:38pm

This is how it ended up. Would it be possible for you to just give me one complete piece of code to avoid any confusion?

ZestardTech · March 25, 2026, 12:42pm

Hi @clementgordon,

Since you’re using the Refresh theme, you can achieve this layout by adding some custom CSS.

–> Go to: Online Store → Themes → Edit code → base.css

Then add the following code at the bottom:

#shopify-section-template--26623688507670__main .product__description {
    font-size: 16px;
}

#shopify-section-template--26623688507670__main .product__description p {
    margin: 8px 0;
}

.price.price--large.price--on-sale.price--show-badge {
    display: flex;
    align-items: center;
}

s.price-item.price-item--regular {
    margin-right: 5px;
}

span.price-item.price-item--sale.price-item--last {
    font-size: 1.6rem;
}

span.badge.price__badge-sale.color-scheme-4 {
    margin: 0;
}

For reference, here’s how it should look: Screenshot by Lightshot

To add Save % badge

–> Go to: Online Store → Themes → Edit code → snippets → price.liquid

Then find this line:

<span class="price-item price-item--sale price-item--last">
  {{ money_price }}
</span>

And add the following code just below it:

{% assign compare_price = current_variant.compare_at_price | default: product.compare_at_price %}
{% assign sale_price = current_variant.price | default: product.price %}

{% if compare_price > sale_price %}
  {% assign save_percent = compare_price | minus: sale_price | times: 100 | divided_by: compare_price | round %}
  
  <span class="save-badge">
    SAVE {{ save_percent }}%
  </span>
{% endif %}

Also, add this CSS in your base.css file:

.save-badge {
  background: #000;
  color: #fff;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 4px;
  margin-left: 8px;
  display: inline-block;
}

Let us know if you’d like us to implement this in your store or if you have any further queries

ProtoMan44 · March 25, 2026, 12:47pm

@clementgordon i dont know why, but it’s perfect on my side.
now can you please try this one

.product__description.rte p {
margin: 0;
}

clementgordon · March 25, 2026, 1:07pm

The bullet points look great but the coding for the widget seems to have a defect

clementgordon · March 25, 2026, 1:08pm

If you could also put the tag before the save like so that would be super helpful. Thanks so much for your help so far though I really appreciate it.

ZestardTech · March 25, 2026, 1:15pm

Hi @clementgordon,

Please replace the previously shared CSS with the updated code below.

–> Go to: Online Store → Themes → Edit code → base.css

Then replace the earlier CSS completely with this:

#shopify-section-template--26623688507670__main .product__description {
    font-size: 16px;
}

#shopify-section-template--26623688507670__main .product__description p {
    margin: 8px 0;
}

.price.price--large.price--on-sale.price--show-badge {
    display: flex;
    align-items: center;
}

s.price-item.price-item--regular {
    margin-right: 5px;
}

span.price-item.price-item--sale.price-item--last {
    font-size: 22px;
    margin: 0;
}

span.badge.price__badge-sale.color-scheme-4 {
    margin: 0;
}

.save-badge {
    background: #000;
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

span.badge.price__badge-sale.color-scheme-4 {
    display: none;
}

.save-icon {
    width: 14px;
    height: 14px;
}

After replacing the CSS, the layout should appear as expected.

To add Save % badge with image icon

Upload the image:

–> Go to: Online Store → Themes → Edit code → Assets → Add a new asset

Upload your icon (e.g., save-tag.png)

Add code in price file:

–> Go to: snippets → price.liquid

Find this line:

<span class="price-item price-item--sale price-item--last">
  {{ money_price }}
</span>

Add the following code just below it:

{% assign compare_price = current_variant.compare_at_price | default: product.compare_at_price %}
{% assign sale_price = current_variant.price | default: product.price %}

{% if compare_price > sale_price %}
  {% assign save_percent = compare_price | minus: sale_price | times: 100 | divided_by: compare_price | round %}
  
  <span class="save-badge">
    <img src="{{ 'save-tag.png' | asset_url }}" alt="save tag" class="save-icon">
    SAVE {{ save_percent }}%
  </span>
{% endif %}

Let us know if you’d like us to implement this in your store or if you have any further queries.

Thank you.

clementgordon · March 25, 2026, 1:30pm

Quick question when you say upload image what do you mean as I am really confused as to where or how to upload it

clementgordon · March 25, 2026, 1:32pm

Also I think the widget is too high up as I would like it to be in line with the price.

ZestardTech · March 25, 2026, 1:40pm

Hi @clementgordon,

You can keep your existing CSS as it is — just add the following additional styles in your base.css file:

.price__sale {
    position: relative;
}

.save-badge {
    background: #000;
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 7px;
    right: -120px;
}

For the icon in Save badge

Since you’re using the Refresh theme, it already includes a built-in SVG icon:

icon-price-tag.svg, so no need to upload any image.

–> Go to: Online Store → Themes → Edit code → snippets → price.liquid

Find:

<span class="price-item price-item--sale price-item--last">
  {{ money_price }}
</span>

Add this just below it:

{% assign compare_price = current_variant.compare_at_price | default: product.compare_at_price %}
{% assign sale_price = current_variant.price | default: product.price %}

{% if compare_price > sale_price %}
  {% assign save_percent = compare_price | minus: sale_price | times: 100 | divided_by: compare_price | round %}
  
  <span class="save-badge">
    {% render 'icon-price-tag' %}
    SAVE {{ save_percent }}%
  </span>
{% endif %}

This will display the SAVE % badge with icon positioned next to the price.

Let us know if you’d like us to implement this in your store or if you have any further queries.

clementgordon · March 26, 2026, 12:39am

This is what it came up with

Maximus3 · March 26, 2026, 1:31am

@clementgordon

Go to price.liquid. Scroll down to the bottom. Select this exact section:

REPLACE this entire section. From <span> to </span>

Replace with this:

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
  {%- if compare_at_price > price -%}
    {%- assign savings_pct = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round -%}
    🏷️ Save {{ savings_pct }}%
  {%- else -%}
    {{ 'products.product.on_sale' | t }}
  {%- endif -%}
</span>

Style background color and corner radius in THEME SETTINGS → BADGES

ZestardTech · March 26, 2026, 5:01am

Hi @clementgordon,

Apologies for the inconvenience caused.

The error is happening because the icon was added using a snippet render, while in your theme the icon exists as an asset (.svg).

To fix this, please replace the previously added block with the updated code below.

–> Go to: Online Store → Themes → Edit code → snippets → price.liquid

Find the code you added earlier and replace it with this:

{% assign compare_price = current_variant.compare_at_price | default: product.compare_at_price %}
{% assign sale_price = current_variant.price | default: product.price %}

{% if compare_price > sale_price %}
  {% assign save_percent = compare_price | minus: sale_price | times: 100 | divided_by: compare_price | round %}
  
  <span class="save-badge">
    <img src="{{ 'icon-price-tag.svg' | asset_url }}" alt="tag" class="save-icon">
    SAVE {{ save_percent }}%
  </span>
{% endif %}

Also add this CSS

–> Go to: Online Store → Themes → Edit code → base.css

Add:

.save-icon {
  width: 14px;
  height: 14px;
}

This will resolve the error and display the SAVE % badge with the icon correctly.

Let us know if u need any furtur assistance.

Topic		Replies	Views
Tutorial: Displaying Saved Amount/Percentage on the Sale Badge Store Design	28	934	August 20, 2023
Adding description customize price and heading of the product just like in the video Shopify Discussion troubleshooting	0	29	September 11, 2024
Venture Theme Product Pages - Layout Changes Store Design	9	88	August 11, 2022
Move sale badge to somewhere that doesn’t cut off image Store Design design , shopify-themes	11	90	August 15, 2024
How can I get the buttons on the product page under the description Store Design	19	91	September 7, 2021

Product Description HELP

To add Save % badge

To add Save % badge with image icon

For the icon in Save badge

Also add this CSS

Related topics