How can I adjust font size and color in collection sections?

JADIS
Explorer
169 1 19

Good morning,

I would like 2 things:

1) that the prices for the “featured collection” and “collection” sections are displayed in gray (#F2F2F2)

2) that for the "featured collection" and "collection" sections the product titles be 12px in size and the prices are 10px in size

 

website : jadis-shop.com

password : rj

 

Do you know how to do it ?


thank you very much in advance

Replies 18 (18)

Kaner
Shopify Partner
12 2 2

Can't reach your shop but here is a CSS snippet that should achieve what you want:

 


css
/* Change colors for "featured collection" and "collection" sections */
.featured-collection, .collection {
    color: #F2F2F2;
}

/* Set font sizes for product titles and prices in these sections */
.featured-collection h3, .collection h3 {
    font-size: 12px;
}
.featured-collection p, .collection p {
    font-size: 10px;
}


 

Just replace the class names (`.featured-collection`, `.collection`) with your actual CSS class names for these sections if they are different from what I've used here.

Solved? Please do not forget to mark as solution
Need to discuss? Let's talk
Questions? info@kanertuncel.com
JADIS
Explorer
169 1 19

i dont know about how to code ... could you please share me complete code for my website please ?

PageFly-Theodor
Globetrotter
576 76 88

Hi @JADIS ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Change Size And Colors Of Font, let’s try this solution:

Online Store ->Theme ->Edit code->theme.liquid

 

<style>
.card__heading {
    font-size: 12px !important;
    color: #F2F2F2 !important;
}
.card-information {
    width: 100%;
    font-size: 10px !important;
}

</style>


I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JADIS
Explorer
169 1 19

it doesnt work 😞

PageFly-Theodor
Globetrotter
576 76 88

Have you tried adding to theme.liquid. Can you show me please?

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JADIS
Explorer
169 1 19

it work but its not what i want ....

 

I want to have

- the product title  (only for featured collection and collections) in size 12px  without change the colors 

- The product price (only for featured collection and collections) in size 10px and in #F2F2F2

 

 

please

PageFly-Theodor
Globetrotter
576 76 88

Can you try this code?

<style> .card__heading { font-size: 12px !important;  } .card-information { width: 100%; font-size: 10px !important; color: #F2F2F2 !important;} </style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JADIS
Explorer
169 1 19

with this code there is no change in comparaison with beginning 😕

PageFly-Theodor
Globetrotter
576 76 88

Can you add more code?

.price__sale{
	color: #F2F2F2 !important;

}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JADIS
Explorer
169 1 19

same... it's doesnt change anything

PageFly-Theodor
Globetrotter
576 76 88

Then I am added code. It show as below image

PageFlyTheodor_0-1699200022185.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JADIS
Explorer
169 1 19

could you tell me and send me total code please and where do i have to put it ?

PageFly-Theodor
Globetrotter
576 76 88
<style>
.card__heading {
    font-size: 12px !important;
    color: #F2F2F2 !important;
}
.card-information {
    width: 100%;
    font-size: 10px !important;
}
.price__sale{
	color: #F2F2F2 !important;

}

</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JADIS
Explorer
169 1 19

ok it works thanks !!!

PageFly-Theodor
Globetrotter
576 76 88

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JADIS
Explorer
169 1 19

ok bro just last question before doing that 

 

why only on this one it doesnt work ? 

sdsdq.PNG

Alex520
Shopify Partner
15 2 4

From looking at the code. That specific item looks to be a regularly priced item. It has it's own font-size of 1.6rem.

And the other items are on sale with a font-size of 12px. Which you applied with the recent code change.

If you want to adjust the size for regular priced items as well. You can probably add with your current code:

 

.price {
  color: #F2F2F2 !important;
}

 

 

Also I'd like to add, adding !important and the placement of the current code can lead to later issues if you continue to customize. Just something to be aware of if you continue to add customizations. It will be harder to track down. This one off is fine though.

Alex - Developer
Available for Hire
PageFly-Theodor
Globetrotter
576 76 88

Try testing on an anonymous browser

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.