*Note: This feature is only available for Taiwan/ Hong Kong stores.
SHOPLINE's "Product List Page Displays Variations" app enables you to exhibit multiple product variations and present different product images at once. This lets your customers quickly browse the differences, such as color, price, size, etc., thereby increasing product visibility, improving online store conversions, and enticing every visitor to linger and place an order.
This article will cover the following:
⚠️ Before you start, please be reminded that:
- To keep the "Product List Page Displays Variations" app, please purchase the full version to access more features within a 14-day trial period.
- Currently, only the Ultra Chic theme template is supported.
- While using this app, do not set "Shop All" as the default homepage, or it may lead to the malfunction of features. Please navigate to Admin > [Online Store Design] > [Pages] > [Default Homepage] to confirm or edit the settings.
1. App installation
Go to Admin > [Apps] > [Apps Store], find "Product List Page Displays Variations," and click Free trial on the top right. For more instructions, please refer to Free trial period.
You can go to [Apps] > [My Apps] to view the details of this app, which also means you have successfully installed the app. For more instructions, please refer to My Apps.
🔔 Remark: App re-authorization
SHOPLINE will regularly update and optimize app features. Some extension features
may require you to reauthorize to access successfully. Proceed to [Apps] > [My Apps]
and you may see a prompt at the top of the page indicating the need to reauthorize
the app features. You can choose to reauthorize or close the prompt message. Once
closed, the message will not appear again.
For more details, please refer to Apps Store.
2. App setup
Step 1. The first variation
Go to Admin > [Products & Categories] > [Products], click ⊕ Add/ Edit, and select the "Variations" tab to set up your first variation. For example (see the image below), "Color" is the first variation for this product.
*Notes:
- This app supports displaying the 'first variation" for products. In the case below, the "Color" variation will be shown on the Product List Page. If you want to display "Size," please move it upward as the first variation.
- For more info about product variation, please refer to Product Variation and Variant | Products.
When importing products using the "Bulk Upload Products (New)" feature, the first variation corresponds to the field "Specification Name A (English)." For more details, please refer to Specification and Variation.
Step 2. Edit Variant Image
Add or Edit product variant images, and upon completion, click Save. For more info, please refer to Upload Photos For Product Variations.
*Notes:
- If there are no images for that variant, the system will automatically display the first Product Photo (Main).
- If there are multiple images for that variant, the system will default to displaying the default image. You can click on Edit Variant Image > Reset to default image to do so. For more details, please refer to step 4 of this article to modify Variant Images.
- If there are no variant images for the first variation, the system will automatically display the next available variant image. In the case below, the first variation is white, and white has sizes M and L (the second variation). If there is no variant image for the "white M" variant, the system will auto-display the variant image for "white L."
When importing products through the "Bulk Upload Products (New)" feature, the corresponding field is "Variation Image." For more details, please refer to Specification and Variation.
Step 3. Online store page settings
After saving the product variation settings in the aforementioned two steps, navigate to [Online Store Design] > [Pages], select the "Advanced / Text Page" tab, and click on the Add Page drop-down menu> Advanced Page or Edit.
*Notes:
- This app only supports SHOP Builder with the Ultra Chic theme template. Please ensure that the online store page is labeled with the
icon and that the store layout is set to Ultra Chic. For more info, please refer to Introduction｜SHOP Builder.
- Do not set "Shop All" as the default homepage, or it may lead to the malfunction of features. Please proceed to Admin > [Online Store Design] > [Pages] > [Default Homepage] to confirm or edit the settings.
Step 4. Store Settings
After entering SHOP Builder, click on [Store Settings] > [Product].
Step 5. Individually display variation images
Locate the drop-down menu under the "Product Variation Display Style" section, check "Individually display variation images" under "Display type," and then click Save > Publish.
*Note: This app supports the individual display of the first product variation on the Product List Page, Category Page, and Promotion Page.
3. Storefront display
i. Showcase
Customers can view individual variations for multi-variation products on the storefront. The product names are the same, but if there are differences in variation details, they will be presented together in the product list. Find the example below:
- The first variation for long-sleeved tops pertains to "Color," with a total of three options. It displays three items named "long-sleeved top," each with a different color variation.
- The original price of the long-sleeved top is $599, and the special price for the grass-green color is $399. It shows three items named "long-sleeved top," but the price for the grass-green one is different.
- The in-stock quantities for the long-sleeved tops are different. It displays three items named "long-sleeved top," but the brown is sold out.
- The first variation for short-sleeved tops is color, and the second one is size. Size M is priced at NT$199, and size L at NT$299. The system supports displaying the first variation, so it shows three items named "short-sleeved tops" based on color. Among them, the white color is presented in the price range of NT$199 to NT$299 (the second variation).
ii. Search & sort
a. Keyword search
According to the relevance of the keywords entered by the customer, other products may be interspersed with individual variations of a particular product.
If you wish to learn more about searching by keywords, please refer to Search Products｜Products.
b. Sorting method
According to the sorting method chosen by the customer, other products may be interspersed with individual variations of a particular product.
If you wish to learn more info about product sorting, please refer to Product Sorting on the Storefront.
c. Category/ Filter
Customers can quickly find products with specific variations through the Category Page or by using the "Apply Filters" feature.
If you wish to learn more info about advanced filtering, please refer to Shop Category Advance Filtering.
4. Notes
- The following pages DO NOT support displaying individual variations of products.
- Product set
- Add-on
- Free gift
- Product Details Page > Related Products
- [Online Store Design] > [Pages] > [Advanced Page] > the "Layout" section > + Widget > Category.
If you wish to learn more info about product widgets, please refer to Category Widget | SHOP Builder.
- When exceeding the advanced filters' upper limit, the system will automatically hide some filtering conditions. For more details, please refer to Online store filtering intro.
- When the prices for individual variations of a multi-variation product differ, please go to [Settings] > [Product Settings] > Storefront Extension Features to switch on the "Show Price Range in the Store" toggle to avoid confusing your customers.
If you wish to learn more info about the price range, please refer to Product Variation and Variant | Products.
Read more
Comments