Designing Shopping Bag Page

A well-designed shopping bag page helps increase conversion rates.

Access Path to Settings

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 Shopping Bag.

Configuration Steps

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

• Setting the Notice board: The Notice board component is displayed at the top of the shopping bag page. The content of the Notice board can either be synchronized with the app homepage Notice board or set independently. If you choose Synchronize with App Homepage Notice board, 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.
  
  
  
  
• 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 the product detail recommendation enabled for the display or hide functionality to be available for product recommendations. If the store has not installed the "Product Recommendation" plugin or the plugin has not enabled product detail recommendations, the product recommendation module will be grayed out and cannot be displayed. You can follow the prompts below to proceed.

• Setting Up Custom components: You can create a custom component in the Shopper App admin panel and embed it into the shopping bag 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.
  
  
  
• Setting up the Floating icon: Add a floating icon to the shopping bag 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 shopping bag 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 checkout bar: The floating checkout bar allows specific sections to remain fixed on the screen, enabling users to proceed to checkout at any time during browsing. This helps improve the user experience and boost conversion rates. By default, the system provides two options: Add discount code field and Checkout button. You can also click + Add content to insert a custom component to use as the floating checkout bar. 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.