Editing the Featured Products Header

Store Design
, ,

Topic summary

Goal: Customize only collection headers on the homepage (e.g., “Featured Products,” “Recommended For You”) with centered text and decorative side lines, specific fonts/colors, and consistency across these sections without changing all site headers.

Context & references: OP shared current and desired look via screenshots, requesting code with easily adjustable color, font, bar length, and thickness.

Proposed solutions:

  • Code-based section: Create a new section (featured-header) via Online Store > Themes > Edit code, then style with CSS classes (.featured-header, .line, .featured-title, .featured-subtitle). Default demo uses a black background and red lines, but colors are intended to be customizable.
  • Quick CSS tweak (latest): In Customize > Section > Custom CSS, add h2.title { text-align: center; } to center the header text.

Additional info: Store URL provided for review (alphawindshields.com).

Status: No confirmation of implementation or resolution yet. Key open item: a targeted method to apply styles only to specific collection headers (not global headers) while keeping colors/line styles configurable. Attachments (screenshots and code snippets) are central to understanding the desired design and approach.

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

I would like to edit the look of the header of my Featured Products located on my home page. I would want to add some more design elements to the header, potentially change the font and color. I would like to be able to adjust all of the collections headers to be the same and consistent while not changing all of my headers throughout the whole website by adjusting the theme. For example I want the “Featured Products” collection header and “Recommended For You” collection header to be a certain color and font but not the rest of my headers on the website.

Here is a screen shot of my current header:

Screenshot 2024-10-29 at 7.49.23 PM.png
Screenshot 2024-10-29 at 7.49.23 PM.png2454×312 415 KB

I am thinking I want it to look something more like the screenshot below.

Screenshot 2024-10-29 at 7.42.57 PM.png
Screenshot 2024-10-29 at 7.42.57 PM.png1264×156 7.73 KB

I do not want the background to be black (I can change that by the Theme) and not necessarily red on the lines but I like the look of it being centered and having some design lines around it. I would want the lines to be black on each side and the text centered. If possible could you include a color line within the code? I can go in and update the color, font, length and thickness of the bars etc. if the code has it written within it.

Thank you.

2

Hi @AlphaWindshield ,

Please send the website link, I will check it for you

3

Hi @AlphaWindshield ,

you can make your header look like the header you shared by changing HTML, CSS code of your exsisting header follow the steps below:

  • Go to Online Store > Themes > Edit code.

  • Under Sections, add a new section named featured-header with this code:


    

    ## FEATURED PRODUCTS
    

Popular Trending Products

In theme.css or custom.css, add:

.featured-header { display: flex; align-items: center; justify-content: center; background-color: #000; padding: 20px; }
.featured-header .line { width: 50px; height: 2px; background-color: red; margin: 0 10px; }
.featured-header .featured-title { font-size: 24px; font-weight: bold; color: white; text-transform: uppercase; }
.featured-header .featured-subtitle { font-size: 14px; color: red; font-style: italic; margin-top: 5px; }

Add Section in Theme Customizer.

  • This will create the styled header. Adjust as needed.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

4
5

Hi @AlphaWindshield ,

Please go to Customize > Section > Custom CSS > Add code:

h2.title {
  text-align: center;
}

Screenshot.png
Screenshot.png309×380 15.5 KB