High-quality images for products can take many forms. For some pages, merchants might use clean, minimal product photography. For others, displaying several products together or showing people engaging with the products may be more effective. For these more detail-rich images, Empire empowers merchants to connect their media and products using the Shoppable image section.
Use the theme editor to include a section heading, assign an image to the section, identify products in the image, customize the product tooltip, accompany image with text and call-to-action, and arrange the text for the Shoppable image section.
Include a section heading
Click the section to open its settings.
Introduce the section by adding text to the Section heading field.
Assign an image to the section
Click Select image to locate your image.
Use the Image width dropdown to select a layout option for the image and text.
The options are:
- Full width
- Two thirds
Identify products in the image
Click a Product block to open its settings.
Assign a product by clicking Select product, then 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).
When a customer selects View product, the section opens a modal window with all the products included in the image. Similar to a quickshop window, customers can add products to their cart without leaving the page.
Customize the product tooltip
Use the Product tooltip link text field to control the call-to-action link included in the product tooltips.
Accompany image with text and call-to-action
Include a Heading and Subheading by entering text in the provided fields.
Use the Button label field to control the copy displayed for the call-to-action button.
Then assign the product page link using Button link.
Select either Primary or Secondary from the Button style dropdown.
Arrange the text
Use the Text alignment options (Left, Center, and Right) to arrange the alignment for your text.
Select one of two Text position options to set the text to appear to the Left of image or Right of image.
This only applies to the Half or Two thirds options for the Image width. Full width will place the text portion below the image.