SScale Themedocs
FR

Step-by-step guide to create an effective homepage with Scale Theme. From the first impression to the last scroll, every section has a purpose.

Build a high-converting homepage

Your homepage is your store's window display. It's the first thing visitors see, and you have less than 3 seconds to convince them to stay. This guide walks you through building a homepage that turns visitors into customers.

ℹ️This guide assumes you've already completed the initial setup (colors, typography, header, footer). If not, start there first.

The ideal homepage structure

An effective homepage isn't a random stack of sections. It's a narrative journey that guides visitors from curiosity to purchase. Here's the structure we recommend:

1. HERO (Banner / Slideshow)         → First impression, value proposition
2. SOCIAL PROOF (Reviews Carousel)   → Build trust immediately
3. COLLECTIONS (Featured Collection) → Show star products
4. STORYTELLING (Image with Text)    → Tell the brand story
5. BENEFITS (Steps / Grid)           → Explain why you
6. BEST-SELLERS (Best Sellers)       → Enable discovery
7. TESTIMONIALS (Reviews)            → Reinforce trust
8. NEWSLETTER (Newsletter / Popup)   → Capture emails

Step 1: The Hero — First impression

The hero is THE most important section. It's what visitors see on arrival, before even scrolling. You have two main options:

The Banner section in Hero mode is the most versatile choice.

Recommended setup:

  1. Open the theme editor > Homepage
  2. Add a Banner section
  3. Configure:
  • Layout: Hero
  • Height: Full screen (for maximum impact)
  • Desktop image: High-quality lifestyle photo (min 1920x1080)
  • Mobile image: Portrait version of the same scene (750x1000)
  • Overlay: 30-40% (so text stays readable)
  • Content position: Center center (or Bottom left for editorial style)
  • Palette: Dark palette if image is light, or light palette if image is dark
  1. Add blocks:
  • Subheading: "NEW COLLECTION" (or your tagline)
  • Heading: Your main message in 4-6 words max
  • Text: A description sentence (optional)
  • Button: "Discover" / "Shop now" in Style 1
💡Your hero title should NOT be your store name. Use it to communicate your value proposition: "Natural skincare for radiant skin", "The essentials of casual style", "Technology at the service of your comfort".

Option B: Slideshow (for stores with multiple campaigns)

The Slideshow lets you display multiple messages in rotation.

Recommended setup:

  1. Add a Slideshow section
  2. Create 2-3 slides (no more — visitors rarely see beyond slide 2)
  3. Configure:
  • Height: Large or Full
  • Autoplay: On, 5 seconds
  • Transition: Fade (more elegant than Slide)
  • Pagination: Progress bars (create a sense of urgency)
⚠️Don't create more than 3 slides. Statistics show visitors rarely see beyond slide 2. Focus on your 2-3 most important messages.

Step 2: Instant Social Proof

Right after the hero, add social proof. The visitor has been intrigued by your hero, now they need trust.

  1. Add a Reviews Carousel section
  2. Configure:
  • Autoplay: 5 seconds
  • Visible cards: 3
  • Platform: Trustpilot or Google (if you have reviews)
  • Style: Minimal
  • Overall rating: Enabled
  • Palette: Secondary palette (light gray) to stand out from the hero
  1. Add 6-8 testimonials with:
  • Short text (2-3 sentences max)
  • Keywords in bold ("exceptional quality", "fast shipping")
  • First name + avatar
  • 4 or 5 stars

Step 3: Show the products

After the hook and trust, it's time to show your products. This is where conversion really begins.

  1. Add a Featured Collection section
  2. Configure:
  • Collection: Your main collection (best-sellers or new arrivals)
  • Products count: 4-8
  • Desktop columns: 4
  • Palette: Light palette (white background so products stand out)
  1. Add content blocks:
  • Heading: "Our best sellers" or "Most popular"
  • Button: "View all" linking to the full collection

Step 4: Tell your story

The visitor has seen your products. Now give them a reason to choose YOU over a competitor. This is storytelling time.

Image with Text

  1. Add an Image with Text section
  2. Configure:
  • Image: Lifestyle or behind-the-scenes photo
  • Position: Image first (image on left)
  • Curved edge: On, Medium intensity (premium touch)
  • Palette: Dark palette (for contrast with previous section)
  1. Add blocks:
  • Heading: "Our story" / "Why [your brand]"
  • Text: 3-4 sentences about your mission/values
  • Button: "Learn more" to your About page
💡Alternate palettes! If your Featured Collection is on white, put this Image with Text on dark. This contrast guides the eye and maintains visitor attention.

Step 5: Your advantages

Clearly explain why buy from you. What are your competitive advantages?

Steps section

  1. Add a Steps section
  2. Create 3-4 Step blocks:
  • Icon + title + short text
  • Ex: "Free shipping", "Natural ingredients", "Money-back guarantee", "24/7 Support"

Step 6: More products

After the advantages, show more products. The visitor is now convinced and wants to explore.

Best-Sellers

  1. Add a Best Sellers section
  2. Configure:
  • Count: 6-8 products
  • Style: Slider (to save vertical space)
  • Palette: Secondary palette (different from Featured Collection)

Step 7: Detailed testimonials

Near the end of the page, reinforce trust with more detailed testimonials than the earlier carousel.

Reviews Section

  1. Add a Reviews section
  2. Configure:
  • Mode: Grid or Masonry (more impactful than carousel)
  • Columns: 2-3
  • Palette: Dark palette

Step 8: Capture emails

Last section before the footer: capture emails for remarketing.

Newsletter

  1. Add a Newsletter section
  2. Configure:
  • Palette: Accent (to draw attention)
  • Layout: With image (more engaging)
  1. Blocks:
  • Heading: "Join the community" or "-10% on your first order"
  • Text: "Subscribe to receive our exclusive offers"

, attractive title, email field and subscribe button)

💡Offer something in exchange for the email. A discount code (-10%), a free guide, or early access to sales works much better than "Subscribe to our newsletter".

General tips

Alternate palettes

The most common mistake is using the same palette everywhere. Alternate between your palettes to create visual rhythm:

Hero       → Dark palette (impact)
Reviews    → Gray palette (neutral)
Collection → Light palette (products stand out)
Story      → Dark palette (contrast)
Steps      → Light palette (readable)
Best Sell  → Gray palette (variation)
Reviews    → Dark palette (trust)
Newsletter → Accent palette (action)

Use SVG separators

Between sections, SVG separators add a professional design touch. A wave between the hero and reviews, a curve between products and storytelling...

Test on mobile

Over 70% of e-commerce traffic is mobile. Systematically check each section on mobile in the Shopify editor (mobile button at top of preview).

Don't overload

8-10 sections is a good maximum. Beyond that, the page becomes too long and visitors drop off. Better to have 8 excellent sections than 15 mediocre ones.

Final checklist

Before publishing, verify:

  • [ ] The hero has a clear message and visible CTA
  • [ ] Images are optimized (dedicated desktop + mobile)
  • [ ] Palettes alternate between sections
  • [ ] Content is real (no "Lorem ipsum")
  • [ ] Page loads in under 3 seconds
  • [ ] Each section has a clear purpose
  • [ ] The main CTA is visible without scrolling (above the fold)
  • [ ] The page works equally well on mobile and desktop
PreviousGlobal SettingsNextOptimize product page