Shopify themes, liquid, logos, and UX
Hello, I am currently working on a store using the Sense Theme.
I am struggling with swapping the discounted price with the original price.
I would like to have the discounted price in front of the old price on the product page of the product itself only! Ill provide an example of how I would like it.
Could someone help me?
Thanks in advance and kind regards 🙂
Solved! Go to the solution
This is an accepted solution.
Hi @Alllways
Please follow these Steps:
1) Go to Online Store
2) Edit Code
3) Please find theme.liquid file
4) Add the following code above </head> tag
<style>
#price-template--19441569694045__main .price__sale {
display: flex!important;
flex-direction: row-reverse!important;
align-items: end;
}
</style>
This is an accepted solution.
Hi @Alllways
Please follow these Steps:
1) Go to Online Store
2) Edit Code
3) Please find theme.liquid file
4) Add the following code above </head> tag
<style>
#price-template--19441569694045__main .price__sale {
display: flex!important;
flex-direction: row-reverse!important;
align-items: end;
}
</style>
Thank you so much! it worked!
Do you maybe also know how i can make the discounted price larger in comparison to the old price? Just on product page of the product itself the
Hi @Alllways
use this css
span.price-item.price-item--sale.price-item--last {
font-size: 29px !important;
font-weight: bold !important;
}
Where do i put this? 🙂
Please follow these Steps:
1) Go to Online Store
2) Edit Code
3) Please find theme.liquid file
4) Add the following code above </head> tag
in style which you added
Thank you, only problem is that it changes it also in the collections page. I would prefer it only on the product page of the product itself 🙂
@Alllways
add this css
.price.price--on-sale .price__sale {
display: flex!important;
flex-direction: row-reverse!important;
align-items: end;
}
Thank you!
Hello, it's quite easy to do in your price.liquid file. You need to reorder code a bit.
Replace :
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
With:
<div class="price__sale">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
</div>
It will also be applied to collections pages (product lists) as well. Please mark it as a solution if it helps.
Regards,
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024