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.

Using Multi-level Description Blocks for Advanced Product Layouts

This enhancement empowers merchants to build sophisticated, high-performance product detail pages without writing a single line of code. Previously, displaying structured information like "Promotion Cards," "Product Certifications," or "Related Product Highlights" often required custom development or heavy use of rich-text editors that were difficult to align. By utilizing the Multi-level description block, you can now create professional, card-style visual layouts directly within the product information area.

Best Practice: Improving Conversion with Structured Layouts

To maximize the benefit of this feature, use the Multi-level description block to organize complex details into scannable sections. For high-ticket items, we recommend nesting Title, Rich text, and Logo blocks within this container to create a "Trust Card" (e.g., displaying a brand logo alongside a warranty guarantee). This approach increases information density within the initial screen view, creating a professional visual hierarchy that enhances product competitiveness and reduces bounce rates.

How to Set Up

To implement professional detail splitting using the Multi-level description block within your product information area, follow these steps:

1. 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.
2. In the theme editor, navigate to the Products page and select a product you prefer to preview the changes.
   
3. Hover over the Product information section, click + (Add content), and select the Multi-level description block.
   

4. Click the Multi-level description block to access its settings. You can now add various universal blocks—such as Title, Rich text, and Logo—inside this main block to build your desired layout.
   
    

   Note: When you update the Title within the right-hand settings panel, the name in the left-hand sidebar menu will automatically sync, making it easy to identify and manage multiple blocks.

5. You can also toggle the Folded display option to determine whether the description should be collapsed by default or fully displayed.
   
6. Arrange the nested blocks to achieve "inline image-text alignment" or a "card-based" visual effect.
   
7. Click Save to apply your changes.

Feature Limitations

• Theme Availability: This feature is supported by all OS 3.0 themes except for the Bottle theme.
• Layout Scope: This block is specifically designed for structural layouts within the Product information section and does not support external file uploads or API integrations.
• Content Scaling: To maintain mobile performance, it is recommended to limit the number of nested blocks within a single Multi-level description container to ensure the layout remains clean and readable on smaller screens.

Using Text Label and Tooltip to Enhance Product Information

This enhancement addresses the challenge of balancing high information density with a clean user interface on the product detail page. Previously, merchants often had to choose between overwhelming customers with technical jargon and policy details or omitting in-depth product details that could assist in decision-making. By utilizing the Text label block and its interactive Tooltip sub-block, you can now provide professional clarifications in a non-intrusive way, ensuring that supplementary details are only a hover or tap away.

By introducing this layered information approach, the Text label acts as a visual anchor—such as "Learn more" or "Shipping Info"—while the Tooltip hides the secondary details behind a hover-triggered bubble. This design aligns with modern browsing habits by keeping the main conversion path focused and clutter-free, providing immediate value only when the shopper seeks additional context.

Best Practice: Enhancing Professional Visual Hierarchy

For specialized products such as skincare or medical-grade items, we recommend configuring ingredient explanations and efficacy details within Text label blocks. By using the instant bubble prompts of the Tooltip sub-block, you can present technical details in a more professional and layered manner. This not only significantly improves the interactive texture of the page but also helps customers quickly understand product value, shortening the decision-making path.

How to Set Up

To enable and configure the interactive labels and tooltips within your product information area, follow these steps:

1. 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.
2. In the theme editor, navigate to the Products page and select a product you prefer to preview the changes.
   

3. Under the Product module, locate and hover over the Product information section, click + (Add content), and select Text label.
   
    

   Tip: For greater layout flexibility, you can first add a Content container under the Product information section, and then add the Text label block within that container. To align or move the container, select its parent block to apply alignment settings, as aligning the container directly may not change its position.

4. Click the Text label block to enter your desired text (e.g., "Learn more") and adjust its background color to match your brand's style.
   
5. Within the Text label block area in the sidebar, locate and hover over the Tooltip sub-block, click + (Add content), and select Rich text. Use the editor provided to compose the content for your explanation bubble.
   
6. On the live store, the Text label will appear beneath the product info; when a user hovers over the label (on desktop) or taps it (on mobile), a bubble pop-up will appear displaying the content configured in the Tooltip.
   
7. Click Save to apply your changes.

Feature Limitations

• Theme Availability: This feature is supported by all OS 3.0 themes except for the Bottle theme.
• Content Best Practices: While the Tooltip sub-block supports rich text and links, it is best suited for brief, impactful clarifications to maintain the smooth flow of the user journey.
• API & Uploads: This feature is managed directly within the theme editor and does not support external API or file upload integrations.

Using Enhanced Magnifier Customization for Product Media

This enhancement allows merchants to customize the image zoom interaction on the product detail page according to their specific product categories. By providing multiple zoom modes—such as hover, scroll, or arrow toggles—merchants can improve the product inspection experience for customers. This functionality is designed to increase time spent on the page, build purchase confidence, and reduce return rates by enabling customers to closely examine product textures and specifications before buying.

Best Practice: Selecting the Right Zoom Style for Your Industry 

Choosing a zoom style that matches your product attributes can significantly impact conversion rates:

• 3C Electronics (e.g., Keyboards, Cameras): We recommend Mouse hover. Customers often need to quickly inspect "interface types" or "button layouts," and hover zoom provides the most efficient way to view these technical details.
• Home Goods & Decor: We recommend Fullscreen arrow toggle. These products rely on composition and atmosphere. Allowing users to toggle through scenes with arrows improves their immersive perception of the product.
• High-end Fashion & Accessories: We recommend Click to view full image details or Fullscreen long image scroll. Customers in this segment need to see extreme close-ups of fabric textures and craftsmanship.

How to Set Up

To customize the magnifier settings for your product media, follow these steps:

1. From your SHOPLINE admin panel, go to Online Store > Design > My theme. Choose a compatible OS 3.0 theme (e.g., Fashion) and click Design to enter the theme editor.
2. In the theme editor, navigate to the Products page and select a product you prefer to preview the changes.
   
3. Under the Product module, expand the Product section and click on the Product media component.
4. Click the Product media files sub-block to access the magnifier configuration.
   

5. Find the Magnifier settings group and toggle on Enable magnifier.

   Notes:  The Magnifier setting only zooms media images; overlays will not be zoomed. For optimal zoom clarity, ensure your product images follow the recommended specifications in the "Guide to Image Size."

6. Under the Magnifier settings, you can independently configure the zoom styles for different devices:
   • Desktop zoom style:
     
     • Fullscreen long image scroll (Default): Best for browsing long, detailed images.
       
     • Fullscreen arrow toggle: Best for atmosphere-heavy lifestyle shots.
       
     • Mouse hover: Best for technical inspection of specific product parts.
       
   • Mobile zoom style:
     
     • Fullscreen arrow toggle (Default): Standard mobile browsing experience.
       
     • Fullscreen long image scroll: Allows vertical scrolling in full-screen mode.
       
     • Click to view full image details: Opens a new layer showing the image at maximum scale; users can drag to view details and click again to return.
       
7. If desired, enable Show magnifier to display a magnifier icon on the media as a visual cue for image zooming.
   
8. Click Save to apply your changes.

Feature Limitations

• Theme Availability: This feature is exclusive to the Fashion theme and its child themes. It is currently not supported on the Bottle theme.
• Video Constraints: If the user interface for a video module is hidden, the magnifier will not function for that specific video element.
• Scope of Effect: The magnifier effect applies strictly to the raw media images; any text overlays or UI elements will remain at their original scale.

Customizing Social Media Icons

To help merchants promote niche or region-specific platforms (such as Discord, LINE, or Reddit) beyond universal icons like Facebook and Instagram, SHOPLINE now supports custom social media displays. This allows you to upload personalized icons and set destination links without any custom coding or third-party apps.

How to Set Up

To configure custom social media icons for your store’s header or footer, follow these steps:

1. From your SHOPLINE admin panel, go to Online Store > Design > My theme. Choose a compatible OS 3.0 theme (e.g., Fashion) and click Design to enter the theme editor.
2. In the theme editor, go to Theme settings > Social media.
   
3. Scroll to the bottom to find the Custom social media section. You will see five available slots labeled Social media 1 through Social media 5. Select any slot to begin your configuration.
4. Configure the following settings for each entry:
   • Icon upload: Upload your custom image (icons will appear gray until an image is successfully uploaded).

   • Link: Enter the full destination URL.

     Note: The Link field is mandatory. You must enter a valid URL format (e.g., https://...) to save your settings.

5. Click Save to apply the icons to your Header or Footer.

Icon Specifications

To ensure optimal display, please follow these guidelines:

• Supported formats: JPG, SVG, and PNG
• File size: Recommended to be under 200KB.
• Recommended dimensions: 20px x 20px or 25px x 25px

Feature Limitations

• Quantity limit: You can add a maximum of 5 custom social media icons.
• Theme availability: This feature is supported on all official OS 3.0 free themes, except the Bottle theme. It is not supported on third-party paid themes.