Appearance

Image split ​

This guide describes setting your store's Image split section to display two images, side-by-side, on a store page.

The following video, shows a store's homepage with an image split section. The width of the image on the left is increased from One third (33%) to Two fifths (40%).

For general guidance with modifying sections, refer to Sections overview.

Set up an image split section ​

To set up an image split section on a store page:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template to contain the image split section. For example, select the Home page template.

    Note

    The image split section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section.

  2. Select Add section > Image split.

    The add image split section option in theme editor

  3. From the side menu, select Image split.

  4. Select a setting described in the following table.

    In the table, settings that apply only to the image on the left side of the image split section are prefixed with Left image. Settings applicable to the image on the right side are prefixed with Right image.

Section setting nameDescription
Left image width on desktopSelect the dropdown Left image width on desktop to set the width of the image on the left side of the image split section for desktop displays. The options are: One third, One half, Two thirds, Two fifths, and Three fifths. Both images will be resized appropriately.
Left image > Select imageUse the Select image menu options to set up an image on the left side of the image split section.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
The recommended image dimensions are 2000 x 2000 pixels in .jpg format.
Left image > Indent imageSelect the checkbox Indent image to add/ remove a border around the image on the left side of the image split section.
Left image > Crop imageSelect the dropdown Crop image to set the shape of the image on the left side of the image split section. The options are: No crop, Landscape, Square and Portrait.
Left image > LinkUse the Link text box to enter a URL for the left side image in the image split section or select a store page to link to. The link opens when a user selects the image. To remove a link, select the X icon inside the Link text box.
Left image > Background colorSelect the dropdown Background color to set a background color for the left side image in the image split section. The options are Primary background, Secondary background and Tertiary background.
Left image > CaptionUse the Caption box to enter text to display inside the tile on the left side of the image split section.
Left image > Content positionSelect the dropdown Content position to set a position for the text inside the tile on the left side of the image split section. The options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Left image > Text colorSelect the dropdown Text color to set a color for the text on the left side of the image split section. The options are: Primary text, Secondary text, Tertiary text, White, and Black.
Right image > Select imageUse the Select image menu options to set up an image on the right side of the image split section.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
The recommended image dimensions are 2000 x 2000 pixels in .jpg format.
Right image > Preserve image aspect ratioEnable the checkbox Preserve image aspect ratio to keep the width of the image on the right side relative to its length, inside the image split section.
Right image > Indent imageSelect the checkbox Indent image to add/ remove a border around the image on the right side of the image split section.
Right image > LinkUse the Link text box to enter a URL for the right side image in the image split section or select a store page to link to. The link opens when a user selects the image. To remove a link, select the X icon inside the Link text box.
Right image > Background colorSelect the dropdown Background color to set a background color for the right side image in the image split section. The options are Primary background, Secondary background and Tertiary background.
Right image > CaptionUse the Caption box to enter text to display inside the tile on the right side of the image split section.
Right image > Content positionSelect the dropdown Content position to set a position for the text inside the tile on the right side of the image split section. The options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Right image > Text colorSelect the dropdown Text color to set a color for the text on the right side of the image split section. The options are: Primary text, Secondary text, Tertiary text, White, and Black.
Theme settingsSelect Theme settings to access additional settings. Refer to Section theme settings menu.
Remove sectionSelect Remove section to remove the image split section from the current page template.