New Features in OS 3.0 Themes

SHOPLINE’s OS 3.0 themes are continuously evolving with new features that provide greater flexibility and personalization in store design.

This guide will introduce the latest functions available exclusively for OS 3.0 themes.

Allowing Customers to Choose Products per Row on Mobile Devices

Give your customers more control over their browsing experience by allowing them to adjust how products are displayed on mobile devices.

With the Customize product display layout feature, customers can toggle between showing one or two products per row—whether they prefer larger tiles for detailed viewing or smaller tiles for quicker scanning.

How to Set Up

1. From your SHOPLINE admin panel, go to Online Store > Design > My theme. Choose an OS 3.0 theme (for example, Fashion) and click Design to enter the theme editor.
   
2. In the theme editor, switch to the mobile view, then go to the Collections page to customize the product listing layout.
   
3. Select a collection from the drop-down list. In the Product list section, turn on Multi-column switcher to enable the mobile display toggle.
   
4. Select the default and alternative numbers of columns, then, click Save to apply your changes.
   

Feature Limitations

• Availability: Supported on all OS 3.0 themes except Bottle.
• Device Support: Currently available for mobile devices only.
• Compatibility: Please test with any active plugins to ensure proper display. Some custom plugins may affect how the product listing page grid renders.
• Integration: No API or file upload functionality is involved.

Improving Navigation with Configurable Breadcrumb Paths

Give your customers a standard, clear way to navigate your store by implementing conventional path-based breadcrumbs. These enhancements provide universally usable navigation that displays the page hierarchy a customer followed (e.g., Home / Category / Product).

The new breadcrumb system offers clear, path-based navigation to improve customer experience and store usability. All nodes in the path (except the current page) are fully clickable, allowing customers to easily navigate back to previous pages, categories, or the homepage.

Understanding the Three Types of Breadcrumb Elements

To ensure clarity regarding the features, three distinct breadcrumb elements exist within OS 3.0 themes, each with different placement and logic:

• The New Universal Breadcrumb Block (Recommended Standard):
  • Logic: Uses conventional page-path hierarchy (e.g., Home / Category / Product).
  • Placement: Can be added to all pages via a new dedicated section in the theme editor.
  • Path Examples: 
    1. Product Detail Page: Typically displays as Home / {Collection Title} / {Product Title} or Home / {Product Title}.
    2. Blog Article Page: Displays as Home / {Blog Collection Title} / {Blog Article Title}.
  • Usage: This is the recommended block for general navigation.
• The Legacy Multi-level Category Breadcrumbs (Product Detail Page Only)
  • Logic: Relies on the product domain's multi-level classification data.
  • Placement: Only appears as a block within the Product Detail Page.

• The Legacy Collection Page "Home" Node (Fixable):
  • Logic: A hardcoded "Home" node overlaid on the category image.
  • Placement: Only appears on Collection List Pages.
  • Usage: It was previously unconfigurable and considered an error, but a new configuration setting now allows merchants to hide it after the update.

How to Set Up

Follow these steps to enable the new, recommended breadcrumb system and resolve legacy display issues.

From your SHOPLINE admin panel, go to Online Store > Design > My theme. Choose an OS 3.0 theme and click Design to enter the theme editor.

Scenario 1. Enabling the Universal Breadcrumb Block:

To enable the recommended new Breadcrumb Block, follow these steps:

1. Navigate to your desired page (e.g., homepage, product detail page) in the theme editor. 
2. Under the corresponding module, click Add component, go to the Theme tab, then find and select Breadcrumbs.
   
3. After adding the Breadcrumb block, set up a preferred color scheme, choose whether to enable it on desktop and/or mobile, and configure its layout as needed. Once completed, click Save to apply your settings. 
   

Scenario 2. Hiding the Legacy Collection Page Node:

If you'd like to hide the unconfigurable Collections page node, follow these steps:

1. In the theme editor, navigate to the Collections page. 
2. In the Collection header module, click Collection image. In the settings panel, locate and turn on Hide breadcrumb.
3. Click Save to apply your changes.

Feature Limitations

• Legacy Breadcrumbs Access: The legacy breadcrumb element (now renamed Multi-level Category Breadcrumbs) still requires the use of the product domain's multi-level classification data and requires merchants to be whitelisted for access.
• Old Element Removal: The hardcoded "Home" element on the Collections page cannot be removed entirely, but the new feature provides the ability to hide it.

Enabling Flexible Horizontal Layouts within the Product Detail Page

This enhancement addresses a key limitation in previous theme layouts by allowing merchants and third-party apps to implement complex, non-vertical arrangements within the product detail page information section. Previously, product information blocks were restricted to a single vertical stack, which prevented modern design needs such as placing the quantity selector beside the purchase button, or positioning a wishlist button next to the product title.

By introducing a new structural element, you gain precise control over the arrangement of specific product elements on the product detail page, aligning with the overall flexible design philosophy of OS 3.0 themes.

How to Set Up

To apply horizontal layouts to elements within your product information area, you will utilize a new content container:

1. From your SHOPLINE admin panel, go to Online Store > Design > My theme. Choose an OS 3.0 theme (for example, Fashion) and click Design to enter the theme editor.
2. In the theme editor, navigate to the Products page.
3. Under the Product module, locate Product section > Product information. Hover over Product information, click the + icon, and select Content Containers under Theme. This container acts as an intermediate layout layer. 
4. After adding the container, hover over it to add information blocks such as Title, Price, and Quantity selector. You can drag and drop the blocks to adjust their order.Inside this new container, add the standard product information blocks (such as the Title) you wish to arrange horizontally.
5. Once the blocks have been added, click Content Containers to configure the layout, including block arrangement, margins, and sizing.Use the container's dedicated layout controls to set the horizontal arrangement and alignment of the elements added in the previous step. This allows you to place multiple components side-by-side, such as the Purchase button and Quantity selector. 
6. Click Save to apply your changes.

Feature Limitations

• Theme Availability: This feature is not supported by the Bottle theme, which is the only OS 3.0 theme currently excluded.
• Placement Restriction: The horizontal layout control is available only within the dedicated content container node located under the main Product information section on the Products page. It does not override the vertical arrangement of the Product Detail page template as a whole.