A blog post page is a web page that displays a single blog post. It can be used to promote products or services, or for a variety of other purposes.
With Concept, an OS 2.0 Shopify theme, you have the ability to add various sections on every page. This means that you can fully customize the look and feel of your 404 page by adding any sections that you desire. Simply click on the Add section button and choose the sections that you want to appear on your page.
By doing this, you can create a visually appealing blog post page that will keep your visitors engaged and informed.
A. Default blog post
1. Blog post banner section
| Description | ||
|---|---|---|
| Blog post banner | ||
| Allow transparent header | This setting only is applicable when this section is the first one. | |
| Show featured image | Displays the featured image for the blog post.
For best results, use an image with a 16:9 aspect ratio. Learn more. |
|
| Image | Chooses/Uploads the section image.
Default to featured image. |
|
| Desktop height | Determines the height of the image when viewed on desktop:
|
|
| Desktop content position | Sets the position of the content on desktop:
|
|
| Desktop content alignment | Sets the alignment of the content on desktop:
|
|
| Mobile layout | ||
| Mobile height | Determines the height of the image when viewed on mobile:
|
|
| Mobile content position | Sets the position of the content on mobile browser:
|
|
| Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| You can adjust the Top padding and Bottom padding from 0px to 120px in increments of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section full width | Makes the container full width. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Enable parallax effect | Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
Parallax direction can be chosen one of 3 following options: |
|
| Custom CSS | Adds custom CSS to this section. | |
Available blocks:
- 1.1 Blog post title
- 1.2 Breadcrumb
- 1.3 Empty space
1.1 The settings for the Blog post title block.
| Description | ||
|---|---|---|
| Blog posts title | ||
| Title size | The size of the title:
|
|
| Show tags | Displays tags from admin blog posts with images. | |
| Show date | Shows blog post published date. | |
| Show comment count | Displays the total number of published comments. | |
| Show author | Displays the author of the blog posts. | |
1.2 The settings for the Breadcrumb block.
This content is from your blog post at Edit blog post.
1.3 The settings for the Empty space block.
| Description | ||
|---|---|---|
| Empty space | ||
| Desktop height | Determines the height of the empty space when viewed on desktop. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 40px. | |
| Mobile height | Determines the height of the empty space when viewed on mobile. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 28px. | |
2. Blog posts
| Description | ||
|---|---|---|
| Section | ||
| You can adjust the Top padding and Bottom padding from 0px to 120px in increments of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
Available blocks:
- 2.1 Share
- 2.2 Next and provious blog posts
- 2.3 Comments
- 2.4 Custom Liquid
- 2.5 Empty space
2.1 The settings for the Share block.
| Description | ||
|---|---|---|
| Share | ||
| Text | Adds text for the block.
If you include a link in social media posts, the page’s featured image will be shown as the preview image. Learn more. A store title and description are included with the preview image. Learn more. |
|
| Show comment count | Displays the total number of published comments. | |
2.2 The settings for the Next and previous blog posts block.
- Show date - Shows blog post published date.
- Show comment count - Displays the total number of published comments.
- Show author - Displays the author of the blog posts.
2.3 The settings for the Comments block.
- Show comment avatar - Enables to show comment avatar.
2.4 The settings for the Custom liquid block.
You can add your own Liquid code to create a custom block.
2.5 The settings for the Empty space block.
| Description | ||
|---|---|---|
| Empty space | ||
| Desktop height | Determines the height of the empty space when viewed on desktop. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 40px. | |
| Mobile height | Determines the height of the empty space when viewed on mobile. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 28px. | |
3. Blog posts section
| Description | ||
|---|---|---|
| Blog posts | ||
| Blog | Selects the blog from which you want to display blog posts. If no blog is selected, the first blog alphabetically on your Blogs page will be used. | |
| Number of blog posts to show | The number of blog posts that you want to display in the section, from 0 to 12. | |
| Number of column on desktop | Customizes the number of columns displayed on desktop from 1 to 5. | |
| Enable carousel on desktop | Displays a carousel of blog posts from the collection on desktop browser. | |
| Enable "View all" button | Displays a View all button that links to the blog page if the blog has more posts than the specified limit. | |
| Mobile layout | ||
| Numer of columns on mobile | Customizes the number of columns displayed on mobile browser: 1 column or 2 columns. | |
| Enable swipe on mobile | Sets mobile display to one row with horizontal swipe. | |
| Blog posts card | ||
| Image ratio | The image ratio for the blog post images:
|
|
| Show tags | Displays tags from admin blog posts with images. | |
| Show date | Shows blog post published date. | |
| Show comment count | Displays the total number of published comments. | |
| Show author | Displays the author of the blog posts. | |
| Show except | Displays the excerpt of the blog posts.
Change excerpts by editing your blog pots. Learn more. |
|
| Heading | ||
| Heading | The section title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extra large. | |
| Heading alignment | The Heading can be aligned to the Left, Center, or Right. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Subheading | The subheading for the heading is placed above the heading. | |
| Description | The description text for the heading is placed below the heading. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| You can adjust the Top padding and Bottom padding from 0px to 120px in increments of 4px. | ||
| Show section divider | Shows a line divider above this section | |
| Make section full width | Makes the container full width. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
This section does not support adding blocks.
We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.
