Image with text
To add this section, please follow the below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Image with text".
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
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
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
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
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
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