How to show original price first and then discounted price BROOKLYN theme

Emiliofp
Tourist
11 0 1

Hi, I want to know how to change the order, and display the crossed/original price first, and then the discounted price. My product page is showing them like I want, but in my collection page it is not. I used this code (that I found hereon product-grid-item.liquid to display the original price and the discounted price. (since Brooklyn theme doesn't has it as predetermined).

 

 

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

 

 

And after using it the result is the following (in red box):

 

 Screen Shot 2019-11-14 at 4.03.33 PM.png

 

Could you please help me change the crossed amount to be displayed first?

Replies 20 (20)

James-G
Excursionist
25 2 9

Try swapping the code blocks, like this:

 

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

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

 

 

betterlifestyle
Visitor
2 0 0

I had the same issue and this worked for me. Thank you so much!!

EeJin
Excursionist
24 0 4

Hi,

I managed to used the code below and it works perfectly fine. However, it runs really bad in my mobile. Any idea how to fix this? 

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

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

 

This is how my phone view looks like. Help please!

 

price run mobile.PNG

 

 

Amyames
Tourist
8 0 2

Hello James,

Wondered if you can help me. 

I used the above 1st section of the code which worked well however I would like the crossed out original price to be smaller and not in Bold. 

 

Also would like the new sale price to be slightly bigger and in red to make the new sale price stand out more. (Abit like the format when you click into a product) Can you help?

My website is Shop All – EcoTwenty for your ref.

 

Thanks in advance

Amy

suyash1
Shopify Partner
9077 1129 1479

@Amyames - please add this css to the very end of your timber.scss file and check 

.product-single__price--compare-at {font-size: 1em; font-weight: 400;}

 

suyash1_0-1672414047483.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Amyames
Tourist
8 0 2

Hello Suyash1

thanks for your reply and help. I have tried but please can you further advise where is the end of your timber.scss file? 

 

Thanks in advance 

suyash1
Shopify Partner
9077 1129 1479
Go to online store- themes- actions- edit code- you will have this file in
your assets folder
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Amyames
Tourist
8 0 2

Wow!! Thank you so much! it worked! 😄

Amyames
Tourist
8 0 2

Hi Suyash1

Hope you well

Sorry just another thing. The non sale items have the above code written on the site. Please see my attached image for ref. How to add a code to include non sale items format to stay as is without any changes?

Thanks 

Amy

suyash1
Shopify Partner
9077 1129 1479

@Amyames - you sent cssv file, can you please send png or jpg file?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Amyames
Tourist
8 0 2
Thanks again for your reply, here is a screen shot hope this works?
Thanks


Amyames
Tourist
8 0 2
 

Hi Suyash1

I tried to send the attached in Jpeg or Png via email not sure if you have received and I cannot seem to attached image on here.

 

On the non sale items before the orginal price reads the code .product-single__price--compare-at {font-size: 1em; font-weight: 400;}

 

I have copied and pasted below, sorry I cannot attach image. My website is Loungewear – EcoTwenty  

 

Women Tank Top 100% organic cotton .product-single__price--compare-at {font-size: 1em; font-weight: ...

suyash1
Shopify Partner
9077 1129 1479

@Emiliofp wrote:

Hi, I want to know how to change the order, and display the crossed/original price first, and then the discounted price. My product page is showing them like I want, but in my collection page it is not. I used this code (that I found hereon product-grid-item.liquid to display the original price and the discounted price. (since Brooklyn theme doesn't has it as predetermined).

 

 

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

 

 

And after using it the result is the following (in red box):

 

 Screen Shot 2019-11-14 at 4.03.33 PM.png

 

Could you please help me change the crossed amount to be displayed first?


either you can do it via code swapping or css, if you can give me website link, I can check with css or you will need to swap code

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
ichan17
Visitor
1 0 0
Someone please show how to show original price first and then discounted price BROOKLYN theme
 
suyash1
Shopify Partner
9077 1129 1479

@ichan17 wrote:
Someone please show how to show original price first and then discounted price BROOKLYN theme
 

please share your product page url and password if site not active yet.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Amyames
Tourist
8 0 2

Hi Suyashi,

 

please can you help me with the below question, i have added in description and link to the website where you can see the problem.

 

Look forward to hearing you

Thanks

Amy

suyash1
Shopify Partner
9077 1129 1479

@Amyames - hello, I can see you added css near product title, 

 

please remove css from there and add it to theme.scss file

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
JG0769
Visitor
1 0 0

Hello @suyash1 ,

 

I'm trying to center the featured collections grid view in the Dawn template, but it's not aligning. The code I've tried adding to the bottom of the base CSS is:

 

#shopify-section-template--17767328350481__featured_collection .title-wrapper-with-link{text-align: center; justify-content: center;} #shopify-section-template--17767328350481__featured_collection .grid{justify-content: center;} #shopify-section-template--17767328350481__featured_collection .card-information__wrapper > .price

 

JG0769_0-1675638558890.png

Any advise or direction would be appreciated!

suyash1
Shopify Partner
9077 1129 1479

@JG0769 - your section id will be different,, can you share your website page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
BryanCommitted
Tourist
3 0 1

Hello, what do I need to change with the following code to make the first product variant price show instead of the lowest priced variant?

 

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

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