Introduction to Theme OS 3.0 (Early Access)

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.

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:

1. Open your SHOLINE theme editor and navigate to the component list.
2. Click the Add content icon on the right of the section/block where you want to insert a new element.
   
3. 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:

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

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.

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.

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

OS 3.0 vs. OS 2.1: Feature Comparison

How to Use OS 3.0 Themes

To start designing with OS 3.0:

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

Frequently Asked Questions

1. 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 the OS 2.1 to 3.0 Private Theme Migration Guide.