The Custom content section serves as a blank slate, that allows you to easily include image content and custom code into a page or even the homepage of your shop. This section is a great way to integrate code snippets from 3rd party apps or even extend the theme's existing design with your own unique content.
How to add the custom content section
- Log in to your Theme editor and navigate to the page you would like to display this section.
- You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
- From the list of available sections, find and select Custom content.
Customization options
After adding the Custom content section, use the available settings to customize its appearance and align it with your store’s style.
Full page width: When enabled, the section stretches to span the entire width of the page.
Add spacing above and below: Adds additional padding to the top and bottom of the section, creating more visual space around the content.
Lazy load images: Enable this when the section appears below the fold to help reduce unnecessary image loading and improve performance. This setting is available in Impulse, Motion and Streamline.
Use alternate section color (Streamline): Applies the alternative section background and text colors defined in Theme settings > Colors.
Block options
This section offers two block types you can add: Image and HTML.
Image
This gives you the option to insert an image and adjust the block width on the page. Multiple blocks can be added and unlike other image-based sections, this section will not responsively adjust the image based on a focal point. It will render as a fixed-width image based on the width and alignment settings you choose.
HTML
This block supports your own custom HTML, CSS, Liquid and JavaScript.
This can be really useful for app integrations or easily including your own custom code into your theme.