Header

Adding The Section To Your Store

1. Open your theme editor
2. Click on “Add Section”
3. Find and add the “Header” Section from the block library

Styling The Section

The Header is the main navigation and trust-building area that sits at the top of your store, guiding customers through their shopping journey.

It can include menus, a search bar, featured products or collections, and even review highlights, all designed to make discovery effortless.

A well-optimized header improves usability, keeps visitors oriented, and ensures your key pages and offers are always within easy reach, helping boost engagement and conversions.

This section explains to you the settings involved in styling your header and all blocks inside it.

• Enable Search
  
  Activates the search bar.
  
  

• Search Only Products
  
  Limits search results to products (instead of blog posts, info pages, etc.).
  
  ? Recommended: Keep it enabled for faster product discovery.
  
  

The Header section supports four block types to fill your carousel with:

This block highlights featured products in a sliding carousel.

• Title
  
  This lets you add in the title to your products. Example: Bestsellers, Collections.
  
  

• Products
  
  List products you want to show (e.g., Skin Supplements, The Collection Snowboard).
  
  

• Show Review Stars
  
  Displays product rating stars.
  
  

  • Star Count – Example: 5 stars.
    
    

  • Review Text – Example: 10 reviews.
    
    

? Great for highlighting best-selling items or promotions right in the header.

This block allows you to highlight a collection (group of products).

• Collections
  
  Choose which collection to feature (e.g., Bestsellers).
  
  

• Collection Styling
  
  Options for how products are displayed.
  
  

  • Open Product / No Product → Controls whether the featured collection shows products directly or just links to the collection page.
    
    

? Useful for stores with multiple categories, giving quick shortcuts.

This block contains your navigation menu.

• Menu
  
  Usually your Main menu.
  
  ? Best practice: Keep it short (4–6 links) and clear (Shop, About, Contact, etc.).
  
  

This block adds social proof by showing a customer testimonial.

• Testimonial Text
  
  This allows you to add testimonial text to this block. Example: “Have been buying these for years! Really like the bigger size of the boxes now! Appreciate it Joe V. ?”.
  
  

• Customer Photo
  
  Upload a customer picture for authenticity.
  
  

• Customer Name
  
  Add your customer name. Example: Michael.
  
  

• Verified Buyer Badge
  
  Adds more credibility to your testimonial text..
  
  

• Star Rating (0–5)
  
  Add star rating to your customers for a more powerful effect. Example: 4 stars.
  
  

These are the controls for styling the individual cards

• Container Styling (Card)
  
  You have three options to choose from: Card, No Card, Shadow.
  
  

  • Card: Each image or gallery item is placed inside a boxed card with a defined background. Useful when you want separation between items or to make each image stand out clearly.
    
    

  • No Card: Displays images without any background box or border, they sit directly on the page background. Best for minimalist or lifestyle-style galleries where visuals flow naturally with the page.
    
    

  • Shadow: Adds a soft drop shadow beneath each item, giving the appearance of gentle elevation. Ideal for making images pop off the page while still keeping a sleek layout.
    
    

• Box Shadow (Offset, Blur, Spread, Color)
  
  Adds depth to cards for a modern, layered effect.
  
  

• Card Border & Border Color
  
  Defines card outlines (default is none).
  
  

• Container Corner Radius
  Example: 10px, softens card edges.
  
  

? Combine testimonial + review stars + verified badge to instantly build trust.

• Keep the search bar visible. It boosts conversions by helping visitors find products fast.
  
  

• Show top products in Slider. It creates excitement around bestsellers.
  
  

• Feature 1–2 collections max. Avoids clutter.
  
  

• Use one authentic review with a real name, photo, and star rating.
  
  

• Don’t overload the header with too much content, keep it clean.
  
  

Q: Do I need both Slider and Collection in the Header?
A: Not always. If your store is small, you can choose only one (Slider OR Collection).

Q: Should I include reviews in the header?
A: Yes, if space allows, it builds instant trust before visitors scroll.

Q: Can the menu be customized per device?
A: Yes, menus often adapt (hamburger menu on mobile).

• Search not working? Ensure "Search only products" is enabled.
  
  

• Slider not showing products? Check product visibility and if they are marked as active.
  
  

• Does the review card look unaesthetic? Adjust shadow, padding, and border radius to fix styling
  
  

• Menu links missing? Verify they’re added in your Main menu in Shopify admin.
  
  

• Search bar enabled + product-only search.
  
  

• Bestseller Slider showing key products with stars.
  
  

• Collection block pointing to correct collection.
  
  

• Clean, simple navigation menu.
  
  

• Review block with text, customer photo, verified badge, and stars.
  
  

• Card styling looks balanced on desktop & mobile.