Change the color of one word in the header of the featured collections sections?

Store Design
, , ,

Topic summary

Goal: change the color of a single word (“shop”) in the Featured Collections header on a Shopify store.

What was tried: The OP added CSS targeting a section-specific ID in Custom CSS and base.css, but it didn’t work. They also struggled with where to place the code.

Key guidance: Multiple replies advised avoiding Shopify’s auto-generated IDs (they change between themes/sections) and instead use stable class-based selectors. One reply noted the header’s structure may need to include a around the specific word to target it reliably.

Working solution (confirmed by OP):

  • In the Featured collection block, wrap the target word in a span tag: shop.
  • Add class-based CSS in Theme > Customize > Theme settings > Custom CSS:
    .collection__title h2.title > span { color: red; }

Alternative selectors suggested: .featured-collection-section .collection__title h2 span { color: #8BAEFD; }, with a strong recommendation to avoid using Shopify’s inbuilt IDs to prevent breakage when themes/sections change.

Outcome: Resolved. The color change worked after adding the span and applying class-based CSS.

Summarized with AI on December 15. AI used: gpt-5.
1

How can I change the color of one word in the header of the featured collections sections?

I tried changing the section/page and using the CSS code that I used to change a word’s color in another section, but it didn’t work. what CSS code can I use to change a word color for this section?

Check the pic for reference. I want to change the color of the word “shop”.

your help and patience is appreciated!

URL: https://36c09f-58.myshopify.com/
password: leumpo

Screenshot 2024-11-06 at 12.42.51 AM.png
Screenshot 2024-11-06 at 12.42.51 AM.png2196×232 12.5 KB

2

Hi @sculptingbodies

You can follow the instruction here:

  1. Go to Shopify > Theme > Customize > open Custom CSS

  2. Copy and paste this code to the section > Save

div#collection-template--16507269414963__featured_collection h2 span {
    color: #8BAEFD; (or any color you want, eg: black, red, #C9C9C9,...)
}

Here is the result :

LizHoang_0-1730872803708.png
LizHoang_0-1730872803708.png1374×397 171 KB

3

hmm, I must be doing something wrong because I’ve tried it multiple times and it hasn’t worked yet.

what line is on? maybe I’m putting the code in the wrong spot

4

Custom CSS on the Featured Collections Page? I tried it and it didn’t work

5

Hello @sculptingbodies
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.title-wrapper--no-top-margin > .title strong span {
color: crimson !important;
}

result

69.png
69.png1290×204 30.4 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

I don’t know what i’m doing wrong because it’s still not working

7

Hello @sculptingbodies , you have added style right but you need to modify your structure as well below screenshot provided

EvinceDev_0-1730873991860.png
EvinceDev_0-1730873991860.png1312×910 187 KB

.featured-collection-section .collection__title h2 span {
    color: #8BAEFD;
}

Use this style instead of you added this because this id will changes when you change theme so give unique class then add style,
it will not give you problem when you change theme or add this section in another theme –

#shopify-section-template--16507269414963__featured_collection div#collection-template--16507269414963__featured_collection h2 span {
    color: #8BAEFD;
}

Important : Donot use shopify inbuilt id this will lead issue when theme change

8

Hi @sculptingbodies

I hope you are well. You can follow our instructions below:

First, under Featured collection block here: https://prnt.sc/1v7qtKDXb6sZ - please help me adjust this tag there: text differnt color

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

.collection__title h2.title > span {
    color: red;
}

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team

9

THANK YOU! this actually worked!

1 Like