To offer a better experience for the growing number of mobile customers, we've fully optimized the mobile "Product Details Page" to align with mobile browsing habits. The new, intuitive layout is designed for a more seamless shopping journey, enhancing both efficiency and overall customer satisfaction.
⚠️ Before you begin, please note: If you'd like to enable the new mobile product details page, please go to SHOPLINE Admin > [Online Store Design] > [Pages] to access "Product Details Page". For detailed setup instructions, please refer to: [Coming Soon] Standard Page: Product Details Page.
In this article, you'll find:
1. Product purchase section
i. Added product thumbnails
If images are set for each variation, switching variations will automatically move the corresponding thumbnail to the front.
ii. Streamlined key purchase information
Centralized main product images, pricing, and variation options to provide customers with a smoother shopping experience.
- If a product has reviews, they will appear below the product name. Tap "X Reviews" next to the rating to open a pop-up window for customers to browse all product reviews.
iii. Refined page details
Tapping "Add to Wishlist" will redirect customers to the login/sign-up page. |
Refined the design of product subscription details and social channels sharing buttons. |
iv. Adjusted preorder and low inventory reminders
Adjusted the preorder note style to blend seamlessly into the page layout. |
Adjusted the placement of low inventory reminders for a smoother shopping experience. |
v. Optimized product variation options
Product pricing
If a product has varying prices across different variations, a price range will be displayed. The specific price will appear once a customer selects a variation.
*Example: A product with both sale and regular prices (where at least one variation is on sale)
Price before variation selection |
Price after variation selection |
No pre-selected variations by default
When entering the product detail page, if no variation is selected, the page will display an unselected state based on your product variation settings.
Label swatches / image selector: no selection by default |
Dropdown selection: defaults to "Please select" |
Product variation display sequence
Once you select the first level variation, the system will only show matching options for the second and third levels, automatically hiding any non-matching options.
*Example: If green round essential oil soap is only available in large and medium sizes for pre-order options, selecting "green" will hide the small size and in-stock options.
*Notes:
- Since the system checks matched variant options sequentially, the available options for the second and third levels will only update once the first level variant is selected.
- If a selection no longer matches other levels when switching variation options, it will reset to the unselected state for customers to select again.
Sold-out reminder for out of stock variations
- If a variation is out of stock, it will be grayed out to indicate it is sold out, though customers can still select it.
- After selecting the first level variant, the system checks the inventory of matching options for the remaining levels and grays out any out-of-stock options.
- Since the system checks the inventory status for matched variants sequentially, the status for the second and third levels can only be checked once the first level variation is selected.
*Example: If you select "size" and "pre-order/in-stock" options first, you still need to select "color" to check the stock for that variant.
vi. Key buttons pinned to the bottom
When entering the product details page, the following key buttons will automatically be pinned to the bottom of the screen:
- Add to cart
- Buy now
- Preorder now
- Contact us
- Coming soon
- Available time over
- Notify when in stock
*Examples:
Add to cart / Buy now |
Notify when in stock |
vii. Added "Select a variation" reminder
If a variation is not selected before performing the following actions, a "Please select a variation" reminder will appear, and the page will automatically anchor to the variation options section:
- Add to cart
- Buy now
- Preorder now
- Notify when in stock
- Add to wishlist
- Check available pickup stores
*Examples:
2. Product summary section
i. Applicable promotions
This section displays the promotions applicable to the product. The first 3 promotions are shown by default. Click "All offers (n)" to expand and view all available offers.
Promotion display content
To make promotion details clearer for customers, the system will automatically generate display text based on your promotion settings. The format is as follows:
{Member Type} + {Promotion Type} + {End Date} + {Promotion Name} + {Applicable Scope}"Member Type" and "Promotion Type" are highlighted for emphasis, with the text color defaulting to your store's theme color. If your store template supports SHOP Builder, the product promotion label colors will be applied instead. The rules for generating the promotion text display are as follows:
| Member Type |
Display different text based on the target group of the promotion:
*Note: Similar to the web version, promotions targeting members or specific customers will only be displayed after the member logs in. |
| Promotion Type |
Display different text based on the promotion types:
|
| End Date |
The system will display the promotion's end date in gray text as "Until {MM/DD hh:mm}". Clicking on the time will show a tooltip: "Displayed in your time zone". |
| Promotion Name |
Display the full promotion name: |
| Applicable Scope |
Display different text based on the promotion's applicable scope:
*Note: Promotions with a promotion page will display a ">" arrow that redirects customers to the page when clicked. |
ii. Product summary
Located below the applicable promotions, this section displays the "Product Summary" content, providing customers with key product highlights while browsing promotions.
3. Product details section
The top tabs in the product details section include "Description", "Details", "Reviews" and "Recommended". Each is detailed below:
i. Description
This section displays "Description" content and is expanded by default.
ii. Details
This section displays content for "Additional product images", "Delivery options" and "Payment options" in sequence.
Additional product images: Displays the "Additional product images" content and is expanded by default.
*Note: Image spacing here is standard across all themes.
- Delivery options and payment options: Displays the full names of available "Delivery options" and "Payment options", hidden by default.
iii. Reviews
This section displays "Customer Reviews" with up to 2 latest reviews shown on the page. Click "Load more reviews" to open a pop-up and view all customer reviews.
*Notes:
To display reviews in the storefront page, go to SHOPLINE Admin > [Products and Categories] > [Product Reviews], click "Product Review Setting" and enable the "Product Review" feature.
The new mobile product details page doesn't support Amazon product reviews integration. Therefore, the review source filter will not be displayed here.
iv. Recommended
This section displays "Related products" using your custom product layout.
If no data is entered for the top tabs in the admin, the section will not appear on the product details page. Clicking any tab will anchor the page to its corresponding section.
*Example: If the "Description" is empty, the section will be hidden.
Read more
- Product Variation and Variant | Products
- Customized Variant Selector with Image
- Customize Variant Selector with Label Swatches
Comments