Introduction to Theme OS 3.0 – SHOPLINE Help Center

SHOPLINE has launched the new OS 3.0 theme framework, designed with a revamped component structure, flexible layout settings, dedicated mobile configurations, and a brand-new template engine. These upgrades empower merchants to create high-performance, brand-aligned online stores with ease. Whether on desktop or mobile, the new theme structure offers a smoother and more customizable design experience.

Note: OS 3.0 themes have been officially released. For a detailed comparison between OS 3.0 and OS 2.1 themes, refer to the section below. We recommend reviewing the differences and testing the themes before deciding which one to use for store design, preview, and publishing.

New Component Structure

OS 3.0 introduces a redesigned structure that supports up to five levels of nested blocks within each component. This enhancement allows for greater modular control and layered design flexibility across your storefront. To add a nested block:

Open your SHOPLINE theme editor and navigate to the component list.
Click the Add content icon on the right of the section/block where you want to insert a new element.
Choose the block type to add it as a child element.

This modular flexibility allows for dynamic content arrangements within a single page.

Flexible Layout Display Settings

With OS 3.0 themes, you can easily adjust the position, spacing, and alignment of page elements to better match your design requirements. When working with complex layouts, these precise adjustments allow you to control the style and arrangement of elements effectively. To adjust layout display:

Select the section or block you want to modify.
Use the toolbar to fine-tune the layout, margins, and dimensions.

Layout Settings

New_HC_OS3.0Themes_KeyLayout_Table_01 (1).png

HC_New_OS3.0_KeyLayoutTable_AutoWrap (1).png

Margin Settings

Defines the inner padding of the selected container.

HC_New_OS3.0_MarginSetting (2).png

Size Settings

Specifies the absolute width and height of the selected element or its relative size within the parent container.

Mobile-Specific Adjustments & Preview

All layout, margin, and size settings can be customized separately for desktop and mobile devices. When a device-specific adjustment is made, an underline indicator will appear on the modified setting.

HC_OS3.0Themes_MobileSpecific_Typesetting.png

For mobile, you can preview the page using various common device types to ensure an optimal browsing experience.

HC_OS3.0Themes_MobileSpecific_Devices.png

OS 3.0 vs. OS 2.1: Feature Comparison

Capability	OS 2.1	OS 3.0
Template Engine	Handlebars	Sline (faster rendering)
Component Structure	Up to 2 levels; limited section movement. Each page can have up to 25 sections.	Up to 8 levels; flexible section/block editing. Each page can have up to 25 sections and 50 blocks.
Color Schemes	Single scheme only	Supports multiple schemes
Layout Flexibility	Limited layout adjustment	Fine-tuned element arrangement with spacing and direction settings
Header/Footer	Fixed layout; language/country selectors supported	Fully customizable; language/country selectors supported
Developer Productivity Tools (VSCode Plugin, Theme Check, etc.)	Supported	Supported
Advanced Component Support	All components supported	Most components are supported. Compared to OS 2.1, the following are not yet supported: Multi-row scrolling banner Campaign promotion Highlighted text Scrolling gallery Combined shopping image Image carousel Parallax scrolling banner Tag display Blog Image list toggle Timeline File download Vertical image-text slider Timeline (again, distinct module)
Plugin Compatibility	Most plugins supported	Some plugins are not yet supported or fully compatible. It’s recommended to test the theme in draft mode first and use the actual results as a reference. Please see the OS 3.0 Plugin Compatibility List.

OS 3.0 Component Comparison

OS 3.0 currently offers two themes: Fashion and Bottle.

Fashion includes general e-commerce components, making it suitable for small and medium-sized merchants. It allows quick setup and publishing without extra development.
Bottle has fewer features and is designed for customized private development. It is ideal for easy merchant deployment or as a foundation for third-party developers to build and sell their own themes.

Homepage Component Comparison:

Section	Category	Component	Fashion (OS 3.0)	Bottle (OS 3.0)	Modern (OS 2.1)
Homepage Components (can be added on any page)	Homepage Components	38 Components	38	21	27
	Custom	Custom SLINE/HTML	✅	✅	✅
		Custom page	✅	✅	✅
		Custom section	✅	✅	❌
		2-column layout	✅	✅	❌
		3-column layout	✅	✅	❌
		1:2 layout	✅	✅	❌
		1:2:1 layout	✅	✅	❌
		Apps	✅	✅	❌
	Image-text display	Video	✅	✅	✅
		Blogs	✅	✅	✅
		Slideshow	✅	✅	✅
		Split slideshow	✅	❌	✅
		Image-text list	✅	✅	✅
		Image banner	✅	✅	✅
		Image-text module	✅	✅	✅
		Stitched image-text module	✅	❌	✅
		Collage	✅	❌	✅
		Discount promotion	✅	❌	✅
		Switch image on hover	✅	❌	✅
		Before & After	✅	❌	❌
		Ingredient display	✅	❌	❌
		Rich text	✅	✅	✅
	Product display	Featured product	✅	✅	✅
		Featured collection	✅	✅	✅
		Recommended products	✅	❌	✅
		Collection list	✅	✅	✅
		Specialty product category	✅	❌	✅
		Multilevel filter	✅	❌	✅
		Shoppable image	✅	❌	✅
		Shopping video	✅	❌	❌
		Recently viewed products	✅	❌	✅
		Media promotion products	✅	❌	❌
	Customer Operation	Email subscription	✅	✅	✅
		Countdown timer	✅	❌	✅
		Contact form	✅	✅	✅
	Trust component	Logo list	✅	❌	✅
		Map	✅	❌	❌
		FAQS	✅	✅	✅

OS 3.0 Plugin Compatibility List

For the Fashion and Bottle themes, the following plugins are not yet supported or fully compatible. It’s recommended to test the theme in draft mode first and use the actual results as a reference.

Fashion (OS 3.0)		Bottle (OS 3.0)
Plugin Name	Note	Plugin Name	Note
EasyBuy Oneshop & COD Form	Not supported	EasyBuy Oneshop & COD Form	Not supported
Smart landing page	Not supported	Smart landing page	Not supported
3D & AR Product Viewer	Not supported	3D & AR Product Viewer	Not supported

How to Use OS 3.0 Themes

To start designing with OS 3.0:

Go to Online Store > Design > Theme shop.
Search for and select the “Fashion” theme, or click the theme introduction page to visit the theme page.
Click Add theme to add it to your Theme library.
Click the Design button next to the Fashion theme to open the theme editor.
After confirming your setup, click Publish to go live.

Frequently Asked Questions

How can OS 2.1 private theme developers adapt to OS 3.0?
OS 3.0 uses a new Sline template syntax, requiring redevelopment. For best practices, refer to "OS 2.1 to 3.0 Migration Guide for Private Themes."
Why doesn't the content container move when I select "Align left" in the OS 3.0 theme editor?

If you're trying to align a content container to the left in OS 3.0 themes but see no change after selecting Align left, the issue might be that you're aligning the wrong layer.
To make the content container move to the left, you need to select the parent image block (the block that wraps the content container), and then apply the left alignment. Only after adjusting the alignment of the image block will the content container shift accordingly.

Layout Settings	Actions	Effect
Arrangement Direction	Adjusts the order when multiple elements are placed together. For example, changing the position of images and product information on the Product Detail Page.
Auto Wrapping	Automatically wraps elements to the next line when they exceed the container’s width/height.
Alignment & Positioning	Controls the relative placement of elements within a container. For example, adjusting text placement over a banner image.
Spacing	Manages row and column spacing between elements. For example, setting spacing between images, titles, and prices in product cards.