Shopify themes, liquid, logos, and UX
I am using the Supply Theme but the compare price is not shown! It shows how much is saved instead! can anyone help please?
Solved! Go to the solution
This is an accepted solution.
@GlobalMarttec – Supply allows you to toggle between the Show saved amount and the Show compare at price options. Here is the solution to your question, posted by @puchols a while back.
Hope this helps,
Mario
This is an accepted solution.
@GlobalMarttec - add this css ,o to put original price on home page, we will need to edit the code for homepage section, it can be done
#productPrice-product-template small s{color: red !important;}
This is an accepted solution.
@suyash1 You should avoid using !important for such trivial means.
And yeah, as I’ve mentioned, @GlobalMarttec, if you change the template (it’s really just a minor change), you can easily achieve what you want. I just don’t feel that this ping pong here is very efficient. You should give collaborator access fo an expert who can add the bit of code, that adds a class to your theme, depending on whether there’s a compare-to-price higher than the actual price set on the product. That way you can switch the colors in your CSS depending on whether that class is applied.
Mario
This is an accepted solution.
@GlobalMarttec – Supply allows you to toggle between the Show saved amount and the Show compare at price options. Here is the solution to your question, posted by @puchols a while back.
Hope this helps,
Mario
sorry for that issue can you please share store url
By following the advice of @r8r I could manage the compared price on the product page but not on the featured product on the home page of single product store.
https://pz6rf06zmj4dqs3p-59973075138.shopifypreview.com
I also followed your instruction to change the color of the compared price from grey to red but it didnt work. Advise please. Thanks
Here you are. Now only the price of the featured product on the home page is remaining and i need to convert the color of the compared price into red instead of grey please. Thanks.
Please share screenshot .
Thanks!
Please add the following code at the bottom of your assets/theme.scss.liquid file.
#ProductSection-16325106332f71c56a .sale-tag {
display: inline-block;
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
padding: 0 8px;
border-radius: 3px;
vertical-align: text-bottom;
color: red !important;
border: 2px solid red !important;
}
I tried your coding but that helped only turn the saving amount in red on the featured product on home page which is $32, as you see in the screenshot
while the color remained grey in the product page :
and i would like to have the compared price $62 in red color to be seen on both featured product on home page and the product page.
Regards
@GlobalMarttec - for product page use the following css
.product-meta .sale-tag {
position: relative;
top: 2px; display: inline-block;
text-transform: uppercase; font-size: 13px;
font-weight: 700; padding: 0 8px;
border-radius: 3px; vertical-align: text-bottom;
color: red!important; border: 2px solid red!important;
}
I just copied the coding you provided but nothing changed than what is shown on the previous screenshots.
@GlobalMarttec - product page showing red, it is changed
I need the original price $62 to be in red color. That is my concern. Could it be done? Also i need the original price to be seen on the featured product page if it could be done as well.
This is an accepted solution.
@GlobalMarttec - add this css ,o to put original price on home page, we will need to edit the code for homepage section, it can be done
#productPrice-product-template small s{color: red !important;}
This is an accepted solution.
@suyash1 You should avoid using !important for such trivial means.
And yeah, as I’ve mentioned, @GlobalMarttec, if you change the template (it’s really just a minor change), you can easily achieve what you want. I just don’t feel that this ping pong here is very efficient. You should give collaborator access fo an expert who can add the bit of code, that adds a class to your theme, depending on whether there’s a compare-to-price higher than the actual price set on the product. That way you can switch the colors in your CSS depending on whether that class is applied.
Mario
Please share store URL.
Thanks!
@GlobalMarttec - please try solution given by @r8r
else we will need some code editing to do it.
I followed his instructions and I could manage the compared price on the product page but not on the featured product on the home page of single product store.
Thanks alot. I could manage the compared price on the product page but not on the featured product on the home page of single product store.
https://pz6rf06zmj4dqs3p-59973075138.shopifypreview.com
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024