Introduction to Theme OS 3.0

Theme OS 3.0 is SHOPLINE's latest theme version, designed to provide a more flexible, efficient, and customizable store design experience. Whether you're creating a new storefront or refreshing an existing one, it helps you build modern, brand-aligned online stores with greater ease. 

This article introduces the key capabilities of Theme OS 3.0, compares it with Theme OS 2.1, and helps you get started.

What Is Theme OS 3.0?

Built on a new theme architecture, Theme OS 3.0 offers greater flexibility and customization than Theme OS 2.1. It features a revamped component structure, enhanced layout controls, dedicated mobile settings, and a new Sline template engine to streamline storefront design. These improvements make it easier to create modern, high-performing online stores while giving you greater control over your storefront design.

The table below highlights the key differences between Theme OS 3.0 and Theme OS 2.1 to help you understand the new capabilities and choose the version that best fits your business needs.

Theme OS 3.0 vs. Theme OS 2.1

Key Highlights of Theme OS 3.0

New Component Structure

OS 3.0 introduces a redesigned structure that supports up to 8 levels of nested blocks. This enhancement allows for greater modular control and layered design flexibility across your storefront. 

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

For step-by-step instructions on adding a section or block, see the corresponding page article in the "Theme OS 3.0" Help Center section.

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. 

For step-by-step instructions on adding a section or block, see the corresponding page article in the "Theme OS 3.0" Help Center section.

Layout Settings

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.

Margin Settings

Defines the inner padding of the selected container, the space between the container edge and the content inside it.

Size Settings

Sets the width and height of the selected element, either as a fixed pixel value or as a percentage relative to its parent container.

Mobile-Specific Adjustments & Preview

All layout, margin, and size settings can be customized separately for desktop and mobile devices. When you adjust a setting specifically for one device, an underline indicator appears on that setting to show that a device-specific override is active.

To preview how your store looks across different screen sizes, you have three options:

• Icon Switcher: Click the Desktop or Mobile icon to the right of the Page selector at the top of the theme editor to quickly toggle between views.
  
• Preview Device Selection: At the bottom of the editor, click Preview device to choose from a list of popular smartphone and tablet models.
  
• Mobile QR Code: At the bottom of the editor, hover over the QR code icon to the right of the Preview device to reveal a QR code, then scan it with your smartphone to preview the theme directly on your device.
  

Theme OS 3.0 Themes and Component Support

SHOPLINE OS 3.0 themes are organized into two categories to suit different needs:

• For business use: If you want a theme tailored to your industry, explore the Theme shop to find the right fit for your store. Available themes include Fashion, Sipply, and Krama, with more being added over time.
• For custom development: Bottle has fewer features and a streamlined structure, making it ideal for easy merchant deployment or as a foundation for third-party developers to build and sell their own themes.

Getting Started with Theme OS 3.0

To start using a Theme OS 3.0 theme, follow the same installation and publishing process as any other SHOPLINE theme. For detailed instructions, see "Choosing a Suitable Theme."

Before choosing a Theme OS 3.0 theme, ensure the apps and features you need are supported. Theme OS 3.0 uses app blocks instead of the app embed method used in OS 2.1, so some apps may not yet be fully compatible.