Each blog on your website (and it is possible to create several separate blogs) is comprised of 2 parts:
- The blog home/index page (which shows previews of all the posts within that blog), and
- All of the individual blog post pages.
This tutorial teaches you how to customize the blog home/index page. (Click here for instructions on customizing the template for the individual blog pages.)
'Blog Index Page' Section
To customize the blog home page, select 'Blogs > Default blog' in the navigation bar in the top panel of Theme Editor.
When the page loads, you'll see that the left panel includes a section called 'Blog index page' and has an 'Add section' link just below it. The 'Blog index page' section shows a preview of all the blog pages within the blog. When you click on the 'Blog index page' section title in the left panel, and the right panel will show the following:
- Heading font size - Use the slider to select the font size of the blog index page title (which is the name of the bog).
- Heading alignment - Use the dropdown to choose whether the heading should be left- or center-aligned (horizontally).
- Blog posts per row - Use the slider to choose how many blog post previews will be shown per row (on desktop devices): 1, 2, 3, 4 or 5.
- Show featured image - Tick this box if you want to show the blog post's featured image as part of the blog post preview (in addition to the post title, date, author and/or excerpt).
- Show date - Tick this box if you want to show the blog post's date in the preview box.
- Show author - Tick this box if you want to show the author's name in the preview box.
- Show blog post snippet - Tick this box if you want each of the preview boxes to also include a short preview (excerpt) of the blog post itself. Please note that you can control the excerpt of each individual blog post on the posts themselves (within Shopify), as explained here.
Add Additional Sections
To add a section (i.e. block) of content above or below the list of blog posts, simply click the 'Add section' button in the left panel. Following is the list of the universal Convertify sections that can be added to any page, including the blog home/index page:
You will use the left panel to create all of the sections (i.e. page components) you want to appear on the blog home page.
You can reorder the sections by hovering over the section you want to move and then using the move icon to drag & drop it to its desired location. If you want to temporarily hide a section (but not delete it), hover over the section title and click on the eye icon that appears. (To later reactivate that section, just click on the stricken-through eye icon.) To permanently delete a section, click the section title in the left panel and then click the 'Remove section' link at the bottom of the right panel.