Showcase your products together in a single image with Turbo's Shoppable image section. Use high-quality images to curate product combinations, then connect and position the product hotspots for easy access.
Add this section to the
Section settings
Click the Shoppable image section to customize its general settings.
Wide display
Enable Wide display for the section to span the full width of the window. Otherwise, the section will be limited by a horizontal container.
Text animation
Have your text Fade down, Fade in, or Fade up by selecting one of these three Text animation options. To disable text animation, select None.
Transition
Have your shoppable images Fade or Slide into view by selecting a Transition setting.
Autoplay
Adjust the Changes slide every setting to activate autoplay and set the duration for each image's view (between 1-12 seconds). Leave this setting at its default 0 to disable.
Heading
Add a Heading using the provided field. Leave the field blank to exclude a heading.
Enable quick shop
When a customer clicks on a product hotspot, a View product button displays and directs to the product page. For this button to open a quick shop instead, select Enable quick shop.
Bottom bar
Below each Shoppable image block is an optional Bottom bar.
Activate this feature by selecting Enable bottom bar.
Include images for each product in the block by selecting Shop product thumbnails. Select a Product thumbnail styling option to have the images display Full width or Natural.
The height of the first image determines the maximum height of the other images and call-to-action. To adjust the height, try placing a different image or product first.
Connect customers with another page by enabling Shop call-to-action. Customize the page links individually through the block settings.
Customize shoppable image blocks
Each image has its own block to control individual settings and connect different products. Open the preloaded Shoppable image block to customize its content.
Click (+) Add Shoppable image to add another Shoppable image block.
Image
Click Select image to assign a background image to the section.
Product hotspots
Connect up to four products for each Shoppable image block by customizing the settings for Product 1, Product 2, Product 3, and Product 4.
Select product
Click Select product to connect a product to the block.
Focal point for bottom bar images
If you have the Bottom bar and Show product thumbnails enabled, use the Product thumbnail focal point setting to adjust how the image fits into its container.
Adjust hotspot position
Identify the product position in the image using the axis sliders.
Use the Horizontal axis slider to shift the position to the left or right (x-axis).
Use the Vertical axis slider to shift the position up or down (y-axis).
Button label
Adjust the text for the View product button. This button directs to either the product page (Enable quick shop disabled) or a quick shop window (Enable quick shop activated).
Customize the call-to-action
If you have the bottom bar enabled, customize the content and appearance for the call-to-action button.
Headings
Add an optional Heading and Subheading with the provided fields.
Text alignment
Adjust the Text alignment setting to align the call-to-action text to the Left, Center, or Right.
Button
Connect a collection, page, or another URL to the Button link field, then customize its text with the Button label field.
Select one of five Button color options. The options are Primary button, Primary button (outline), Primary button (solid), Primary text button (outline), and Primary text button (solid).
Call-to-action background color
Adjust the Call-to-action background color to select a new color for the feature.