Homepage

The homepage is the first thing customers see when they visit your store. It is built from sections — modular blocks of content that you can add, remove, and reorder using the Layout Editor in your admin panel.

How the Homepage Works

Unlike a static page, the homepage is assembled from individual sections that you configure through Admin > Layout Editor. Each section type serves a specific purpose — showcasing your best products, highlighting categories, or encouraging newsletter signups. You drag and drop them into the order you want, and your homepage updates instantly.

TIP

You do not need to edit any code to change your homepage. Everything is managed through the visual Layout Editor in your admin panel. See Layout Editor for a full guide.

Default Homepage Sections

When you first install Shop Craft, your homepage comes with these sections in this order:

Hero Banner

A large, eye-catching banner at the top of your homepage. This is your primary opportunity to make a strong first impression.

• Heading text — Your main message (e.g., "Welcome to Our Store")
• Subtitle text — Supporting text below the heading
• Call-to-action button — A button that links to any page (e.g., "Shop Now" linking to /categories)
• Background image — A full-width image behind the text

The hero banner can be customized to match your brand. Some themes offer different hero styles — for example, a text-focused hero with no background image, or a split layout with the image on one side.

Featured Categories

A grid of your top-level product categories with images. This helps customers quickly navigate to the type of products they are looking for.

• Shows category images and names
• Clicking a category takes the customer to that category's product listing

Featured Products

A row of products that are currently on sale. This section automatically pulls products that have a sale price set, helping you promote discounted items.

• Shows product image, name, original price (with strikethrough), and sale price
• Customers can click any product to view its detail page

New Arrivals

A row of your most recently added products. This keeps your homepage feeling fresh and gives returning customers a reason to check back.

• Automatically displays the newest products in your catalog
• Shows product image, name, and price

Newsletter

An email signup section where customers can subscribe to your newsletter or updates.

• Heading and description text are customizable
• Includes an email input field and subscribe button

Customizing Sections

Each section has its own settings that you can adjust. For example:

• Hero banner: Change the heading, subtitle, button text, button link, and background image
• Featured categories/products: The number of items displayed
• Newsletter: The heading and description text

To customize a section, go to Admin > Layout Editor, click on the section you want to edit, and adjust its settings in the sidebar panel.

Adding and Removing Sections

You are not limited to the default sections. In the Layout Editor, you can:

• Add sections — Choose from available section types and add them to your homepage
• Remove sections — Delete sections you do not need
• Reorder sections — Drag sections up or down to change their position on the page

WARNING

Removing a section deletes its configuration. If you add it back later, you will need to configure it again.

Header

The header appears at the top of every page on your storefront (not just the homepage). It contains:

• Store logo — Your brand logo (uploaded in Admin > Settings > Store)
• Navigation links — Links to your product categories and other important pages
• Search bar — Lets customers search for products (see Browsing & Search for details)
• Cart icon — Shows the number of items in the cart, with a link to the cart page
• Account icon — Opens the login/register modal, or shows account options if logged in
• Dark mode toggle — Lets customers switch between light and dark themes
• Announcement bar — An optional colored bar above the header for promotions or notices (configurable in Layout Editor)

Sticky Header

Depending on your theme settings, the header can "stick" to the top of the screen as customers scroll down, keeping navigation always accessible.

Footer

The footer appears at the bottom of every page. It is fully customizable through the Layout Editor and typically includes:

• Link columns — Multiple columns of links (e.g., "Quick Links," "Customer Service," "About Us") with custom titles and URLs
• Social media icons — Links to your social media profiles (Facebook, Instagram, Twitter, YouTube, etc.)
• Payment method icons — Visual indicators of the payment methods you accept
• Copyright text — Your store's copyright notice

You can add, remove, and rename footer columns, and control which social media and payment icons appear — all from the Layout Editor.

Theme-Specific Sections

Different themes may offer unique section styles. For example:

• The Boutique theme features an editorial-style hero with overlay text and a two-column product grid
• The Modern Minimal theme uses a text-focused hero, compact header, and product-first layout

When you switch themes, the section content (your text, images, and settings) is preserved, but the visual presentation may change to match the new theme's design language.

Next Steps

• Browsing & Search — Learn how customers find and view your products
• Cart & Checkout — Understand the purchasing process
• Layout Editor — Full guide to customizing your homepage, header, and footer