Image section
The Image section of Borders shows one image, with a separate mobile image, a media shape and an optional link.
Applies to: Borders 3.1.0 and later. Added in: Borders 1.0.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Image section shows one image across the width of the page, at the image's own proportions, with an optional separate image for mobile and an optional link.
Where to find it: select Add section in the theme editor, then choose Image.
Content
- Image is the picture. Borders shows it at its own aspect ratio: nothing is cropped, so a tall image makes a tall section.
- Mobile image (optional) replaces the image on screens narrower than 768 px, for example a portrait crop for phones.
- Media shape rounds two or all corners of the image into a half circle: Top rounded, Right rounded, Bottom rounded, Left rounded or Fully rounded. None keeps the grid's corner radius.
- Link makes the whole image a link, with the hover effect set in Theme settings → Animations → Image mouse over animations.
- Open link in a new window opens the link in a new browser tab. It shows only when Link is set.
Inner content design
- Remove border radius gives the image square corners.
- Remove inner padding & border radius removes the grid padding as well, so the image runs edge to edge.
- Hide section if dynamic content is not present hides the whole section when Image is empty, for example when it is connected to a product or collection metafield that a page does not have.
The Section heading and Section design settings are the shared ones: see General section styling.
Why is my image cropped differently on mobile?
It is not cropped; you probably set a Mobile image (optional). Below 768 px wide Borders shows the mobile image instead, at its own proportions. Remove it to show the main image on every screen.
Can I add text or a button over the image?
No. The Image section shows the image only. For text over an image, use the Rich text section with Overlap content on desktop, or a Rich blocks section block with an image.
All Image settings
Every setting on this page, with its type and default.
Image section: Section heading
Where to find it: Image → Section heading
Heading (text box).
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
Image section: Content
Where to find it: Image → Content
Image (image): The image, shown at its own aspect ratio without cropping.
Mobile image (optional) (image): Replaces the image on screens narrower than 768 px, at its own aspect ratio.
Media shape (dropdown, default: None): Rounds two corners (top, right, bottom or left side) or all corners of the image into a half circle. None keeps the grid corner radius. Options: None, Top rounded, Right rounded, Bottom rounded, Left rounded, Fully rounded.
Link (link): Makes the whole image a link, with the image hover effect from Theme settings → Animations.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Image section: Section design
Where to find it: Image → Section design
Color scheme (color scheme, default: scheme_1).
Hide section bottom border (checkbox, default: off).
Image section: Inner content design
Where to find it: Image → Inner content design
Remove border radius (checkbox, default: off).
Remove inner padding & border radius (checkbox, default: off).
Image section: Dynamic content
Where to find it: Image → Dynamic content
Hide section if dynamic content is not present (checkbox, default: off): Hides the section when Image is empty, for example when it is connected to a metafield the current product or collection does not have.
Related pages
- General section styling: the heading and design settings this section shares.
- Recommended image sizes: image resolution.
- Animations theme settings: the hover effect of linked images.
- Borders sections: every section you can add.