How to Enable Image PreviewsUpdated 9 hours ago
This feature allows you to display dynamic image previews on products assigned to a Blueprint template. When a customer selects specific customisation options, they are shown a visual representation of their choice, which helps increase buyer confidence and conversions.
Prerequisites
None. This feature is available on all plans for options with set values (such as dropdowns, radio buttons, and checkboxes).
Step-by-Step Instructions
Open the Blueprint app from your Shopify Admin.
Navigate to Templates and click the template you would like to offer image previews on.
Scroll down to Product Options and click on the specific option you want to manage.
In the right-hand panel, locate the Use in image previews setting and toggle it on.
Click Save and close the option screen.
Back on the template management screen, scroll down to Product Selection.
Click the Image Previews button that is now available next to each product.
A list of your possible option and value combinations will load. Next to each combination, add the image that reflects the specific customization, then click Save.
In your Shopify Admin, navigate to Sales channels > Online Store and click Customize to open the Theme Editor.
Use the top dropdown menu to switch to your product page template.
Click Add block and select the Blueprint Image Preview app block.
Drag the app block to the relevant position on your page and click Save.
TIP
By default, the display mode setting for this app block is set to Replace. This automatically swaps your standard uploaded product image with your custom preview image when the matching customisation options are selected.
You can easily adjust this in the block settings:
Modal: Shows the preview image in a pop-up window (triggered by an on-page button).
Inline: Shows the preview image directly on the page, exactly where you placed the app block.
Verification and Next Steps
To test that your setup is working, navigate to your online store and view a product assigned to this Blueprint template. Select the customisation options you just configured. The matching preview image should display based on the display mode you selected in the Theme Editor.