Function Overview #
This feature is designed to enhance users’ online shopping experience, especially when purchasing items highly related to vehicle models. Through a matching mechanism of compatible data, it ensures that the items selected by users are compatible with their vehicle models. After users add items to their shopping cart, the system allows users to check whether the selected items match the registered vehicle model, thereby reducing returns due to incompatibility. Additionally, this matching information will be recorded and displayed as part of the order information after the user checks out, providing important reference for subsequent shipping processes.
The compatibility data between vehicle models and items is shared with the “VFitz Search Bar,” eliminating the need for separate entry. It allows for one-time setup and shared use.
Feature Introduction #
① On the shopping cart page, we provide each user with a real-time product compatibility prompt feature. When users add items to their shopping cart, the system will automatically detect whether these items are compatible with the vehicle model the user has selected. If the items are fully compatible with the vehicle model, a positive compatibility prompt will be displayed (e.g., “Perfectly compatible with your vehicle model”). If there are potential compatibility issues, a corresponding warning or suggestion will be shown (e.g., “Please note that this item may not be fully compatible with your vehicle model. Please confirm before purchasing”).
Display and Modification of Vehicle Model Information #
② Prominently displayed on the shopping cart page is the vehicle model information currently selected by the user, ensuring that users are always aware of the basic settings of their shopping environment. To enhance the user experience, we have specially set up a “Modify Vehicle Model” button. When users click this button, they will seamlessly switch to the vehicle model selector interface, allowing them to adjust their vehicle model selection according to their actual needs. The vehicle model selector interface provides an intuitive and easy-to-use operation interface, ensuring that users can easily complete vehicle model changes.
Order Page Function Description #
By recording and displaying the compatibility between vehicle model information and products, our system effectively reduces the risk of returns due to products not being compatible with users’ vehicle models. The implementation of this feature not only enhances user satisfaction with the shopping experience but also saves businesses unnecessary logistics costs and time costs.
Display of Vehicle Model Information #
①After the user completes the checkout process, the order information page will automatically record and display the user’s vehicle model information along with the compatibility of the purchased items. This design aims to enhance the transparency of order processing, ensuring that shipping staff can quickly and accurately confirm the correctness of the user’s purchased items. Additionally, it provides a solid basis for subsequent return or exchange services that may occur.
Product Compatibility Prompt #
②On the order page, we will display the compatibility results for each item individually, following the order in which they appear in the user’s shopping cart. This sorting method helps users clearly understand the compatibility status of each item, thereby enhancing shopping transparency.
- Product Identification: For items with an SKU (Stock Keeping Unit), we will directly display its SKU. For items without an SKU, we will display its product ID as the unique identifier.
- Compatibility Status: For items that have been verified as compatible, we will display “success,” indicating that the item is fully compatible with the user’s selected vehicle model. For items with unknown compatibility or potential incompatibility issues, we will display “unknown,” reminding users to pay attention and confirm.
Example：
Assuming the user’s shopping cart contains the following items, and they have been checked out in a specific order:
- Item A (SKU: 100001), Compatibility Status: Unknown
- Item B (No SKU, Product ID: 46661420908863), Compatibility Status: Success
On the order page, it will be displayed as follows:
- Item A: Item#2 SKU: 100001 Validity: Unknown
- Item B: Item#0 ID: 46661420908863 Validity: Success
Installation #
In the theme editor, select the “cart” template and follow the steps in numerical order as shown in the figure to successfully install the “VFitz Cart” component. After installation, click the “save” button in the top right corner.
Composition of the Theme Editor #
- ① Product Compatibility Information;
- ② Theme Editor Debugging Function: This area is only displayed within the editor and will not appear on the official page. It will display reminders of configuration errors or abnormal information.
- ③ Theme Editor Debugging Function: This simulates the display of compatibility information in orders, eliminating the need to repeatedly switch between the order management page and the theme editor during debugging, and is intended for use during the debugging process.
- ④ Vehicle Model Display and Vehicle Model Switching Function;
- This area is divided into two parts: Compatibility Settings and Vehicle Model Selector Settings (similar to the settings for the VFitz Search Bar).
- ⑤ Module Attribute Settings Area;
Text Content Settings #
The image lists all possible text content that may be displayed along with their corresponding setting locations. The red connecting lines in the image indicate the corresponding relationships.
FAQs #
The Shopping Cart is Empty #
Error: The current shopping cart is empty. Please add items to the cart
This prompt appears when there are no items in the shopping cart. Simply add items to the cart to resolve this issue.
Product Selector Error #
Error: The element displaying the matching verification result was not found.
When this prompt appears, the affected function is that the compatibility reminder information below the product name cannot be displayed correctly, while other functions remain unaffected.
Each theme has its own web page element structure. We provide default support for most Shopify official themes and their extended themes. For highly customized third-party themes, there may be situations where the product selector cannot be found.
The solution is to find the correct selector and fill it in the “Product Selector” field in the component settings area on the right, then save the settings.
If you are not familiar with web selectors, please contact us and we will remotely assist you in resolving the issue.
