RideStyler’s Custom Product Details integration allows you to connect the Visualizer to an existing shop’s products by connecting your custom product urls with the Visualizer’s products. By default, the Custom Product Details integration is disabled, but turning the feature on is easy – just follow the steps in this article!
Adding the Custom Product Details Integration
1. Navigate to the Visualizer page inside of the RideStyler Account portal.
2. Click on the Integrations tab and activate the Custom Product Details integration.
Creating your custom product URL
Once you’ve activated the integration you need to setup the URL template. This URL template will interpolate our product data into your template. This URL will then take the place of the current product details link in the visualizer. Now when user’s click on a product in your visualizer they’ll be directed to your products.
Here’s an example of a custom wheel url:
https://YourWebsite.com/product/{{Wheel.Front.WheelBrandName:lowercase:spacetodash}}-{{Wheel.Front.WheelModelName:lowercase:spacetodash}}-{{Wheel.Front.WheelModelFinishDescription:lowercase:spacetodash:noslash}}/?attribute_pa_diameter={{Wheel.Front.DiameterMin}}&attribute_pa_width={{Wheel.Front.CenterboreMM}}&attribute_pa_bolt-pattern={{Wheel.Front.BoltPatternDescription}}
The example above uses data properties from our wheel data model which can all be found at our API documentation page. Make sure you specify Wheel/Tire depending on what product URL you’re creating as well as Front and Rear for respective front and rear tires/wheels.
Once you have your data template laid out there are a few different formatters that can be used to get data to look the way you want or need in the URL these are the “:lowercase”, “:spacetodash” variables you see in the example. All of these variables and their descriptions can be found on the Custom Product Details Github.