The product detail page is a crucial part of the shopping flow in the app, and a high-quality product page helps increase conversion rates. In the product detail page design editor, you can edit content such as the Notice board, product recommendations, recently viewed items, etc., to achieve the best results.

In This Article

• Setup Steps

Setup Steps

From your SHOPLINE admin panel, go to Apps > Shopper App > App Design and click the Design button to access the design editor. From the dropdown menu at the top, select Product Detail Page.

In the product detail page editor, you can choose the content you want to display, but you cannot arbitrarily add components or rearrange the order.

1. Select Preview Product: Each time entering the product detail page editor, the preview area on the right will default to displaying the first product under the Shopper App channel. Click the down arrow to choose a product for previewing the effect. It is not visible on your customer-facing interface. If you have not yet created any product data or have not marked any products for the Shopper App channel, the preview area will display a No available product message.
   
   
   
2. Setting the Notice board: The Notice board component is displayed at the top of the product detail page. The content of the Notice board can either be synchronized with the app homepage Notice board or set independently. If you choose Synchronize from the Notice board on the home page, the text, color, etc., of the Notice board cannot be edited. If you choose Independently set, you can edit the Notice board text, color, set the publication time, etc., and also hide individual Notice board content.

3. Setting Product Recommendations: You can set the product recommendation module to be displayed or hidden, and you can also set the display style.
   
   
   

   Note: The store must have the Product Recommendation app installed and product detail recommendations enabled for the display or hide functionality to be available for product recommendations. If the store has not installed the Product Recommendation app or the app has not enabled product detail recommendations, the product recommendation module will be grayed out and cannot be displayed. You can follow the image below to proceed.

4. Setting Recently Viewed: You can set the recently viewed module to be displayed or hidden, and you can also set the display style.

5. Publish: After editing and ensuring there are no issues in the preview, click the Apply button in the upper right corner to publish the design to the app.