Hi
I wanna ask how I can change just the collection page price size, and also compared price, but just in collection page?
psw: picture
Thanks
Hi,
Please add the code below in Layout > theme.liquid before body tag ends ().
{% if template == 'collection' %}
{% style %}
@media screen and (min-width: 750px) {
/* Regular Price on PC */
.price .price-item {
font-size: 24px !important;
}
/* Sale Price on PC */
.price--on-sale .price-item--regular {
font-size: 24px !important;
}
}
@media screen and (max-width: 749px) {
/* Regular Price on Mobile */
.price .price-item {
font-size: 18px !important;
}
/* Sale Price on Mobile */
.price--on-sale .price-item--regular {
font-size: 18px !important;
}
}
{% endstyle %}
{% endif %}
Please change the font size above to fit your needs.
It will be as below.
However, I found that you already used the !important tag for .price–on-sale .price-item–regular in bass.css (as below). Please find .price–on-sale .price-item–regular and remove the !important.
.price--on-sale .price-item--regular {
font-size: 17px!important;
}
Hope it helps
@DavidEKim Thanks for the help!
I can now set up price sizes on the collection page, please can you add for me the code also with which I can set up on the product page, if I can on PC and on mobile set different sizes it will be perfect, also on regular price and on compared price, thanks.
You can replace the first code with the code below.
{% style %}
{% if template == 'collection' %}
/* Collection Page */
@media screen and (min-width: 750px) {
/* Regular Price on PC */
.price .price-item {
font-size: 24px !important;
}
/* Sale Price on PC */
.price--on-sale .price-item--regular {
font-size: 24px !important;
}
}
@media screen and (max-width: 749px) {
/* Regular Price on Mobile */
.price .price-item {
font-size: 18px !important;
}
/* Sale Price on Mobile */
.price--on-sale .price-item--regular {
font-size: 18px !important;
}
}
{% elsif template == 'product' %}
/* Product Page */
@media screen and (min-width: 750px) {
/* Regular Price on PC */
.price .price-item {
font-size: 36px !important;
}
/* Sale Price on PC */
.price--on-sale .price-item--regular {
font-size: 30px !important;
}
}
@media screen and (max-width: 749px) {
/* Regular Price on Mobile */
.price .price-item {
font-size: 24px !important;
}
/* Sale Price on Mobile */
.price--on-sale .price-item--regular {
font-size: 20px !important;
}
}
{% endif %}
{% endstyle %}
Please follow the comments in the code and change the font size to fit your needs.
You may also add font-weight: 600; to make them bold.
Hope it helps.
Thanks for the code, everything is working just the product section is not working for me from this last code, maybe can you make some changes to it?
The collection is working, but just the product.
Thanks
Sorted Thanks