Display Normal Price next to Sale/Compare at Price

Highlighted
Tourist
5 0 1

Hey Guys, 

I am using Brooklyn Template and i want to display the normal price (score through) next to the normal price in the Product Overview on the Home Page and the Collections Page.

How can i solve this problem? 

The Picture is an example what it may look like, just for you to understand what i mean. 

1 Like
Highlighted
Pathfinder
112 1 33

You are going to have to edit your theme. I'll walk you through it. Please make a backup of the files before saving in case anything goes wrong.

Go to your admin panel.

  1. Click on the Online Store link on the left menu under Sales Channels.
  2. Click on the Themes link on the left menu.
  3. Click on the white Actions drop down button on your active theme then select Edit code.
  4. You should now see a list of files and folders.
  5. Click on the Snippets folder. There should be a product-grid-item.liquid file. Click on that.
  6. Scroll down to around line 82, you should see code that looks like this:
            <span class="grid-product__price">
              {% if on_sale %}
                <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
              {% else %}
                 <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              {% endif %}
              {% if product.price_varies %}
                {{ product.price_min | money_without_trailing_zeros }}
                <span class="icon-fallback-text">
                  <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
                  <span class="fallback-text">+</span>
                </span>
              {% else %}
                {{ product.price | money_without_trailing_zeros }}
              {% endif %}
            </span>
  7. Replace it with this:
            <span class="grid-product__price">
              {% if product.price_varies %}
                {{ product.price_min | money_without_trailing_zeros }}
                <span class="icon-fallback-text">
                  <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
                  <span class="fallback-text">+</span>
                </span>
              {% else %}
                {{ product.price | money_without_trailing_zeros }}
              {% endif %}
            </span>
            
            {% if on_sale %}
              <span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
              <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
            {% else %}
              <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            {% endif %}

     

  8. Click on the white Save button.

The compare at price should now be next to the sale price. Let me know if that works.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
7 Likes
Highlighted
Tourist
5 0 1

Thank you Alex! 

That worked for me. Problem solved :)

If that isn´t to much work - i got another issue:

As the Regular Price is now shown like i wanted it to show, i wanted to delete the "sale tags" on the items, that my Theme gave me - so i deleted the text in the translation settings, but now theres still a green oval lining in the top left corner of the product - where can i delete these? 

The Picture I uploaded should show you what i mean by that - want to delete this "thing" in the top left corner above my product

I would really appreciate if you could solve that for me, too :)

0 Likes
Pathfinder
112 1 33

Around line 70 of the product-grid-item.liquid file there should be code that looks like this:

      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>

Comment those lines out by adding <!-- and --> at the beginning and end like this:

      <!-- {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div> -->

That should do it.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
2 Likes
Highlighted
Tourist
5 0 1

Thanks a lot man! That did it. 

So all my Problems are solved :)

0 Likes
Highlighted
Tourist
5 0 4

Alex Espinoza, you are the man!!!

0 Likes
Highlighted
New Member
2 0 0

I've been searching for a solution to this problem for hours and this finally did the trick! I do have another connected question, however. How would you go about changing the color of the new sale price to something more eye-catching, such as red? 

0 Likes
Highlighted
New Member
1 0 0

I tried what Alex Espinoza said but somehow it didnt work for me! (concerning deleting the Sale Tag in the top left corner)

I even copied the whole code he pasted and still it doesnt work for me.

Anyone experiencing same problem?

--Edit--

I tried that method and it worked for me perfect!

 

Add this to the bottom of your stylesheet and it will hide the tag until you find the correct place in your templates to fix  it: 

.grid-product__on-sale {
    display: none;
}
0 Likes
Highlighted
Shopify Partner
1 0 1

Hey Alex,

Could you help me do the same with the Supply theme?

The code looks a little different than Brooklyn. (Sorry, I'm a rookie lol)

1 Like
Highlighted
Excursionist
19 0 0

Hi , did you happen to find a solution for the Supply theme? Thank you

0 Likes