Split image

A versatile section designed to showcase two images side by side.

What is the split image section?

The Split image section is a versatile section designed to showcase two images side by side. This visually striking layout not only enhances the store's aesthetics but also allows for strategic marketing opportunities.

This section can be used for many purposes, for example to promote featured products, highlight special offers, or showcase lifestyle images that resonate with your brand. Each image can serve as a clickable link, directing customers to specific collections, product pages or external sites, making it a powerful tool for driving traffic and customer engagement.

How to set up the split image section 

Steps

  1. Open the Theme Editor and add the Split image section to the page.
  2. Find the Desktop image height option and set it to your desired height for desktop views.
  3. Next, adjust the Mobile image height for optimal display on mobile devices.
  4. Each Split image section can have a maximum of two image blocks. In each block, several settings can be customized: 
    • Image: Upload the desired image.
    • Image link: Add a URL where users will be directed when the image is clicked.
    • Overlay color and Background opacity: Choose a color for the overlay and adjust the opacity to ensure the overlay text stands out.

  5. Next, add overlay text:

    • Heading: Enter the main heading text to display over the image.
    • Text: Add any additional descriptive text to provide more context.
    • Button text: Specify the text for the button that will appear on the overlay.
    • Button link: Input the URL that the button will link to.

  6. Use the Horizontal position and Vertical position settings to determine where the overlay text will appear on the image.

  7. To display the overlay below the image on mobile devices, turn the Show overlay below image on mobile option on.

  8. To emphasize and link to a specific product add a Product label. Select a product and choose the Background color and Text color. This label will link directly to the quickbuy or product page. Use the Horizontal position and Vertical position sliders to adjust the placement of the label on the image. Refer to Product label links for more information. 
  9. Repeat the above instructions for the second image block.
  10. Click Save.

Tip

Experiment with the position and color settings to ensure the Product label and Overlay are prominently displayed without obscuring important details of the image. We recommend previewing changes on different screen sizes and mobile devices.

FAQs

What happens if I specify an image link and a button link?

Both an image link and a button link can be used in the same block. This allows for multiple pathways for customers to engage with your content.

Can I have just one image?

While the Split Image section is designed to work with two images, you can technically use only one. However, this is not recommended, as the section’s layout is optimized for two images.

Will my images be cropped?

Yes, the images are intended to be used as background images, which means they will "cover" the area and may crop. To mitigate this, use focal points together with the height settings to adjust the display and ensure your images look their best.

Are there any size restrictions for the images?

While there are no strict size restrictions, it’s recommended to use high-quality images that fit well within the set heights for both desktop and mobile views. This ensures optimal display across devices.

Sign up for Shopify today for $1

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us