Designing the Product Details Page

The product details page plays a crucial role in the in-app shopping experience. A well-designed product page can increase conversion rates by providing clear and engaging product information. In the design editor, you can customize elements such as the announcement bar, product recommendations, recently viewed items, and more to optimize your product details page. This guide will walk you through the setup steps and available customization options.

Steps to Configure the Product Page

To design the product details page for your app:

1. In your SHOPLINE admin panel, go to Channels > Shopper App > App Design, then click Design to open the design editor.

   

2. From the dropdown menu at the top, select Product details page and begin configuring the necessary settings.

   

3. After finalizing your design, click Save to store your draft or Apply to publish the changes immediately.

   

Available Setting Options

This section outlines the settings you can configure for your product details page. 

Selecting a Preview Product

When you open the product details page editor, the preview area automatically displays the first product assigned to the Shopper App sales channel. Click the dropdown arrow to switch to another product for preview purposes.

Configuring the Top Navigation

The Top navigation module allows you to customize the components that appear in the header of your product details page. The module includes three configurable sections: Top left icon, Center, and Top right icon. Each section is designed to enhance navigation and improve user engagement.

Available Components for Each Section

Configuring Top Navigation Components

You can configure the Top navigation module by following these steps:

1. Go to the Product details page, then click Top navigation to expand the menu.

2. Select the section you want to configure: Top left icon, Center, or Top right icon.

   

3. From the Component type dropdown, choose the component type you want to add:

•  
  • Icon: Click + Add icon to insert up to 3 predefined options. 
  • Image: Upload a branding or promotional image as needed.
  • Search bar: Add the predefined search bar to provide customers with a convenient way to browse your site.

4. Click Save or Publish to apply your settings.

Configuring Top App Bar Style in Product Album

The Top app bar style setting in Product album controls how the announcement bar is displayed in relation to the product gallery.

• Overlay: The announcement bar appears below the product gallery, and the product image expands to cover the header area.
• Fixed: The announcement bar appears above the product gallery, separating the header and product gallery into two distinct sections.

Configuring the Announcement Bar

The Announcement bar appears at the top of the product details page and can either sync with the home page's announcement bar or be configured independently:

• Sync with Home Page Announcement Bar: Inherits text, color, and other settings from the home page and cannot be modified.
• Set Independently: Allows customization of the announcement text, color, and publication time. You can also choose to show or hide specific announcements.

Configuring Product Information

The Product information section is positioned directly below the announcement bar, and its placement cannot be changed.

• Product Summary: A brief product description displayed below the product name.
• Ratings: Located below the product summary. To enable product ratings, you need to install the Product Review app. Refer to this guide for more details on product reviews.
• Style Selection: Allows you to link multiple products to a single product page by configuring product groups with dynamic sources. With this setup, different products can be displayed within the same product page. 
  • Product group – Product options: Supports linking to dynamic sources with the data type "Product." 
  • Product group – Option name: Supports linking to dynamic sources with the data type "Single-line text."

For more information about dynamic sources, please refer to Guide to Using Metafields Feature.

Configuring the Product Description

• Edit the title and select products to display: You can either customize the title directly or set it using a dynamic source linked to the "Single-line text" data type. To display product descriptions for specific products, use Conditional tags to select the relevant product group. For more information, please see the Setting Up Product Tags guide.
• Configure the display style: Choose whether to display an icon and select your preferred display style. If you choose Accordion, you can further set the default state to Expand all, Expand some, or Collapse all.

Configuring Custom Details

You can add up to 10 Custom details components.

• Edit the title and select products to display: You can either customize the title directly or set it using a dynamic source linked to the "Single-line text" data type. To display product descriptions for specific products, use Conditional tags to select the relevant product group. (For more information, please see the Setting Up Product Tags guide.) Next, select the Content type. You can choose to customize the text content or directly enter a link to the target page.
• Configure the display style: Choose whether to display an icon.

Configuring Associated Collections

The Associated Collections component allows you to link a dynamic source with the "Product Collection" data type. For more information about dynamic sources, please see the Guide to Using Metafields Feature.

Configuring Custom Images

You can add multiple Custom images components, upload images, set destination pages, and use conditional tags to display images for specific product groups.

Product Video Show

The Product Video Show component can be set up using a dynamic source linked to the "URL" data type with a value type of "Multiple values." For more information about dynamic sources, please see the Guide to Using Metafields Feature.

Configuring Recently Viewed Products

The Recently Viewed component can be hidden or deleted. You can also customize the title and display style.

Configuring Product Reviews

To enable the Product review component, install the Product Review app. If the app is not installed, the component will be grayed out with an on-screen prompt for installation. (See this article for more information on product reviews.)

For both the Product Review and Questions & Answers components, you can configure the component title, call-to-action button text, "View all" text, and the default number of displayed reviews or questions.

Configuring Product Recommendations

To enable the Product Recommendation component, install the Product Recommendation app. If the app is not installed, the component will be grayed out with an on-screen prompt for installation. (See this article for more information on product recommendations.)

Setting Up Custom Components

You can create a custom component in the Shopper App admin panel and embed it into the product details page of your store app to enhance its design or functionality. Click + Add component, then go to the Custom block section to select the desired component. Alternatively, click + Create a custom block to open the component editor and create a new one. For more details on creating custom components, please refer to this Help Center article.

Components marked as In dev. are unpublished and cannot be applied directly to the live version of your app. However, you can preview these components using Snaplook. Once you’ve confirmed the content is correct, you can publish the component via the code editor and apply it to your live app. For details, see the Saving and Publishing Your Design section.

Configuring the Floating Icon

You can add a Floating icon to the product details page that remains visible as users scroll. This icon can be linked to either a live chat service or an event page to enhance customer support efficiency or drive campaign engagement.

There are two configuration options available: If you select Synchronized from the floating icon on the home page, the icon will inherit the homepage settings and cannot be changed. If you select Independently set, you can configure a separate floating icon specifically for the details page, including the following settings:

• Basic settings: Name the icon, choose its position, and upload an icon image to be displayed in your app.
• Feature type: Select whether the icon links to an Event page or a Live chat feature:
  • If you choose Event page: Set the destination page for redirection.
  • If you choose Live chat: 
    • Select the chat service to use. Shopper App currently supports integration with Shulex, an AI-powered solution for real-time customer support. For more information, refer to this guide.
    • Decide whether to enable the Unread message notice. When enabled, a red dot will appear to notify users of any unread messages.
• Activation time: Optionally, set a schedule for when the floating icon should be published.

Setting Up the Floating Toolbar

The floating Toolbar allows specific toolbars to remain fixed on the screen, enabling users to take action at any time while browsing. This helps improve the user experience and increase purchase conversion rates. By default, the system provides an Add to cart button, but you can also click + Add content to insert a custom component to use as the floating toolbar. For detailed instructions, see the Setting Up Custom Components section.

Saving and Publishing Your Design 

After completing your edits and confirming that the preview appears as expected, you can use the options in the top-right corner to proceed:

• Save: Temporarily saves your current edits for future updates. This will not affect the live version of your store app.
• Publish > Publish to Snaplook: Publishes the component to Snaplook for preview and testing. Use this option to verify functionality and appearance before making it live. For more information, refer to the related Help Center article. 
• Publish > Publish to live App: Publishes your changes to the live version of your store app, making them visible to end users.