E2C Store Docs
Store Customization

Home Page

Customize your store's homepage with hero sections, featured products, and product displays.

Home Page Customization

Your homepage is the first impression customers get of your store. E2C Store provides powerful tools to create an engaging homepage that drives sales and showcases your products effectively.

Accessing Home Page Settings

Navigate to Customize Store in your admin dashboard and select the Home Page tab.

You can preview your homepage at any time by clicking the "Take a look at your Homepage" link at the top of the page.

Hero Section

The hero section is the prominent area at the top of your homepage. You have two options for creating your hero section:

The modern Hero Section Builder provides a drag-and-drop interface for creating custom hero sections without coding.

Access the Hero Builder

Click Open Builder (or Edit Builder if already active) in the Hero Section Builder card.

Design Your Hero Section

Use the visual builder to:

  • Add and arrange content blocks
  • Upload images and backgrounds
  • Add text, headings, and buttons
  • Position elements precisely
  • Preview on desktop and mobile

The builder provides full creative control over your hero section layout and design.

Publish Your Design

Once satisfied with your design, click Save to make it live on your store.

The Hero Builder is the most flexible option and gives you complete control over your homepage hero section design.

If you prefer a traditional carousel approach, you can use the legacy carousel editor. This option displays two rotating images with customizable text.

If you're using the Hero Builder, the carousel settings will be hidden. Click Use Legacy Editor to switch back to the carousel approach.

Image Requirements:

  • Format: JPG, PNG, or WebP
  • Recommended size: 1920px × 950px
  • Maximum file size: 5MB
  • Aspect ratio: Wide landscape format works best

Upload Methods:

  1. Upload New Image: Click Upload new image to upload from your computer
  2. Choose from Library: Click Choose image to select from pre-curated high-quality images

The image library features royalty-free images from Pixabay, perfect for testing or if you don't have your own images ready.

Repeat the process for the second carousel image. Having two images creates a rotating carousel effect that keeps your homepage dynamic.

Customize Carousel 1 Text

Add text that will display over Carousel Image 1. This text animates onto the screen, creating an engaging introduction to your store.

The text color for carousel text is controlled in the Other Settings tab under "Carousel Text Colour".

Customize Carousel 2 Text

Add text for Carousel Image 2. You can use different messaging to highlight various aspects of your store or promote specific products.

  • High-quality images: Use professional, high-resolution images
  • Clear messaging: Keep text concise and impactful
  • Contrasting colors: Ensure text is readable against your background images
  • Mobile optimization: Test how images look on mobile devices
  • Update regularly: Change images seasonally or for promotions

Additional Homepage Sections

Below your hero section, you can enable optional sections to showcase your products.

Handpick specific products to highlight on your homepage.

Toggle Show featured products to enable this section.

Customize Section Subheading

Enter a custom subheading for this section (e.g., "Check out our featured products").

Select Products

Click Select Products to open the product selection modal.

In the selection modal:

  1. Filter by category: Use the dropdown to filter products by category (optional)
  2. Select products: Click products from the "Available Products" list to add them
  3. Reorder selection: Drag and drop products in the "Selected Products" list to arrange their display order
  4. Select 1-6 products: You can feature between 1 and 6 products

The counter shows how many products you've selected (0/6). Once you reach 6, you can't add more until you remove one.

Save Your Selection

Click Save Selection to apply your featured products to your homepage.

Featured Products Strategy:

  • Feature your best-selling items
  • Highlight new arrivals
  • Showcase seasonal or promotional products
  • Feature products with high profit margins
  • Rotate featured products regularly to keep homepage fresh

New Products

Automatically display your most recently added products.

Enable New Products

Toggle Show new products to enable this section.

Customize Section Subheading

Enter a custom subheading (e.g., "Check out our lastest products").

This section automatically updates when you add new products—no manual updates needed!

When to Use New Products:

  • You regularly add new inventory
  • You want to encourage repeat visits
  • Your customers are interested in discovering new items
  • You have a steady flow of new products

Best-Selling Products

Automatically display your top-performing products based on sales data.

Enable Best-Selling Products

Toggle Show best-selling products to enable this section.

Customize Section Subheading

Enter a custom subheading (e.g., "Check out our best-selling products").

If you're just starting out and don't have sales yet, this section will display your products in no specific order.

Benefits of Best-Selling Products:

  • Social proof: Shows customers what others are buying
  • Builds trust: Popular products reduce purchase anxiety
  • Automatic curation: No manual selection needed
  • Data-driven: Based on actual sales performance

For optimal conversions, consider this layout:

  1. Hero Section (Hero Builder or Carousel) - Immediately captures attention
  2. Featured Products - Handpicked items you want to promote
  3. New Products - Keeps content fresh for returning visitors
  4. Best Sellers - Leverages social proof

You don't need to enable all sections. Choose the combination that works best for your store and inventory size.

Homepage Tips & Best Practices

Design Tips

  • Above the fold: Your hero section should immediately communicate what you sell
  • Clear navigation: Make it easy to browse products from the homepage
  • Visual hierarchy: Guide visitors' eyes to the most important content first
  • White space: Don't overcrowd—give elements room to breathe

Content Tips

  • Value proposition: Clearly state why customers should buy from you
  • Call-to-action: Tell visitors what to do next ("Shop Now", "Browse Products")
  • Trust signals: Consider mentioning free shipping, returns, or guarantees
  • Update regularly: Keep your homepage fresh with seasonal changes

Performance Tips

  • Optimize images: Compress images before uploading to improve load speed
  • Limit sections: Only enable sections you'll actively maintain
  • Mobile-first: Over 60% of shoppers browse on mobile—test your homepage on phones
  • Fast loading: A 1-second delay in page load time can reduce conversions by 7%

Mobile Experience

Your homepage automatically adapts to mobile devices, but consider:

  • Image composition: Important elements should be centered in images
  • Text length: Keep carousel text shorter for mobile readability
  • Touch targets: Buttons and links are sized appropriately for touch
  • Vertical scrolling: Mobile users scroll more—sections stack vertically

Always preview your homepage on actual mobile devices, not just browser developer tools. Real devices often render differently.

Common Questions

  • Use Hero Builder if: You want maximum design flexibility and custom layouts
  • Use Carousel if: You prefer simplicity and just need rotating images with text

"How many sections should I enable?"

Start with 2-3 sections and evaluate performance. Too many sections can overwhelm visitors and slow page load times.

"How often should I update my homepage?"

  • Hero section: Update monthly or for major promotions
  • Featured products: Update weekly or biweekly
  • Carousel images: Change seasonally or for holiday themes

Ensure you have active products to select. Products must be published and available for purchase to appear in the selection modal.

Troubleshooting

Images Not Displaying

  • Verify file format (JPG, PNG, or WebP)
  • Check file size (under 5MB)
  • Clear browser cache
  • Try a different browser

Text Not Visible on Carousel

  • Adjust the "Carousel Text Colour" in Other Settings tab
  • Choose a color that contrasts with your carousel images
  • Consider adding a semi-transparent overlay to images for better text visibility

Hero Builder Not Loading

  • Check browser console for JavaScript errors
  • Ensure you have a stable internet connection
  • Try disabling browser extensions
  • Contact support if issue persists

What's Next?

With your homepage configured:

  1. Customize shop pages to brand your product browsing experience
  2. Set up your About Us page to tell your story
  3. Add your products to populate your homepage sections
  4. Configure branding settings to match your brand colors

Your homepage is your digital storefront—make it welcoming!

Managing Categories

Edit, organize, and manage your product categories on E2C Store.

Hero Builder Overview

Learn about the Hero Builder tool for creating custom hero sections for your store.

On this page

Home Page CustomizationAccessing Home Page SettingsHero SectionHero Section Builder (Recommended)Access the Hero BuilderDesign Your Hero SectionPublish Your DesignLegacy Carousel EditorSetting Up Carousel ImagesUpload Carousel Image 1Upload Carousel Image 2Customize Carousel 1 TextCustomize Carousel 2 TextCarousel Best PracticesAdditional Homepage SectionsFeatured ProductsEnable Featured ProductsCustomize Section SubheadingSelect ProductsSave Your SelectionNew ProductsEnable New ProductsCustomize Section SubheadingBest-Selling ProductsEnable Best-Selling ProductsCustomize Section SubheadingRecommended Homepage StructureHomepage Tips & Best PracticesDesign TipsContent TipsPerformance TipsMobile ExperienceCommon Questions"Should I use Hero Builder or Carousel?""How many sections should I enable?""How often should I update my homepage?""My featured products won't save"TroubleshootingImages Not DisplayingText Not Visible on CarouselHero Builder Not LoadingWhat's Next?