Skip to main content
The Image with Text section lets you control the content, layout, and presentation of this part of the Everest storefront. Most changes happen directly in the Theme Customizer, so you can adjust structure first and then refine styling, spacing, and supporting blocks with confidence. Image with Text overview

What this section controls

  • Layout structure, width, alignment, and spacing
  • Color schemes, contrast, and shared visual styling
  • Block types such as Card

Getting started

1

Open the Theme Customizer

In Shopify admin, go to Online Store -> Themes -> Customize.
2

Add or open Image with Text

Add the Image with Text section to a compatible template or select the existing section from the left sidebar.
3

Adjust the main settings first

Start with the structural settings such as layout, width, color scheme, spacing, or content source before refining smaller details.
4

Review blocks and supporting content

Add, remove, or reorder blocks after the main layout feels right so content hierarchy stays easier to manage.
Image with Text location in Theme Customizer

Section settings

Settings

Image with Text Settings settings
Choose how Spacing behaves in the section.Available options: Standard, Compact.Default: standard
Enable or disable Separate cards.Default: disabledSeparate content and image

Common settings

Image with Text Common settings
Choose how Section width behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: Page, Fluid, Full.Default: page
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.Default: scheme-1
Choose how Top spacing behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: No, S, M, L, XL.Default: 2
Choose how Bottom spacing behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: No, S, M, L, XL.Default: 2
Choose how Section border behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: None, Top, Bottom, Both.Default: none

Block settings

Card

Image with Text Card settings This block controls the card content used inside the Image with Text section.

Settings

Image with Text Settings settings
Choose how Corner radius behaves in the section.Available options: No, S, M, L, ↺.Default: default

Style

Image with Text Style settings
Choose how Card frame behaves in the section.Available options: None, Border.Default: border
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.

Content

Image with Text Content settings
Choose how Show on behaves in the section.Available options: Desktop, Mobile, Both.Default: both
Choose how Content padding behaves in the section.Available options: No, S, M, L, ↺.Default: default

Desktop alignment

Image with Text Desktop alignment settings
Choose how Vertical alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⤒, Center, ⤓.Default: start
Choose how Horizontal alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⇤, Center, ⇥.Default: start

Mobile alignment

Image with Text Mobile alignment settings
Choose how Vertical alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⤒, Center, ⤓.Default: start
Choose how Horizontal alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⇤, Center, ⇥.Default: start

Media

Image with Text Media settings
Enable or disable Show card media.Review the result on both desktop and mobile when media changes are involved.Default: disabled
Enable or disable Reverse layout on mobile.It has the strongest effect on layout balance and visual hierarchy.Default: disabledThis setting only appears when its related parent option is enabled.Reverses the layout of the card on mobile.
Choose how Media position behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Top, Bottom, Start, End, Background.Default: bottomThis setting only appears when its related parent option is enabled.Desktop and tablet only. Automatically adjusted for mobile.
Enable or disable Stack on mobile.Default: enabledThis setting only appears when its related parent option is enabled.When enabled, media and content stack vertically on mobile devices. Only applies when media position is set to Left or Right.
Adjust Media width with a slider-based control.It has the strongest effect on layout balance and visual hierarchy.Range: 2 to 12 Default: 6This setting only appears when its related parent option is enabled.If you set 0, media will use automatic width.
Choose how Object fit behaves in the section.Review the result on both desktop and mobile when media changes are involved.Available options: Cover, Contain.Default: coverThis setting only appears when its related parent option is enabled.
Choose how Show on behaves in the section.Review the result on both desktop and mobile when media changes are involved.Available options: Desktop, Mobile, Both.Default: bothThis setting only appears when its related parent option is enabled.
Upload or choose an image for image.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.
Choose a hosted video for video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image.
Paste an external video URL for external video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.
Choose how Aspect ratio behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Auto, Square, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2.Default: autoThis setting only appears when its related parent option is enabled.
Enable or disable Enable mobile specific media.Review the result on both desktop and mobile when media changes are involved.Default: disabledThis setting only appears when its related parent option is enabled.Displays mobile-specific alternative media. Add a media before setting a mobile alternative.

Media for mobile

Image with Text Media for mobile settings
Upload or choose an image for image.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.
Choose a hosted video for video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image.
Paste an external video URL for external video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.
Choose how Aspect ratio behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Auto, Square, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2.Default: autoThis setting only appears when its related parent option is enabled.
Supports nested blocks:
  • Icon Svg for more granular content inside this block.
  • Heading for more granular content inside this block.
  • Text for more granular content inside this block.
  • Button for more granular content inside this block.

Best practices

  • Check contrast after changing color schemes so text and controls remain easy to read.
  • Adjust layout changes alongside neighboring sections so page rhythm stays consistent.
  • Start with the structural settings first, then refine decorative styling after the layout feels settled.
  • Preview the section with realistic content length to catch spacing and wrapping issues early.