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 Blog Posts
Writing quality blog posts can be a wonderful way to engage with your customers. Blog posts are a excellent for providing more information about your products, including videos, interviews, and providing any answers to questions! They can add value and build trust in your brand.
The Blog Posts within the Flex theme includes options to enable a sidebar and banner image as well as layout settings and fields to input custom CSS for the banner, sidebar, and post itself.
In order to set up the Blog Post, click into Customize (your Theme Editor) > choose 'Blog Posts' in the drop-down page selector. Your theme editor on the left will then update with the blog post settings.
Blog Post Settings
The blog post settings determine the look and layout of your blog! The settings are divided into: general blog post info, layout, advanced, content block settings.
General Blog Post Information
Within the general blog post info settings, you can choose to enable the following information to be visible on your blog post:
- Show breadcrumbs
- Show author
- Show date
- Show estimated read time
- Show comment count
- Show tags
- Show featured image
Layout
The layout settings include options to adjust the spacing and width in this for the blog post.
Width
You can choose between 'wide' and 'standard' for the width of the blog post. Selecting 'wide' will spread the post out full-width. Choosing 'standard' will keep the post in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the post 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.
Content Blocks
Additional content blocks can be added underneath your blog post! You can add them by clicking 'Add content' button at the bottom of the settings in the Theme Editor. You can choose the order of the content blocks by dragging & dropping them.
Author and Social share
This content block option allows you to enable the author information (including image, name and bio if added) and social share icons!
Comments
If you have comments enabled for your Blog, you can add them as a content block. You can also replace Shopify's default comments with DISQUS comments instead by going into Theme Settings > DISQUS comments.
Additional blog posts
If you'd like to feature related posts at the bottom of your blog post, you can add the 'additional blog posts' content block. This will add the 3 most recent posts. You can then choose to enable the border, excerpts, post tags, and buttons for the posts.
Blog Post Banner Settings
The Blog post page includes an option to enable a banner at the top! The blog post's featured image will be used as the banner image. You can configure settings for the blog post banner by clicking into the 'blog post banner' settings in the theme editor while on your Blog post page.
Show banner
To enable the post's featured image as a banner image, check off the 'show banner' setting.
Darken image
You can enable the 'darken 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!
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 Post Sidebar Settings
A Sidebar can be added to the Blog post by clicking into the 'Blog post sidebar' settings in the theme editor while on your Blog post. 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.
Mobile Layout
When viewed on a mobile device, the blog post will responsively resize to fit into your screen.
If you have a 'sidebar' enabled, it can either display at the top or the bottom of the blog post by configuring the 'Mobile sidebar position' setting which was added in the 1.1.4 version update (located in Theme Settings > Mobile).
