Homepage Template

The homepage is the first page visitors see when they visit your store. This template lets you build a custom homepage by adding and arranging different sections.

How to Edit Your Homepage

  1. Go to Online Store > Themes in your Shopify admin
  2. Click Customize on your active theme
  3. The homepage template will open automatically
  4. You'll see all the sections currently on your homepage

What Sections Can You Add?

You can add any of these sections to your homepage:

Hero Sections

  • Slideshow - Full-width image or video carousel with text and buttons
  • Hero - Large banner section with image and call-to-action

Content Sections

  • Image with Text - Side-by-side image and text content
  • Rich Text - Flexible text content with icons, headings, and buttons
  • Video - Embed videos from YouTube, Vimeo, or upload directly
  • Content Spotlight - Feature highlights with icons

Product Sections

  • Featured Product - Showcase a specific product
  • Product Spotlight - Highlight a product with features
  • Related Products - Display related or recommended products

Collection Sections

  • Featured Collection - Showcase a specific collection
  • Collections Grid - Custom image tiles in an asymmetric grid layout
  • Collections Tab - Tabbed interface showing multiple collections
  • Collection List - Grid of collection cards

Gallery Sections

  • Gallery - Simple image gallery
  • Masonry Gallery - Pinterest-style image grid
  • Image Accordion - Expandable image panels

Utility Sections

  • Icon with Text - Grid of icons with text (e.g., shipping, support, payment)
  • Newsletter Signup - Email subscription form
  • Testimonials - Customer reviews and ratings
  • FAQ - Frequently asked questions
  • Location - Store location with map and contact info

Default Homepage Structure

Your homepage typically includes these sections in this order:

  1. Slideshow - Eye-catching hero images
  2. Icon with Text - Trust badges (shipping, security, support)
  3. Collections Tab - Featured product collections
  4. Collections Grid - Visual collection tiles
  5. Image Accordion - Style categories
  6. Location - Store information
  7. FAQ - Common questions
  8. Testimonials - Customer reviews

How to Customize Your Homepage

Adding a Section

  1. In the theme editor, scroll to the bottom of your homepage
  2. Click Add section
  3. Choose a section from the list
  4. The section will be added at the bottom

Reordering Sections

  1. Click on any section in the left sidebar
  2. Use the ⋮⋮ (six dots) icon to drag and drop
  3. Move sections up or down to change their order

Removing a Section

  1. Click on the section you want to remove
  2. Scroll to the bottom of the section settings
  3. Click Remove section

Editing Section Content

  1. Click on any section in the left sidebar
  2. Edit the settings in the right panel
  3. Changes appear instantly in the preview

Common Homepage Layouts

Simple Homepage

  • Slideshow
  • Featured Collection
  • Newsletter Signup

Product-Focused Homepage

  • Hero with featured product
  • Collections Tab (multiple collections)
  • Featured Products
  • Testimonials

Content-Rich Homepage

  • Slideshow
  • Image with Text (multiple)
  • Collections Grid
  • FAQ
  • Location

Visual Homepage

  • Slideshow
  • Image Accordion
  • Masonry Gallery
  • Collections Grid

Tips for a Great Homepage

✅ Do's

  • Start with a strong hero - Use a slideshow or hero section to grab attention
  • Show your best products - Feature your most popular collections early
  • Build trust - Add testimonials, trust badges, or FAQ sections
  • Keep it focused - Don't add too many sections (5-8 is usually enough)
  • Make it mobile-friendly - Preview on mobile and ensure sections look good

❌ Don'ts

  • Don't overload - Too many sections can overwhelm visitors
  • Don't skip the hero - Always start with a compelling first section
  • Don't forget mobile - Check how sections look on phones and tablets
  • Don't ignore loading speed - Too many images or videos can slow down your site

Section-Specific Tips

Slideshow

  • Use 2-4 slides maximum
  • Keep text short and impactful
  • Use high-quality images (at least 1920px wide)
  • Enable autoplay for better engagement

Collections Tab

  • Show 3-5 collections maximum
  • Use clear, descriptive tab names
  • Display 4-6 products per tab

Collections Grid

  • Use consistent image sizes for better layout
  • Add clear call-to-action buttons
  • Mix different layout options (2-1-1, 1-1-2) for visual interest

Icon with Text

  • Use 3-4 icons for best balance
  • Keep text short (one line)
  • Choose icons that match your brand

Previewing Your Homepage

  1. Use the Preview button in the theme editor
  2. Test on different devices using the device icons
  3. Check how sections look on mobile, tablet, and desktop
  4. Make adjustments as needed

Saving Your Changes

  1. Click Save in the top-right corner
  2. Your changes are live immediately
  3. Use Preview to see changes before saving if needed

Need Help?

  • Each section has its own settings and help text
  • Hover over setting labels for more information
  • Check the section-specific documentation for detailed guides

Next Steps: