Designing Store Pages with Theme Editor Components (OS 3.0 Themes) – SHOPLINE Help Center

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.

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:

Some components, such as Apps, are added through a separate Apps tab in the component picker rather than the Theme tab, and let you insert content from your installed apps. For details, see "Integrating Apps into OS 3.0 Themes."
For step-by-step setup of a custom layout using components, see "Customizing Page Layouts with Custom Sections and Content Containers (OS 3.0 Themes Only)."
For recommended image dimensions across these components, see "Recommended Store Image Sizes (OS 3.0 Themes)."

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

Setting Up a Slideshow and Adding Image Links

Use the Slideshow component to display multiple banner images and customize their display, content, and links. When customers click an image with a link, they can be redirected to another store page, an external URL, or a specified phone number.

Note: Adding links to slideshow images is supported by all SHOPLINE official free OS 3.0 themes except Bottle.

Follow these steps to set up a slideshow:

In the theme editor, go to a page that contains the Slideshow component, such as the Home page. Then, select Slideshow in the left sidebar.
In the settings panel on the right, configure how the slideshow is displayed:

Height on desktop and Height on mobile: Set the slideshow height for desktop and mobile devices.
Full screen: Enable this option to display the slideshow at full-screen width.
Pagination style: Select how customers navigate between slides, such as Progress bar, Arrows, or Dots.
Turn on auto-switch: Enable this option to switch between images automatically. Use Switching interval to set how often the images switch.
Mobile image-text layout style: Select how the image and text are displayed on mobile devices, such as Text inside image, Text below image, or Text overlapping image.

In the left sidebar, expand Slideshow and select the Image block you want to edit. Under Settings in the right panel, configure the image:

Image on desktop and Image on mobile: Add or replace the images displayed on desktop and mobile devices.
Image link redirect: Enter a URL or phone number, or select a store page to redirect customers to. (This setting isn't supported by the Bottle theme.)
Image display area: Select where the image is positioned within the slideshow.
Layer mask opacity: Adjust the opacity of the image overlay.
Display text mask: Enable this option to display a text overlay on the image.
Text mask color: Select the color of the text overlay.
Inherit color scheme: Enable this option to use the current theme color scheme for the text overlay.

Under Settings, expand Layout to configure the content layout, including Direction, Auto wrap, Alignment, Justify, Spacing, Margin, and Size.
To add more images, hover over the Slideshow component in the left sidebar and click the + icon to add another Image block. Then, configure the new image as needed.
Click Save to apply your changes.

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:

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

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:

Within a component, click Add content.
Select Content containers under the Theme tab.
Add the blocks you want to arrange, then use the container’s layout controls to set their direction and alignment.
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:

In the Theme Editor, locate the component you want to reuse in the left sidebar.
Click the three-dot icon (More actions) and select Copy to clipboard.
Navigate to the target page, click the three-dot icon on any existing component, and select Paste below.
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.