Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Page Section
The Flex theme includes an adaptable 'Page' section that comes in handy when adding content to your homepage. The 'Page' section allows you to create a separate internal content page in your Shopify Admin and then add it to your homepage. This section is commonly used to include custom HTML content, such as our Column Framework, as a homepage section.
To create content for this section, first create a page under Online Store > Pages. Although you’re creating a separate page, think of it more as a “holder” for the content you’ll be creating.
Once you add a page section to your homepage and select the page you’ve created, the theme will “grab” the content from this page and output it on your homepage.
Note that the section will only use the content (and HTML code) from within the page content but won’t include the page’s header, navigation, sidebars or footer.
The column framework can be used to create a page within a page — a large section with an effective layout that can provide users with information without having to load a separate page.
This section can also be used to add third-party widgets. If you need to include a third party widget, such as a social media feed, video, map, certification badges or seals, you can paste in the provided code into the code view of the page content and then add it as a section to the homepage.
In order to add a Page section, click into Customize (your Theme Editor) > Sections > Add Section > Page.
Page Section Settings
Once you've added your content page as a section, you can configure background, layout, and advanced settings.
Background
In the background settings, you can select the background color, add a gradient to the background and if you've added a gradient, choose the gradient rotation.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Page section loads in.
Width
The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set the Page section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is a page section followed by a section heading section:
Top/Bottom Spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right Spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom in'.
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Examples
Example 1
Details/Settings:
- Used our Column Framework to create 4 columns
- Width - wide
Example 2
Details/Settings
- Inserted a table through the Page's rich text area in the Admin
- Gradient rotation - 30deg
- Width - standard
Mobile Layout
When viewed on a mobile device, it depends on what content you have added to your page! If the content is just text and images, this will responsively size down to fit into the mobile screen. If you've added a widget or third-party code, you may need to add in extra code to make whatever you have responsive.