High-quality images for products can take many forms. For product pages, merchants often use clean, minimal product photography. Meanwhile, merchants get more creative with images for the home page—displaying several products together, for example, or showing people engaging with the products. For these detail-rich images, Empire empowers merchants to connect their media and products using the Shoppable image home page 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 home page section.
Add Shoppable image to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Shoppable image
- Click the section, then Add
Include a section heading
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 home 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.
Not seeing this section?
Update to the latest version with
Please note that the Theme Updater App is only compatible with Empire versions 2.3.0 and up. Earlier theme versions require a manual update.
Registration is required to use the app. Subscription charges may apply.