Designing Your Products page in the Theme Editor (OS 3.0 Themes)

The Products page is where browsing turns into buying, making it one of the most important touchpoints in the customer journey. With Theme Editor for OS 3.0 Themes, you can showcase products with zoomable media, structured descriptions, streamlined purchase buttons, and flexible custom layouts, all without writing code. 

This guide explains how to access the Products page editor, configure its exclusive components, and customize the content, styling, and layout of your products pages.

Getting Started with the Products Page Editor

Accessing the Editor

To access the Theme Editor and customize the Products page, follow these steps:

1. From your SHOPLINE admin, go to Online Store > Design.
2. Locate your current theme and click the Design button.
   
3. In the Page selector at the top, select Products  > Default.
   

Understanding Exclusive Product Components

Unlike the Homepage, the Products page features specialized components that automatically pull dynamic data from your product catalog. These are located in the component sidebar on the left:

• Product Information: Displays essential data like Title, Price, and Tax info.
• Variant Picker: Essential for customers to select sizes, colors, or materials.
• Buy Buttons: Contains "Add to Cart" and "Buy Now" triggers.
• Product Description: Syncs content directly from your Product Admin description field.
• Product Recommendations: A system-generated "You May Also Like" section.

Improving Navigation with Breadcrumbs

You can add a Breadcrumb block to your Products page to help customers track their navigation path (e.g., Home / Collection / Product). All nodes in the path except the current page are fully clickable, allowing customers to easily navigate back to previous pages, collections, or the homepage.

How to Set Up

1. From your SHOPLINE admin, go to Online Store > Design. Choose an OS 3.0 theme and click Design to enter the Theme Editor.
2. In the Theme Editor, navigate to the Products page.
3. Under the corresponding module, click + Add component, go to the Theme tab, and select Breadcrumbs block.
   

4. Configure your preferred color scheme and choose whether to enable the Breadcrumb block on desktop and/or mobile. Once completed, click Save to apply your settings.
   

   Note: For standard, path-based navigation, we strongly recommend using this Breadcrumbs block.

When configuring breadcrumbs on your Products page, note the following:

• Breadcrumb block (Recommended): Displays a standard, path-based navigation hierarchy, typically shown as Home / {Collection Title} / {Product Title}. This is the recommended option for most merchants.
• Multi-level Category Breadcrumbs: This element is available on the Products page only and relies on the product domain's multi-level classification data. It requires merchants to be whitelisted for access. To enable it, please contact our support team.

Feature Limitations:

• Theme Availability: This feature is available on all OS 3.0 themes.

Customizing Content and Styles with Custom CSS

Adding Blocks via Hover

In OS 3.0 themes, you can insert elements precisely where you want them within the product information area.

• The Hover Trick: Move your cursor into the gap between existing blocks (e.g., between Price and Description). A [+] icon will appear. Click it to add a Custom content block.
  
   

  Note: If you cannot see the "+" button, ensure your cursor is positioned directly in the center of the vertical gap between blocks.

Modifying or Hiding Default Text

If you want to customize or hide default system phrases under the product price, such as "Tax included" or "Shipping fees will be calculated at checkout", SHOPLINE offers two effective methods. You can either modify the text directly within the theme content settings or use the conversational AI Code Assistant to generate Custom CSS.

Method 1: Hide Text via "Edit default theme content"

This method allows you to look up system labels and hide them by replacing the text with an empty space character.

1. From your SHOPLINE admin panel, go to the Online Store. Locate your current theme, click the three-dot icon [...] (more actions), and select Edit default text.
   
2. In the top search bar, type "shipping" or "tax", then locate the target text fields under the Products > Product details section from the filtered results. 
   
3. Delete the existing text in the field, and then enter a single space. This empty space instructs the storefront to render the label as completely hidden.
   
4. Click Update to save the change.

Method 2: Hide Text via the AI Code Assistant (Custom CSS)

If you prefer a quicker alternative or want to make precise visual modifications without permanently changing your theme content, you can utilize the built-in AI Code Assistant to automatically generate and apply Custom CSS.

1. In the theme editor, navigate to the Products page.
2. Open the assistant by clicking the AI Code Assistant icon located next to the component title (or next to the Custom CSS heading in the settings panel).
   
3. Conversationally describe the storefront style change you want to make in the chat field.
4. The assistant will process your request and automatically output the corresponding CSS code block.
5. Click Apply. The generated code will auto-populate the Custom CSS field on the spot, and you will see an instant visual preview on the right side of your screen.
   
6. Click Save in the top-right corner of the theme editor to publish the changes to your live storefront.

When fine-tuning the visual style of your Products page, keep the following styling principles and troubleshooting tips in mind to maintain a consistent storefront design.

Style Discrepancies with App-Powered Components

Features like the Recommended products section are often driven by backend apps and render independently from your theme's core layout.

If you have configured global design styles (such as specific rounded corners or shadows) in your Global settings, these styles may not automatically apply to these app-powered cards. To resolve this and ensure visual consistency across all sections, you can apply page-scoped Custom CSS to manually align the card styles.

Choosing Between Global and Page-Scoped CSS

When applying Custom CSS to adjust your store's appearance, it is important to choose the correct scope to avoid breaking your site's layout:

• Page-Scoped CSS (Recommended for Products page): For modifications unique to the Products page (such as hiding a specific description block or style tweaks), always apply the code within the Products page settings sidebar. This confines the changes to the Products page and prevents unintended layout disruptions on your Homepage or Collection pages.
• Global CSS: Only apply code to Global settings if you want the visual modification to take effect across every single page of your online store.

Creating Unique Layouts with Templates

Common Issue: "I edited one Products page, and it changed all my products!" This happens because you are editing the Default Product template. To create a unique look for a specific product line:

1. In the Page selector, click Products page > + Create template.
   
2. Design your unique layout (e.g., add a "Size Guide" image specifically for apparel).
   
3. Go to Product > Edit Product. In the Theme template dropdown list, assign your new template to that specific product.
   

Troubleshooting: Color Swatch Display Issues

If you notice two rows of color swatches appearing on your Products page, or swatches are missing from the You may also like section, this is likely caused by a conflict between two active color sources.

Why This Happens

SHOPLINE supports two ways to display color swatches on your Products page: the theme's built-in color palette, and the Product Filters & Color Swatch app. When both are enabled at the same time, they render independently and produce duplicate swatches on the Products page.

The One-Source Rule

To avoid conflicts, only one color source should be active at a time. Before deciding which to use, note the key difference between the two:

How to Disable the Theme's Built-in Palette

If you choose to use the Color Swatch app as your single source, disable the theme's built-in palette to prevent conflicts:

1. From your SHOPLINE admin, go to Online Store > Design.
2. Locate your current theme and click Design to open the theme editor.
3. In the Theme Editor, click Global settings in the left sidebar.
4. Select Product, then toggle off Quick add palette to cart.
5. Click Save to apply the changes.

If You Need Swatches in the "You may also like" Section

The Product Filters & Color Swatch app does not support displaying swatches in the You may also like section. If this visibility is important for your store, switch to the theme's built-in palette instead. For setup instructions, refer to "Understanding Named Colors for OS 3.0 Themes (Coming Soon)".

Showcasing Your Product

Using Enhanced Magnifier Customization for Product Media

The Enhanced magnifier allows you to customize the image zoom interaction on the Products page to match your product category. By choosing the right zoom mode, you can help customers closely examine product textures and specifications before buying, building purchase confidence and reducing return rates.

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

1. From your SHOPLINE admin, go to Online Store > Design. 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 to preview your changes.
   
3. Under the Product module, expand the Product section and click the Product media component.
4. Click the Product media files sub-block to access the magnifier configuration.
   

5. Under Magnifier settings, toggle on Enable magnifier.

   Note: The Magnifier setting only zooms media images; overlays will not be zoomed.

6. Under Magnifier settings, configure the zoom style separately for each device type:
   • 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; customers can drag to view details and click again to return.
       
7. If desired, toggle on Show magnifier to display a magnifier icon on the media as a visual cue for zooming.
   
8. Click Save to apply your changes.

Feature Limitations

• Theme Availability: This feature is available on all OS 3.0 themes except 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.

Highlighting Key Attributes with Dynamic Marketing Labels

The Dynamic Marketing Label allows you to display flexible, eye-catching text labels (e.g., "Limited Edition" or "Organic Material") directly on your Products page to highlight key product attributes. You can also connect a label to a Product variant metafield so the text automatically updates when a customer selects a different variant — for example, showing "Machine washable" for a cotton color option and "Hand wash only" for a silk option of the same product.

How to Set Up

1. In the Theme Editor, navigate to the Products page and select a product to preview your changes.
   

2. In the left sidebar, click + Add component to add a Custom section. Within that section, add a Content container, 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. Click the Rich text block. In the right-hand settings panel, customize the background color, corner radius, and transparency to match your brand style.
   

   Tips:  Use the Add dynamic source icon within the Rich text editor to connect the label to specific product metafields for dynamic content updates. You can also connect it to a Product variant metafield. To have the label update automatically when a shopper switches variants, make sure a Variant picker component is added to the page.

4. Click Save to apply your changes.

   Note: For full configuration details on displaying variant metafields, including supported data types and dynamic source guidance, see "Configuring Dynamic Sources (Metafields) in OS 3.0 Theme Editor."

Feature Limitations

• Theme Availability: This feature is available on all OS 3.0 themes except the Bottle theme.

Structuring Product Information

Using Multi-level Description Blocks for Advanced Product Layouts

The Multi-level description block empowers you to build sophisticated, card-style visual layouts directly within the product information area, without writing a single line of code. Use it to display structured information such as promotion cards, product certifications, or related product highlights in a professional visual hierarchy.

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

1. From your SHOPLINE admin, go to Online Store > Design. 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 to preview your 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. Add universal blocks, such as Title, Rich text, and Logo, inside this 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 your preferred layout, such as "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 the Bottle theme.
• Layout Scope: This block is 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, limit the number of nested blocks within a single Multi-level description container to keep the layout clean and readable on smaller screens.

Using Text Label and Tooltip to Enhance Product Information

The Text label block and its interactive Tooltip sub-block allow you to provide professional clarifications in a non-intrusive way on your Products page. The Text label acts as a visual anchor — such as "Learn more" or "Shipping Info" — while the Tooltip reveals supplementary details in a hover-triggered bubble, keeping the main conversion path focused and clutter-free.

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, helping customers quickly understand product value and shortening the decision-making path.

How to Set Up

1. From your SHOPLINE admin, go to Online Store > Design. 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 to preview your changes.
   

3. 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 style.
   
5. Within the Text label block in the sidebar, hover over the Tooltip sub-block, click + Add content, and select Rich text. Use the editor to compose the content for your explanation bubble.
   

6. Click Save to apply your changes.

   Note: On the live store, the Text label appears beneath the product info. When a customer hovers over the label on desktop or taps it on mobile, a bubble pop-up displays the Tooltip content.

Feature Limitations

• Theme Availability: This feature is supported by all OS 3.0 themes except 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 a smooth user journey.
• API & Uploads: This feature is managed directly within the Theme Editor and does not support external API or file upload integrations.

Driving Purchase Actions

Optimizing Products Page with Purchase Button Groups

The Purchase buttons group block concentrates all purchase-related elements into a single, cohesive unit, creating a more focused shopping experience that improves conversion rates. Previously, purchase elements were managed as individual blocks, which could lead to misaligned layouts or accidental deletion during customization. With the Purchase buttons group block, you can drag the entire group as a single unit within the editor, and configure a professional single-row layout that places the Quantity selector and Add to cart button side-by-side, a high-converting design commonly used by top global e-commerce brands.

How to Set Up

1. From your SHOPLINE admin, go to Online Store > Design. Choose an OS 3.0 theme and click Design to enter the Theme Editor.
2. In the Theme Editor, navigate to the Products page.
3. In the left sidebar, expand Product > Product information section 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: Stacks them on top of each other.
5. Click the Purchase buttons component to configure settings for the entire button group.
   
6. Drag the entire group to your preferred position within the Product information section.
7. Click Save to apply your changes.

Feature Limitations

• Tiered Pricing: This component currently does not support the display of tiered pricing.
• Placement Restriction: This component supports bottom-docking on the Products page only. It does not support bottom-docking on other pages such as pop-ups or collection pages, and will not automatically include purchase buttons when added to those pages.

Managing Purchase Button Placement on Mobile Devices

On mobile devices, the Purchase buttons group is bottom-docked to the screen by default so customers can complete a purchase without scrolling. If your store also uses the Product Upsell & Add-ons app to display bundle or combo offers on the Products page, the docked purchase buttons can overlap that app’s content as customers scroll.

If you notice this overlap, switch the button’s mobile position from bottom-docked to inline placement:

1. In the Theme Editor, navigate to the Products page and select the Purchase buttons component.
2. Locate Mobile buy button position and change it from Sticky floating footer to Built in page.
   
3. Click Save to apply your changes.

Customizing Page Layout

Enabling Flexible Horizontal Layouts within the Products Page

The Content container introduces a new structural layer within the Products page, allowing you to arrange product information blocks horizontally rather than being restricted to a single vertical stack. This enables modern layout designs such as placing the Quantity selector beside the Purchase button, or positioning a Wishlist button next to the product title, without custom development.

How to Set Up

1. From your SHOPLINE admin, go to Online Store > Design. Choose an OS 3.0 theme and click Design to enter the Theme Editor.
2. In the Theme Editor, navigate to the Products page.
3. Under Product > Product information, hover over Product information, click + Add content, and select Content container under Theme. This container acts as an intermediate layout layer.
4. Hover over the container, click + Add content, and add the product information blocks you wish to arrange horizontally, such as Title, Price, or Quantity selector. Drag and drop the blocks to adjust their order.
5. Click Content container to configure the layout, including block arrangement, margins, and sizing. Use the layout controls to place multiple components side-by-side.
6. Click Save to apply your changes.

Feature Limitations

• Theme Availability: This feature is supported by all OS 3.0 themes except the Bottle theme.
• Placement Restriction: The horizontal layout control is available only within the Content Container under the Product information section. It does not override the vertical arrangement of the Products page template as a whole.