How to find these settings...
- Online Store
- Customize (Theme Editor)
- Add section
- Image with Text
A versatile section that will allow you to manipulate 5 different content block types with control over individual block width.
Suggested Use
- Sponsors, certificates or top brands logos with links
- Testimonials
- Promotion tiles
- Individual images
- Promotional text with links
- Trust icons
Recommended reading
In this section...
Options
Desktop/Mobile image fill space height
The overall height of the image section blocks in relation to the height of the screen when 'Image fit' is set to 'Fill space'. 5% is the minimum, and it steps up by 5 to a maximum of 100%
- Desktop: Used on screens larger than 768px
- Mobile: Used on screens smaller than 768px
Horizontal positioning
Blocks can be aligned to the left, right or centered within the container
Vertical positioning
Position the blocks & their content at the top, middle or bottom of the container
Use slider for blocks
Enable a slider for the blocks
- Enabled: Each block will be an equal width
- Disabled: Each block will use the individual 'Content/Container width'
Desktop/Mobile slider blocks per row
Select how many blocks to display per row from 2-5. 2 is the minimum, and the slider steps up by 1 to a maximum of 5
- Desktop: Used on screens larger than 768px
- Mobile: Used on screens smaller than 768px
Slide navigation color
Choose a custom color for the slider navigation arrows
Section
Lazy load images *
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Background color
Choose a custom color for the background
Background gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* May not be available in all Sections
Block Width Options
Content/Container width
The design is based on a 12 column, 1180px wide layout. Refer to the following table to reference content widths:
Setting
Content Width
Minimum Image Width
16.5%*
180px
580px
25%*
280px
580px
33%
380px
580px
50%
580px
580px
66%
780px
880px
75%
880px
880px
87.5%*
980px
1180px
100%*
1180px
1180px
* May not apply to all sections or templates
Block Image Sizes
Image
Select an image to be used. The design is based on a 12 column, 1180px wide layout. Refer to the tables below for optimal image sizing. Settings 16.5%, 25% & 33% need a higher minimum width to accommodate responsive & mobile screen sizes
NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
Use slider for blocks
Setting
Desktop Width
Mobile Width
2
880px
510px
3
460px
300px
4
330px
210px
5
250px
160px
Block container width
Setting
Minimum Image Width
16.5%
580px
25%
580px
33%
580px
50%
580px
66%
880px
75%
880px
87.5%
1180px
100%
1180px
CONTENT BLOCKS
Text Content Block
Access content blocks using black arrow next 'Image with text'
Heading
Title of the block
Use h1 tag
For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page
Heading size
Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Subheading
Secondary title of the section or feature
Subheading size
Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Text
A text block for basic formatting including bold, italic & linked text
Link
Include a button with a link
Button
Customize the text for the button
Outline button
Invert the button to use a frame with no background
Text color
Choose a custom color for the text
Text hover color
Choose a custom color for links when hovered over
Button text color
Choose a custom color for the default button text and the outlined button hover text
Text alignment
Text can be aligned to the left, right or centered to the container
Content width
The design is based on a 12 column, 1180px wide layout. Refer to the table above for dimensions and recommendations
Image Content Block
Access content blocks using black arrow next 'Image with text'
Lazy load images
Enable for "above the fold" images. Disable for any image that is not visible on the initial page load
Image
Select an image to be used. Refer to the table above for dimensions and recommendations
Image fit
There are 2 choices for how the image will fit into the container:
- Fill space: The image will occupy the full width of the container & the height will depend on the heights of the additional Content Blocks. Use this like a background image, ie textures. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
- Fit to space: The image will occupy the full width of the container & the height will proportionally fit to the width. Use this like a stand alone image, ie logos
Text
A text block for basic formatting including bold, italic & linked text
Text color
Choose a custom color for the text
Text hover color
Choose a custom color for links when hovered over
Text alignment
Text can be aligned to the left, right or centered to the container
Link
Include a link for the image
Container width
The design is based on a 12 column, 1180px wide layout. Refer to the table above for dimensions and recommendations
Video Content Block
Video
Due to ongoing changes in format and how YouTube & Vimeo allow videos to be embedded, it was decided to only support mp4 videos. But, you can still convert both to an mp4:
Files should be added to the Files section of your admin. You can then copy the link and paste it into this input.
It is recommended to keep files sizes as small as possible. Most users will not watch an entire movie preview, which is around 6mb! Keep it under 2mb for those with slower internet connections.
Lazy load images
Enable for "above the fold" images. Disable for any image that is not visible on the initial page load
Image
Select an image to be used. Refer to the table above for dimensions and recommendations
Link
Include a link for the block
Title
Include a title for the video SEO
Container width
The design is based on a 12 column, 1180px wide layout. Refer to the table above for dimensions and recommendations
Custom Liquid Content Block
Custom Liquid
Add the raw Liquid or HTML code
Container width
The design is based on a 12 column, 1180px wide layout. Refer to the table above for dimensions and recommendations
Icon Content Block
Access content blocks using black arrow next 'Image with text'. You can view the icons on the 'What Icons are Included?' FAQ page
Icon
Select an icon to be used from the preset list
Icon size
There are 4 choices for size of the icon
Icon color
Preferred color of the icon. Defaults to the color assigned to the Headers
Icon highlight color
Some icons have elements that can be assigned a different color. Defaults to the Accent color
Heading
Title of the block
Text
A text block for basic formatting including bold, italic & linked text
Link
Include a link for the block
Text color
Choose a custom color for the text
Text hover color
Choose a custom color for links when hovered over
Layout
The logo and text can be side by side or stacked on top of each other
Container width
The design is based on a 12 column, 1180px wide layout. Refer to the table above for dimensions and recommendations
* NOTE: May not be available on all sections, blocks or templates