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 are more effective. For detail-rich images, Empire empowers merchants to connect their media and products using the Shoppable image section.
Add this section to
Customize section settings
Click the Shoppable image section to open its settings.
Include a Heading with the provided 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
Product tooltip link text
Use the Product tooltip link text field to control the call-to-action link included in the product tooltips.
Add an optional Heading and Subheading with the provided fields.
Add text to the Button label field and connect the Button link.
Select Primary or Secondary for the Button style.
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.
Identify products in the image
Click a Product block to open its settings.
Assign a product by clicking Select product.
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.