Change font-size och featured collection only on product pagr?Refresh

Store Design
, , ,
1

is it possible to only change the font-size on featured collection on product page? Without that the showing product price change? I have edit price in main-product.css but that also affect featured collection, i would like to not include the font-size on featured collection. Any tips?

theme: refresh

https://reflawless.com/products/self-cleaning-hair-brush-for-women-one-key-cleaning-hair-loss-airbag-massage-scalp-comb-anti-static-hairbrush

pw: haj

2

You can add it to your product.liquid. Create a and put your css in this.

1 Like
3

Hello there!

Yes, it is possible to change the font size of the featured collection on a product page in Shopify without affecting the display of product prices. This can be done by modifying the CSS code of your theme. You can access the CSS code in the “Themes” section of your Shopify admin, select the theme you’re using, and then click on the “Editor” option. In the CSS file, you can find the specific styles that control the font size of the featured collection and adjust them as needed.

1 Like
4

Hi @Kingstone

Greetings from the Store Watchers Support Team! Happy to help you today.

Please follow the below steps to change the font size of the price on the featured collection on the product page, this will not have any effect on other pages.

  • Go to Online store > Themes > Edit code > product template > Add below code in the bottom of the file

Let me know if need further help.

Regards,

Store Watchers Support Team

1 Like
5

Hi @Kingstone ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.product__info-container .price-item {
    font-size: 26px !important;
}

I hope it would help you
Best regards,

Kate | PageFly

1 Like
6

@PageFly-Kate @StoreWatchers @Simonsron

Thanks for all the tips! It works with, but I cant manage to get diffrent font-size from diffrent media, do i need to change something here (now it just showing font-size 24px for computer and no change for phone):

I put it like this in bottom om section-main-product.css

@media only screen and (min-width: 750px) {
.product__info-container .price-item {
    font-size: 24px !important;
    font-weight: bold !important;
}
  
@media only screen and (max-width: 749px) {
.product__info-container .price-item {
    font-size: 19px !important;
    font-weight: bold !important;
}
1 Like
7

Hi @Kingstone ,

Looks like you’re missing a “}”

You can try below code:

@media only screen and (min-width: 750px) {
.product__info-container .price-item {
    font-size: 24px !important;
    font-weight: bold !important;
}
}
@media only screen and (max-width: 749px) {
.product__info-container .price-item {
    font-size: 19px !important;
    font-weight: bold !important;
}
}

I hope it would help you
Best regards,

Kate | PageFly

1 Like