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
Creating a Blog Page
An excellent way to share valuable content and connect with your customers is to create and contribute to a Blog on your online store! Having a blog is a great way to build a network and reputation; it offers a sense of credibility for your store.
The Blog page within the Flex theme includes options to enable a sidebar and banner image to achieve beautiful and organized layouts for your blog posts.
You can adjust layout settings as well as add in your own custom CSS for the banner, sidebar, and page itself.
In order to set up the Blog Page, click into Customize (your Theme Editor) > choose 'Blogs' in the drop-down page selector. Your theme editor on the left will then update with the blog page settings.
Blog Page Settings
The blog page settings determine the look and layout of your blog! The settings are divided into: general, blog posts, layout, and advanced settings.
General settings
Show tag filter
The Blog page includes an option to enable a drop-down filter based on blog post tags that are included in the Blog. When an option is selected, it will then filter the blog to display only the posts that have that tag.
Posts per row
Within the 'posts per row' setting, you can choose to display 1 - 4 posts per row.
Posts per page
The 'posts per page' setting allows you to choose how many posts you'd like to appear on the Blog page. Depending on how many posts you have and what to choose here, pagination will kick in! Choose from 1 to 50.
Pagination type
There are four pagination options included to view/load more blog posts. The pagination types to choose from are: infinite scroll, infinite load more button, load more button, and page links.
View our article on pagination options in the Flex theme
Blog posts
Within the blog posts settings on the Blog page, you can choose to configure the following:
- Show author
- Show date
- Show estimated read time
- Show comment count
- Show tags (if you've tagged your posts ex: 'recipe', 'tips & tricks', you can have them display)
- Show excerpts (if you have added an excerpt to your post, you can hide or show it)
- Show border
- Button label (add text that you'd like to appear on the button that your customers click to read more)
- Button style choose between your 'primary' and 'secondary' button styles – which are configured under Theme Settings > Buttons. Alternatively, you can choose 'none' if you don't want to display a button)
Layout
The layout settings include options to adjust the spacing and width for the Blog page.
Width
You can choose between 'wide' and 'standard' for the width of the blog page. Selecting 'wide' will spread the blog out full-width. Choosing 'standard' will keep the blog in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the blog by adjusting the 'top spacing' and 'bottom spacing' settings.
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.
Blog Banner Settings
The Blog page includes an option to enable a banner at the top! You can configure the blog banner by clicking into the 'blog banner' settings in the theme editor while on your Blog page.
Show banner/Image
To display the banner, you can check off the 'show banner' setting. You can then upload an image for the banner. The recommended image size is 1800 x 800px.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!
Subheading
When the banner is enabled, the Blog title will display as the main heading. You can add a 'subheading' as well if you'd like to add in more text on top of your banner image.
Layout
The layout settings include options to adjust the spacing, width and height for the banner image.
Width
You can choose between 'wide' and 'standard' for the width of this banner. Selecting 'wide' will spread the banner out full-width. Choosing 'standard' will keep the banner in a container and not spread the full-width.
Banner height
You can select small, medium, or large for the height for the blog page banner image.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS for the banner image.
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.
Blog Sidebar Settings
A Sidebar can be added to the Blog page by clicking into the 'Blog sidebar' settings in the theme editor while on your Blog page. Simply check off the 'Show sidebar' setting. The sidebar can display on either the left or the right side of the page, you can choose the location with the 'sidebar position' setting.
The sidebar content can be built by clicking 'Add content' and making selections from the list.
The sidebar content options are:
- Blog post tags
- Custom HTML
- Featured promotion
- Menu
- Newsletter
- Page
- Recent blog posts
- Search form
- Text
In addition to adding the content, you can also include custom CSS for the sidebar specifically under the advanced settings!
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
Settings
- Blog banner - enabled
- Darken banner image - enabled
- Subheading - added
- Width (banner) - wide
- Banner height - medium
- Blog posts per row - 2
- Blog posts per page - 6
- Show author - enabled
- Show date - enabled
- Show estimated read time - enabled
- Button - none
Example 2
Settings
- Blog banner - enabled
- Width - wide
- Banner height - small
- Blog posts per row - 1
- Blog posts per page - 4
- Show author - enabled
- Show date - enabled
- Show estimated read time - enabled
- Show border - enabled
- Button - added
- Width - standard
Mobile Layout
When viewed on a mobile device, the blog posts will display 1 per row. If you have a 'sidebar' enabled, it will display at the bottom of the blog.
