Image with text

To add this section, please follow the below steps:

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Add section and choose "Image with text".

Setting
Description

Layout style

Select the layout style for the section:

  • Special

  • Classic

  • Modern

Section width

Select the section width from the dropdown menu:

  • Full width

  • Page width

  • Custom width

Custom width

Determines the width of the section when you choose 'Custom width' option at 'Section width' setting . Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel)

Color scheme

Select a color scheme to set the text and background colors for the section

Image

Upload an image

Heading

Add text to display as a section heading (Leave the field blank to hide the heading)

Heading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Link label

Add text to display as a link label on the section (Leave the field blank to hide the link)

URL

Set the link, for example the customer service page

Text (Color)

Set the color for the text

Show top separator line

Displays a line at the top to visually separate this section from the other sections

Show bottom separator line

Displays a line at the bottom to visually separate this section from the other sections

Content

Setting
Description

Set background for content box

Select this checkbox to background for content box. (The 3 following settings only take effect if this checkbox is ticked)

Text (Color)

Set the color for the text or icon

Background

Set the background color for content box (If a background gradient is set, the section's background will be set according to the background gradient setting)

Background gradient

Set the background gradient for content box

Desktop layout

Setting
Description

Desktop image placement

Select desktop layout from the dropdown menu:

  • Image first

  • Image second

Desktop content position

Select desktop content position from the dropdown menu:

  • Top

  • Middle

  • Bottom

(Position is automatically optimized for mobile. This setting applies to the position of the entrie content block)

Desktop content alignment

Select desktop content alignment from the dropdown menu:

  • Left

  • Center

  • Right

Mobile layout

Setting
Description

Mobile image placement

Select mobile layout from the dropdown menu:

  • Image first

  • Image second

Mobile content alignment

Select mobile content alignment from the dropdown menu:

  • Left

  • Center

  • Right

Animations

Setting
Description

Reveal sections on scroll

Apply effects to the images on scroll.

Select the images animation from the dropdown menu:

  • None

  • Fade in up

  • Fade in down

  • Zoom in

  • Zoom out

Text animation

Select the text animation from the dropdown menu:

  • None

  • Fade in up

  • Fade in down

  • Zoom in

  • Zoom out

  • Split

Section padding

Setting
Description

Top padding

Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding

Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Top padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Last updated