Blog page

The blog page template is where all your blog posts are listed. You can manage multiple blogs via your Shopify store’s admin panel by navigating to Online store – Blog posts, and then clicking on the “Manage blogs” button on the top right.

The blog post template contains a single section named “Blog posts” that controls how the page is displayed, using the following settings:

Hide page banner: Control the visibility of the page’s banner (title and image)

Page banner image: Optionally add an image to be displayed on the banner. If you have multiple blogs and you want to assign a different image to each, you can connect this setting to a dynamic field.

• From your store’s Shopify admin, navigate to “Settings – Custom data” and then click on “Blogs” from the list of Metafield definitions.
• Click “Add definition“, and then fill in the required information such as the Name, Namespace and key (you can name these as you see fit)
• Select “File (Image)” from the “Select type” dropdown and hit save.
• Navigate to your blog via the admin (Online store – Blog posts) and then click on “Manage blogs” to edit your blog. You will notice the Metafields box under the content. Click “Show all“, and select an image for the new metafield you just created.
• Finally, navigate back to your blog’s section settings, and click on the “Connect dynamic source” button next to the setting’s label, and search for the field you just created. Hit save, and you should be able to see the image you assigned at the blog’s metafield.

Mask image: When this setting is enabled, the blog’s image will have a diagonal mask applied to it.

Image height on mobile: Choose the height (Small, Medium, or Large) of the blog’s image on mobile devices.

Decription: Optionally write a description for the blog. If you have multiple blogs and you wish to show a different description per blog, you can connect a dynamic source on this field similarly to the Image field above.

• Create a metafield definition on the blog, with the type “Rich text” via your store’s settings (as above).
• Navigate back to your blog in the admin (Online store – Blog posts) and edit your blog (clicking on “Manage blogs“. Click “Show all” in the Metafields box and write a description on the metafield you created.
• Navigate back to your blog’s section settings and click on the “Connect dynamic source” button next to the description’s setting label.

Description size: Select one of the three font sizes (Small, Normal, Large) for the blog’s description.

Make description fullwidth: When enabled, the description will span the full width of the banner. By default, the description will be limited to half the available width. Note that this applies when there is no blog image present.

Show blog tags on page banner: Any tags applied to your blog posts will be displayed under the heading when this setting is enabled. This is useful when you want your customers to be able to filter posts by tag.

Page banner color scheme: Change the color scheme of the page’s banner.

Blogs menu: Optionally assign a menu that will be displayed above the blog’s posts. This way, you can link multiple blogs or provide any kind of other navigation to your customers.

Posts per page: The number of blog posts to display per page.

Blog post cards

Show image: Whether to show each blog post’s image.

Show date: Turn the blog post’s date on or off.

Show author: Control the visibility of the author name on the blog post card.

Show tags: Whether to show the blog posts’s tags (if they are assigned) on the card.

Layout

Number of columns on desktop: Select the number of columns that the blog posts will appear in on desktop screens. On mobile and narrow viewports the blog posts will appear stacked in a single column.

The Events template

You can also set up a blog to show event dates for every blog post that has an event date. Read more on on how to set up event dates for your blog posts.

To assign the “Events” blog template on any blog, simply navigate to your blogs in your store’s Shopify admin via “Online store – Blog posts“. Click on the “Manage blogs” button on the top right, and then navigate to the blog you wish to edit.

Select “events” From the “Theme template” dropdown on the bottom right of the page and hit Save.

This blog will now be configured to display event dates for all of its blog posts that have an event date set.