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.

Optimizing Product Detail Pages with Purchase Button Groups

This update introduces the Purchase buttons group block, designed to concentrate the shopping area and improve conversion rates by creating a more focused visual experience.

Previously, purchase elements were managed as individual blocks, which could lead to misaligned layouts or accidental deletion during customization. The new Purchase buttons group "repackages" these elements into a single, cohesive unit. This allows you to drag the entire group easily within the editor and supports a professional single-row layout (placing the Quantity selector and Add to cart options side-by-side), a high-converting design commonly used by top global e-commerce brands.

How to Set Up

To create a more compact and professional checkout area by aligning the Purchase buttons block and selectors on your product detail page, follow these steps:

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. In the left sidebar, follow the hierarchy: Product > Product information. Click to expand Product information to find the built-in Purchase buttons component.
   
4. Under Arrangement, select the layout direction for the Quantity selector and Shop button:
   
   • Horizontal: Place them side-by-side in the same row (recommended for a compact, high-converting look).
   • Vertical: Place them stacked on top of each other.
5. To configure settings for the entire button group, click the Purchase button component and adjust the options as needed.
   
6. You can drag the entire group as a single unit to your preferred position within the Product information section.
7. Click Save to apply the layout.

Feature Limitations

• Tiered Pricing Not Supported: Please note that this component currently does not support the display of "Tiered Pricing."
• Placement Restriction: This component supports bottom-docking on the product detail page. However, it does not support bottom-docking on other pages (such as pop-ups or collection pages), and it will not automatically include purchase buttons when added to those pages.

Configuring Product List Page Interaction Features

To help customers transition from browsing to purchasing more quickly, we have enhanced the product list page to shorten the customer's purchase path, allowing for a rich, interactive experience without requiring third-party apps or complex custom development.

Key Features

• Quick View Capabilities: Add a Quick view button to product cards so customers can obtain product details and take action without leaving the list page.
• Flexible Purchase Paths: Define your "Add to Cart" behavior—choose between a pop-up, floating layer, or direct add-to-cart to fit your sales strategy.
• Product Card Customization: Product cards now support reusable blocks and dynamic sources, allowing for highly personalized displays.

How to Set Up

To configure product list page features that support browsing and direct purchase actions, follow the steps below.

Feature 1: Quick View Button

The Quick view button feature allows customers to view product details and take action without leaving the product list page. To configure it:

1. In the Theme Editor, go to the Collections page. Under the Collections section, click the down arrow icon to select a collection for preview.
   
2. Under the Product list block, locate and hover over the Product card section, click + (Add content), and select Quick view button.
   
3. Once added, a button with the default text View more will appear below the product card. You can customize the button text, color, and formatting in its settings.
   
4. Click Save to apply the layout.

Feature 2: Floating Hover Layer

The Floating hover layer feature displays purchase-related actions or additional content when customers hover over a product image. To configure it: 

1. In the Theme Editor, go to the Collections page. Under the Collections section, click the down arrow icon to select a collection for preview.
   
2. Under the Product list block, locate and hover over the Image overlay block, click + (Add content), and select Quick view button.
   
3. In the Settings section of the Image overlay block, adjust the hover effect (e.g., persistent, fade-in, or fade-out).
   
4. Click Save to apply the layout.

Feature 3: Dynamic Marketing Label

The Dynamic marketing label feature allows you to display eye-catching, flexible text labels (i.e., "Limited Edition" or "Organic Material") directly on your Product detail pages. To configure it: 

1. In the Theme Editor, navigate to the Product details page and select a product you prefer to preview the changes.
   

2. Under the desired template level in the left sidebar, click + (Add component) to add a Custom section. Within that section, add a Content container, and then add a Rich text block.
   

   Tip: For greater layout flexibility, you can first add a Content container, and then add the Rich text 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.

3. To achieve a professional label appearance, click the Rich text block. From the right-hand settings panel, you can customize the background color, corner radius, and transparency to match your brand's style.
   

   Tip: Use the Add dynamic source icon within the Rich text editor to connect the label to specific product metafields for dynamic content updates.

4. Click Save to apply the layout.

Feature Limitations

• Floating Layer Configuration: You must manually configure the layer content and animation logic for the floating menu to appear correctly.
• Theme Availability: These product list page enhancements are available on all OS 3.0 themes except for the Bottle theme.

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.
   

Copying Sections Across Pages

Designing consistent store pages is now easier with the Copy to clipboard feature. You can duplicate a section—including all its customized content and settings—and paste it onto any other page template within your store.

This update eliminates the need to manually rebuild identical sections (such as banners, image blocks, promotional areas, or custom content) when moving between the Home page, Collection pages, or Blog posts. 

How to Set Up

To replicate your page layouts across different templates, 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, switch to the desired page and locate the section you want to reuse in the left-hand sidebar.
3. Click the three-dot icon (More actions) and select Copy to clipboard.
   

4. Navigate to the page where you want to add the section. Then click the three-dot icon on any existing section and select Paste below.
   

   Tip: This feature is especially powerful for Blog posts and Product pages. You can now paste promotional sections directly above or below fixed content (like the article body or product info).

5. The section will be inserted automatically, and the editor will scroll to show your newly pasted content.
   
6. Click Save.

Feature Limitations

• Section restrictions: Not all sections support the copy operation. Sections that are core to a specific page type cannot be duplicated. For example, you cannot copy the Product or Recommended products sections to other page templates.
• Quantity limit: To ensure optimal page performance, each page has a limit of 25 sections. If a page has reached this limit, the Paste option will be grayed out.
• Clipboard persistence: The copied content is stored in the editor's internal memory. It will be cleared once you close the theme editor.
• 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.