How to find these settings...
- Online Store
- Customize (Theme Editor)
- Add section
- Image gallery
Recommended reading
In this section...
Options
Mobile padding
Add padding between the images on screens less than 640px wide. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Desktop padding
Add padding between the images on screens larger than 640px wide. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Image height
The image has 4 options for display:
- Small: The image will be 25% of the height of the screen
- Medium: The image will be 35% of the height of the screen
- Tall: The image will be 50% of the height of the screen
- Original aspect ratio: Uses the height of the image
Section
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 640px 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 640px 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 640px 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 640px 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 640px 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 640px 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'
IMAGE CONTENT BLOCKS
Access content blocks using black arrow next 'Image gallery'
Lazy load image(s)
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Desktop image
The desktop image will be displayed when the container is greater than 640px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
Insta filter
App like filters can be applied to your images
Mobile image
The mobile image will be displayed when the container is less than 640px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
Insta filter
App like filters can be applied to your images
Link
The image can feature a link
Image column width
Based on a 4 column design. Example is 1 column = 25% of the container width. 1 is the minimum, and it steps up by 1 to a maximum of 4
* NOTE: May not be available on all sections, blocks or templates