Start Strong
Sell Smart
Manage with Ease
Market to Success

Designing Store Pages with Theme Editor Components (OS 3.0 Themes)

In the Theme Editor for OS 3.0 themes, components are the building blocks you use to design every page of your store, from your homepage to your product and collection pages. Each page is assembled from components, and many components can be further customized with nested Blocks, giving you a consistent, modular way to build and adjust your storefront's layout.

This guide explains how store pages are structured, how components differ from one another (Universal vs. Page-Exclusive), where to find full settings for each, and how to use editor actions like copying components across pages.

Before You Start: Confirm You’re Using the Correct Tool

This article covers components within the Desktop Theme Editor (accessed via Online Store > Design). If you are looking for equivalent design settings in the Shopper App, please refer to help articles in "App Design" instead.

 

 

Understanding Components and Blocks in the Theme Editor

Each store page is built from components, modules you add through the Add component button in the left sidebar, such as a banner, a product carousel, or a breadcrumb. Most components can contain one or more blocks, which are smaller elements nested inside a component and added through the Add content icon (for example, a title, a rich text field, or a purchase button). Blocks can be nested up to several levels deep, allowing for more detailed layouts within a single component.
image.png

Notes:

  • The Theme Editor sidebar is organized into three fixed areas, from top to bottom: header, Template, and footer. You can add both components (via Add component icon) and blocks (via Add content icon) within any of these three areas.
  • The Template area typically offers the richest set of components and blocks, since it represents your page’s main content, everything on the page besides the header and footer.
  • Component and block settings panels vary in position depending on your screen ratio; this article describes what you’ll see, not where it appears on screen.

 

 

Universal vs. Page-Exclusive Components

Components fall into two categories:

  • Universal Components: Can be added to any page type (for example, Breadcrumbs). Their general settings are documented in this article; if a page has special behavior for a universal component, that page’s dedicated article will note it with a cross-reference back here.
  • Page-Exclusive Components: Are only available on specific page types (for example, Purchase buttons on the product detail page). This article introduces what they are and where they live; full configuration steps and theme availability are documented in the corresponding page article.

 

 

Configuring Universal Components

SHOPLINE OS 3.0 themes currently support the following universal

components, each of which can be added to any page:

Component  Description
Breadcrumbs Displays the page hierarchy a customer followed, with every node except the current page clickable.
Before & After Displays two images side by side for visual comparison.
Blogs Displays a list of blog articles.
Collage Arranges multiple images in a collage-style grid layout.
Collection list Displays multiple product collections.
Contact form A form that lets customers send inquiries directly from the page.
Countdown timer Displays a countdown to a specific date or promotion end time.
Custom page Displays a page title and image for custom page content.
Custom section Lets you build a fully custom layout using code. See Notes below.
Custom SLINE Lets you insert custom SLINE code for advanced layout customization.
Discount promotion Highlights a discount or promotional offer.
Email subscription A newsletter signup form.
FAQS Displays a list of frequently asked questions in a collapsible format.
Featured collection Highlights a specific product collection.
Featured product Highlights a specific product.
Image banner A full-width image banner.
Image-text list Displays a list combining images and text in columns.
Image-text module Pairs a full-width image with text and an optional button.
Ingredient display Displays a list of product ingredients, each with its own image and description, commonly used for beauty, skincare, or food products.
Logo list Displays a row of brand or partner logos.
Map Displays a map, such as a store location.
Media promotion products Displays products through media tiles (image or video), paired with product info and a call-to-action button.
Multilevel filter Provides filter options with multiple levels or categories.
Recently viewed products Displays products the customer recently viewed.
Recommended products Displays a curated or algorithm-based list of recommended products.
Rich text Free-form text content with rich formatting.
Shoppable image An image with clickable, shoppable product hotspots.
Shopping video Video content with shoppable product elements.
Slideshow A rotating set of images or slides.
Specialty product category Highlights a curated group of product collections under a specialty category.
Split slideshow A slideshow with a split-screen layout.
Stitched image-text module Combines two image-and-text blocks side by side, each within its own Content Container, useful for showcasing two products or promotions together with a title and button.
Switch image on hover Swaps an image when hovered, often to reveal an alternate product view.
Video Displays a video.

Notes:

The following sections walk through step-by-step setup for two of the most commonly used universal components, Breadcrumbs and Content containers.

 

Using Breadcrumbs for Page Navigation

Breadcrumbs display the page hierarchy a customer follows (for example, Home / Category / Product), with every node except the current page clickable.

To add breadcrumbs to a page:

  1. In the Theme Editor, navigate to your desired page.
  2. Click Add component, go to the Theme tab, and select Breadcrumbs.
    image.png
  3. Set your preferred color scheme, choose whether to enable it on desktop and/or mobile, and configure its layout as needed.
  4. Click Save to apply your changes.

Notes: 

  • Two legacy breadcrumb elements still exist alongside the new universal Breadcrumbs block: 
    • The Multi-level category breadcrumbs (Product detail page only, requires merchant whitelist and multi-level category data).
      image.png
    • A hardcoded "Home" node on the Collection list Page, which can be hidden but not removed under Collection header > Collection image > Hide breadcrumb.
      image.png
  • Theme Availability: This feature is available on all OS 3.0 themes.

 

Using Content Containers for Custom Layouts

An intermediate layout layer that lets you group blocks (such as Title, Price, or Quantity selector) and arrange them horizontally, rather than in a single vertical stack.

To add a content container:

  1. Within a component, click Add content.
  2. Select Content containers under the Theme tab.
  3. Add the blocks you want to arrange, then use the container’s layout controls to set their direction and alignment.
  4. Click Save to apply your changes.

Notes: 

  • To move a Content container, select its parent block and apply alignment there, aligning the container directly does not change its position.
  • This control only affects the blocks placed inside the Content container, it does not override the overall vertical arrangement of the page template.
  • Theme Availability: This feature is supported on all official OS 3.0 free themes except the Bottle theme.

 

 

Reusing Components Across Pages

You can duplicate a component, along with all its customized content and settings, and paste it onto a different page template. This removes the need to manually rebuild identical banners, image blocks, or promotional areas across the Home page, Collection pages, or Blog posts.

To reuse a component on another page:

  1. In the Theme Editor, locate the component you want to reuse in the left sidebar.
  2. Click the three-dot icon (More actions) and select Copy to clipboard.
    image.png
  3. Navigate to the target page, click the three-dot icon on any existing component, and select Paste below.
    image.png
  4. Click Save.

Notes:

  • Components that are core to a specific page template, such as Product or Recommended products on the Product detail page,  cannot be copied.
  • Each page supports up to 25 components.
  • Copied content is stored in the editor’s memory only and is cleared when you close the Theme Editor.
  • Theme Availability: This feature is supported on all official OS 3.0 free themes except the Bottle theme. It is not supported on third-party paid themes.