Shopify themes, liquid, logos, and UX
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 here) on 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):
Could you please help me change the crossed amount to be displayed first?
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>
I had the same issue and this worked for me. Thank you so much!!
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!
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
@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;}
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
Wow!! Thank you so much! it worked! 😄
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
@Amyames - you sent cssv file, can you please send png or jpg file?
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
@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 here) on 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):
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
@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.
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
@Amyames - hello, I can see you added css near product title,
please remove css from there and add it to theme.scss file
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
Any advise or direction would be appreciated!
@JG0769 - your section id will be different,, can you share your website page link?
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>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024