Shopify themes, liquid, logos, and UX
Hello
I want to change the color of the product title, however when I do this through the theme editor, not only the product title color changes but also the color of all headings in the website. I would like to change the color of the product titles from #191970 to #444444. How can I achieve this without changing the other headings of the website?
Which theme do you have and do you have a link to an example page?
You would likely target it using CSS, for example in the dawn theme, product titles are h1 tags with the class "product__title".
To change the title then, you would make a CSS rule like this:
h1.product__title {
color: #444444;
}
You would put this in theme.css, base.css, or whatever your CSS file that deals with these headers is.
Hi, I have the same problem in my website : https://nahladelices.com/ someone to help, thanks
Same solution, seems like you edited the structure a bit but this should work if you put it on the bottom of base.css
.product__title h1 {
color: #444444;
}
My store uses the warehouse theme. Should I use this same code?
I don't know, I don't have that theme but if you send a demo link I can find the exact class
It looks like for your theme it might instead be like this:
.product-meta__title.heading.h1 {
color: #444444;
}
The solution worked, but only for the product pages. How can I make this change effective for the featured collections, collection pages, etc?
For specifically collections it would instead be:
.page__title.heading.h1 {
color: #444444;
}
But for all h1 headings you could also just do:
.heading.h1 {
color: #444444;
}
This collections code had the same effect as the other - it only worked for the product pages, while the code for all h1 heading will change all the site's heading which is not what I'm looking for. I will leave a link to a collection page of my site for you to check.
These are the active codes:
.product-meta__title.heading.h1 {
color: #444444;
}
.heading.h1 {
color: #444444;
}
Link to website:
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
h1.product-meta__title.heading.h1 {
color: #444444;
}
Hi there,
This worked for the product pages, but not for the collections pages and featured products section. I would like all the product titles in the website to be this same color (but only the product titles). Do you have a solution?
For just products and collections use this:
.product-meta__title.heading.h1, .collection__title.heading.h1 {
color: #444444;
}
I think I just accidentally copied and pasted the same thing earlier...
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024