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...
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024