Storefront Pages

Storefront Pages let you design custom homepage layouts using the same powerful page builder you use for other content.

What are Storefront Pages?

Your storefront page is the first page customers see when they visit your store. It's your homepage, and it's critical for making a strong first impression.

With Storefront Pages, you can:

• Design custom homepage layouts using the page builder
• Showcase featured products, promotions, and brand content
• Build engaging landing pages without coding
• Update your homepage quickly and easily

Unlike regular pages, storefront pages are specifically designed to be your store's homepage and automatically appear at the root URL.

Accessing Storefront Pages

1. From your admin, go to Design > Storefront (in the Content Management section)
2. The page builder opens for your storefront page
3. Design your layout using page builder components
4. Click Save when finished

Building your storefront

Storefront pages use the same page builder system as regular content pages, giving you access to all available components and layout options.

Page builder components

Available components include:

Content blocks:

• Hero sections - Large banner images with headlines and call-to-action buttons
• Text blocks - Headings, paragraphs, and formatted content
• Image galleries - Showcase your products or brand visually
• Buttons - Direct customers to key pages or categories

Product displays:

• Product grids - Display featured products, best sellers, or new arrivals
• Category showcases - Highlight specific product categories
• Product carousels - Scrollable product displays

Layout elements:

• Spacers - Control vertical spacing between sections
• Dividers - Visual separation between content areas
• Multi-column layouts - Organize content side-by-side

Design strategies

Above the fold:

The first thing customers see should grab attention:

• Large hero image with your key value proposition
• Clear call-to-action button (e.g., "Shop Now")
• Brief, compelling headline about your store or current promotion

Product showcase:

Help customers discover your offerings:

• Featured products or best sellers
• New arrivals or seasonal collections
• Popular categories with images

Trust and credibility:

Build confidence with new visitors:

• Brand story or mission statement
• Customer testimonials or reviews
• Trust badges (free shipping, returns, guarantees)

Calls to action:

Guide customers to the next step:

• "Shop [Category]" buttons throughout the page
• Newsletter signup
• Special offer or current promotion

Responsive design

The page builder automatically creates responsive layouts that work on all devices:

• Desktop, tablet, and mobile automatically supported
• Components stack vertically on smaller screens
• Images scale appropriately
• No need to design separate mobile layouts

Always preview your storefront on different screen sizes to ensure a great experience.

Editing and publishing

Making changes

To update your storefront:

1. Navigate to the storefront editor
2. Click on components to edit their content
3. Add new components with the + button or "Add Component"
4. Drag components to reorder
5. Delete components you no longer need
6. Click Save when finished

Changes are published immediately when you save.

Previewing changes

Before saving, open your website in a separate browser tab to check how your changes look on desktop and mobile. Test that all links and buttons work correctly.

Best practices

Homepage design

Clear purpose:

• Make it immediately obvious what your store sells
• Lead with your strongest value proposition
• Use high-quality hero images that represent your brand

Strategic layout:

• Most important content at the top
• Logical flow from section to section
• Clear path for visitors to browse products

Visual hierarchy:

• Use headings, images, and whitespace effectively
• Guide the eye through the page
• Make CTAs stand out

Performance:

• Don't overload with too many components
• Optimize images before uploading to media library
• Test page load speed regularly

Content strategy

Keep it focused:

• Don't try to show everything on the homepage
• Highlight key categories or products
• Link to deeper content rather than cramming it all in

Update regularly:

• Refresh featured products seasonally
• Promote current sales or campaigns
• Keep content relevant to the current time of year

Test and iterate:

• Monitor homepage performance in analytics
• See where visitors click and what they ignore
• Adjust layout based on real customer behavior

Permissions

Storefront Pages require the Content Management permission. Users without this permission will not see the Storefront menu item or be able to edit storefront pages.

Differences from regular pages

While storefront pages use the same page builder as regular pages, there are key differences:

Use storefront pages for your homepage and regular pages for About, Contact, FAQ, and other content.

Troubleshooting

"Page not found" on storefront

Problem: Storefront URL shows 404 error.

Solution:

1. Access the storefront editor from your admin
2. Add at least one component to the page
3. Save the page
4. Refresh your website

Empty storefront pages may not render correctly until content is added.

Changes not appearing

Problem: Saved changes don't show on the website.

Solution:

1. Hard-refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
2. Clear your browser cache
3. Verify you clicked Save in the editor

Next steps

• Learn the page builder to master component usage
• Upload images for your storefront design
• Create product categories to feature on your homepage
• Configure navigation menus to link to your storefront
• Set up branding to ensure consistent styling