Introduction to Theme OS 3.0 (Coming Soon)

The new OS 3.0 themes introduce several major updates, including a redesigned component structure, flexible layout display settings, a dedicated mobile design, and an advanced template engine. These enhancements provide greater functionality, enabling you to create an optimized and brand-aligned online store effortlessly. Whether on desktop or mobile, you can enjoy a smoother and more refined page design experience.

New Component Structure

OS 3.0 themes feature a redesigned component structure that allows multilevel nesting blocks within a single component. This enables more complex and detailed page designs, giving you greater flexibility in structuring and arranging content modules within the same page. The result is a richer and more layered layout. 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. Select the block you want to add.

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.