With the AutoSync integration, you can let customers preview how wheels and tires will look on their vehicle before making a purchase. The integration adds two tools to your store: Visualizer and View on Vehicle.
In this guide, we’ll explain these features in detail, show how each of them works, and walk you through the setup process – both in X-Cart and your AutoSync dashboard.
Before you begin
Enable View on Vehicle and the AutoSync Visualizer in your add-on settings.
What is Autosync Visualizer?
The AutoSync Visualizer is a page where customers can search for wheels and tires and preview how they will look on their selected vehicle. Once satisfied, they can click Buy to purchase the products directly from your store.
 |
|
Please note that the Visualizer shows all products from the AutoSync database and is not fully synchronized with your X-Cart store catalog. This means customers may see and preview products that are not available for purchase in your specific store. In this case they will see a popup "Product not found in our store".
For products that are available, the number of items added to the cart will follow your store rules:
The Minimum Purchase Quantity setting, and/or
The customer’s membership level requirements
💡 For example, if a product is configured to be sold only as a kit (like a full set of wheels), the Visualizer will automatically add 4 wheels to the cart instead of just one.
Adjusting AutoSync Dashboard settings
To enable the Visualizer for your store website visitors:
Enable the AutoSync Visualizer page in the AutoSync add-on settings.
Sign in to AutoSync portal and open the page for your API key in the API > API Keys section.
Ensure that the domain of your X-Cart online store has been added to the Allowed Domains list for the respective API key.
Under Notify Request for Quote By, ensure that the option "WebForm" is enabled.
Expand the CONFIGURE WEBFORM section.
Adjust the settings in the CONFIGURE WEBFORM section.
First, in the URL (Use HTTPS) box, specify the URL https://your_store_domain/?target=auto_sync_cart&action=redirect_to_product
(Be sure to replace the "your_store_domain" part with the actual address of your X-Cart store.)
Second, enable the Redirect to external URL to fill RFQ form setting.
Third, set the Request Type to POST.
Fourth, configure the Data Mapping settings as follows:
"tire_id": "TIRE_ID"
"wheel_id": "WHEEL_ID"
Expand the VISUALIZER section.
Adjust the settings in the VISUALIZER section.
First, scroll down the page to the setting Limit Number of RFQ Products to 1 and adjust it to YES.
Then, set the RFQ Action Label to "Add to cart".
Save your changes by clicking the Save button.
Enabling the AutoSync visualizer in X-Cart
Setup requires enabling the corresponding options in the AutoSync API Integration settings, allowing your store’s domain in the AutoSync dashboard, and configuring webform and visualizer settings to handle product redirects correctly.
How to access the AutoSync visualizer as a customer
By default, the Visualizer page appears in your store’s header menu next to the logo. Click the three-line menu icon to expand the menu, then select Visualizer.
 |
|
Customer experience with the visualizer
On the Visualizer page, visitors can:
Search by vehicle model using the search box
Or use the “Shop by vehicle” filter to select their vehicle
Once a vehicle is selected, they’ll see a list of compatible wheels and tires to explore.
Adding AutoSync visualizer to the homepage
If you want the Visualizer to appear on your store’s homepage—rather than a separate page—to boost customer engagement, follow these steps:
In your X-Cart Admin, go to Design › Themes › Customize Storefront.
Under Advanced settings, click the pencil icon next to Template Editor.
Insert the code snippet below 👇 into the template editor where you want the Visualizer to appear.
📟 Code snippet
📟 Code snippet
<div id="autosync-visualizer"></div>
<div style="display: none">
<script src="https://vvs.autosyncstudio.com/js/Autosync.js"></script>
<script>
document.addEventListener(
'DOMContentLoaded',
function() {
xcart.bind(
'mm-menu.created',
function() {
var autosync = new Autosync({
id: 'autosync-visualizer',
key: 'YOUR_API_KEY'
});
}
)
}
);
</script>
</div>
👾 Troubleshooting
If not configured correctly, the visualizer may start loading during the page load. As a result, you might see an empty iframe instead of the visualizer (this doesn’t happen every time). If you run into this, it’s best to contact our support.
What is view on vehicle?
View on Vehicle – shows how a product from your store will look on the customer’s car, directly from the product or category page.
 |
|
This button appears on category pages and product pages for wheels and tires that have the required special images in the AutoSync database. Without these images, the feature won’t be available.
If a customer hasn’t already chosen their vehicle using the Make / Model / Year (MMY) selector, they’ll see a quick pop-up asking them to select one. Once that’s done, the preview will load instantly.
By showing customers how a product looks on their actual vehicle, you can help them shop with confidence and reduce uncertainty before checkout.
How to enable View On Vehicle
In your X-Cart Admin:
Go to Apps › My Apps › AutoSync API Integration › Settings.
Turn on "View on Vehicle".
In your AutoSync dashboard, add your store’s URL to Allowed Domains for your API key.
Ensure the selected vehicle and wheel product have the required formatted images.
Can't find answers you're looking for?
Email us at support@x-cart.com. We will be happy to help!
Related articles