Designing Your Home Page in the Theme Editor (OS 3.0 Themes)

Your homepage is the main landing page customers see when they first visit your online store. In the Theme Editor for OS 3.0 themes, your homepage it's made up of individual components, such as banners, rich text, and product grids, that you can add, remove, and rearrange to build the layout you want. 

This guide explains how to access the Home page in the Theme Editor, add and arrange components, and save and publish your changes.

Navigating to the Home Page in the Theme Editor

To open the Home page in the Theme Editor:

1. From your SHOPLINE admin panel, go to Online Store > Design, then click the Design button on the OS 3.0 theme you want to edit.
2. In the top toolbar, confirm that the Home page is selected in the page selector.

Understanding the Homepage as a Component Canvas

Your homepage in the Theme Editor works as a canvas made up of components, such as banners, rich text, and product grids, that you can add, remove, and reorder freely. Most themes start with a default set of components already in place, such as a hero banner and an introductory rich text component, which you can keep, edit, or replace.

The header and footer areas shown alongside your homepage apply across your entire store and are covered separately in "Designing Header & Footer in the Theme Editor (OS 3.0 Themes)". The components you add and arrange on the Home page itself only affect your homepage.

Adding and Arranging Components on Your Homepage

To add, arrange, and publish components on your homepage:

1. In the left sidebar, click Add component.
2. Browse the list of available components and select the one you want to add. 
3. Click the component to open its settings panel and configure its content.
4. Some components support Add content to insert additional blocks inside them, such as an extra slide in a slideshow.
5. Drag and drop components in the sidebar to reorder them on the page.
6. Click Save to store your changes as a draft without affecting your live storefront.
7. Click Publish to apply your changes to your live storefront immediately.

Common Homepage Components and Where to Configure Them

Your homepage supports dozens of components, but a few are especially common for showcasing products and driving engagement. This section highlights the components merchants use most often, along with where to find their storefront-wide design settings.

Showcasing Products on Your Homepage

Many merchants use the Featured collection, Recommended products, and Featured product components to introduce their products to customers right on the homepage.

• Featured collection: lets you highlight a specific collection — such as New Arrivals or Best Sellers — in a dedicated product grid, complete with a title and an optional set of tabs if you want to feature more than one collection at once.
• Recommended products: automatically surfaces product recommendations to customers, so you can showcase relevant items without manually curating a specific collection yourself.
• Featured product: puts a single product front and center, ideal for spotlighting a new launch or a bestseller, pairing product imagery with a call-to-action button.

Adding Interactive Product Displays to Your Homepage

Shoppable image and Shopping video: let customers discover and purchase products directly from visual content, without leaving the homepage.

• Shoppable image: lets you tag one or more products directly on an image as clickable hotspots, so customers can explore product details without leaving your homepage.
• Shopping video: works the same way for video content — customers can click on product cards that appear alongside the video to view details or add items to their cart while watching.