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 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, select the desired display style, and decide whether to show the content by default.

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.)

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.)

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.