1. What is a blog page?
The Blog Page is a crucial part of a website that serves as a content hub, engagement tool, and SEO booster. It helps in building brand authority, connecting with customers, and driving traffic to the site. By regularly publishing valuable content, it enhances the overall user experience and strengthens the relationship between the brand and its audience.
2. How to set up a blog page?
To set up a blog page, follow these grouped configuration steps:
- Select the heading tag for this section to enhance the SEO of the page.
- Tick the checkbox "Show all blog tags" to display all tags available in the blog, or untick it to hide them.
When tick the checkbox:
When untick the checkbox:
- Adjust the general layout settings by specifying the number of posts per page and setting the number of columns for desktop display.
Tips: To highlight the first row, you can set up "Number of columns on first row" differently to other rows. This configuration works like "Number of columns on desktop" but only applies to the first row of the blog post list. By default, it is set to match the "Number of columns on desktop" setting. (Only applies on desktop screens)
- For mobile devices, choose between different layout options like placing the image on top or to the left.
- Enhance the appearance of blog posts by enabling featured images and setting the desired image ratio.
- Display additional information such as the author’s name, the publication date, excerpts, tags, and comment counts.
.
- For posts without featured images, you can opt to display a secondary background.
- Adjust the padding for the top and bottom of the blog section to create appropriate spacing around the content.
3. How to add a top banner to the Blog page?
To include a banner image for the blog page, create a blog metafield:
In your store backend, go to Settings > Custom data > Metafields > Blogs.
Click Add definition, and fill in the necessary information:
- Name: "Featured image"
- Namespace and Key: "custom.image" (Please note that the key needs to be exactly like this.)
- Description: (optional) describe the purpose.
- Choose File, then One file, and set rules to accept only images.
- In each blog post's settings, select an image under Metafield > Featured image to be the banner. The banner will be shown at the top of each blog page, based on the image file added in the metafield.
- In the Theme editor > Blog page > Blog page section > Image banner: you can choose whether you want the banner to be full width on each device or not by configuring the settings "Make banner full width on desktop" and "Make banner full width on mobile".
4. How to set up the pagination on the Blog page?
a) How to choose pagination:
In Theme Editor, open the Search page, click on the section Blog page, find the Pagination setting. You have 3 options to choose from:
- Pagination (Default): This is the normal way to see products. Customers can click on numbers to go to different pages.
- Infinite scroll: This is like a never-ending page. When you scroll to the bottom, more products will appear automatically.
- Click to load: You'll see a button that says "Load more." Click it to see more products.
Which one should you choose?
- Infinite scroll is good if you want to show lots of products quickly, without requiring your customers to do any more actions.
- Click to load is good if you want to control how many products your customers see at a time. And let them control.
- Pagination (Default) is always a good choice if you're not sure.
b) How to change the pagination indicator style:
In Theme Editor, open the Search page, click on the section Blog page, find the Pagination type setting, you can choose between 2 options:
1️⃣ Circle:
2️⃣Underline:
These steps ensure a well-structured and visually appealing blog page that enhances the user experience and displays content effectively.
