Add AR Button in Theme Editor and tailor the user interface – For Shopify Stores
Art AR Shopify Theme Editor tutorial to tailor the user interface – For Shopify Stores
In this tutorial, we’ll take a deeper look on how to tailor the button design, color, and background to create a unique and inviting client interaction that complements your art seamlessly. With it you can have a button to allow your clients to visualize your art in augmented reality using their smartphones. It also allows you to have a 3D previewer which is optional. Before continuing with this tutorial please make sure you have already checked the Quick Start tutorial. We now will take a look how to add AR Button in the Shopify Theme Editor. The following steps need to be done only once to setup how all product pages will use the ART AR block in the theme editor.
Get Art AR the Shopify app Here
To get started, let’s navigate to the theme editor of your Shopify store first.
Next navigate to the default product page and add the ART AR block to the default product page.
The ART AR block contains many different options to tailor the AR user interface experience. 📝Important note: Since the default product page in the theme extension shows the first product as example, if that product is not configured for AR correctly using the steps we did then the ART AR button may not appear on the page. The button is smart enough to detect if a product has been configured for AR or not, if it’s not configured then it won’t appear.
The “Only AR Button” checkbox: (enabled by default) indicates that the interface that will be available to the client only contains the “Try It In Your Space” button without a 3D visualizer on the page, this is optional. The Button Text: This is the text that is displayed in the button that the user clicks on to visualize the art in AR. You can modify the text color or background color, the button alignment, the button dimensions or opt to not have text but only the logo. The Poster of 3D viewer: If you have disabled the “Only AR button” checkbox then this is the option to select an image that will be viewed when the load in progress is being performed. Background HDR: If you have disabled the “Only AR button” checkbox then this is the option to select what 3D environment to show in the 3D visualizer. For most stores they prefer to enable to enable the “Only AR button” and keep the options by default. Once satisfied with the result make sure to save .
Congratulations! 🎉 Now your clients can easily with a click of a button see how your art will look like on their real world space. If you have any questions or suggestions feel free to contact us.
📝If your client cannot visualize the art on their smartphone it could be that their smartphone doesn’t support AR. Please check the list of supported smartphones here:
