The Blog Posts section will help you discover useful tips, news, and insights to help you connect more deeply with your customers. Not just sell products, but share the stories, values, and passion behind each product. Discover the journey of building a brand, creative inspiration, and continuous efforts to deliver the best experiences.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor ( Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Blog Posts
Clicking on the Blog title under Blog Posts section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Blog: This setting allows you to select which specific blog from your Shopify store you want to display in this section. You might have multiple blogs for different topics.
Number of blog posts to show: This determines how many of the latest blog posts will be displayed in this section.
Number of columns on desktop: This option controls how the blog posts are arranged horizontally on larger, desktop screens.
Image ratio: Adjust the aspect ratio of collection images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
Show category: This setting dictates what information, if any, related to the blog post's category is displayed. The options you've listed suggest different ways to identify or display category-like information (Disable, Blog title, The first article's tag, From tags contains 'category_')
Show date: A simple toggle (enable/disable) to display the publication date of each blog post.
Date format: This allows you to choose how the date is displayed (e.g: April 19, 2025, etc.). Themes often provide a dropdown with various formatting options
Show author: Another toggle to display the name of the author who wrote the blog post. This usually pulls the author information from your Shopify settings.
Show comments count: If comments are enabled for your blog posts, this toggle will display the number of comments each post has received.
Show excerpt: This option enables the display of a short summary or preview of each blog post's content. This is usually either automatically generated from the beginning of the post or a custom excerpt you've entered when creating the post.
Show readmore: This toggle adds a "Read More" button or link below the excerpt (if shown) or the title, allowing users to click through to the full blog post
Once you add the Blog posts section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.2.1. General
Reveal on scroll (Show animation when section becomes visible): Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience
Button label: Enter the label for the display button
Button link: Select the link to the Blog posts
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
2.2.2. Theme Settings
In the Blog posts > click open Theme Settings tab
Reveal sections on scroll is an effective web design technique to increase interactivity and improve user experience.
Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices
Horizontal space: Adjust the spacing between posts, control layout, and create clarity for your content.
2.2.3. Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme Settings
To add Heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.
To add Sub heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Sub heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design. ****
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Text block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content you want to display, allowing customization of the message and information conveyed.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design
Size: Adjust the font size of the text, ensuring readability and compatibility with the website layout (eg: Small, Medium, Large,...)
Hide on mobile: Hides or shows the text on mobile devices, optimizing the user experience on different screen sizes.
To add Caption block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.
Once the Caption block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users.
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Spacer block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.
Once the Spacer block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Space: Setting space between elements creates clear separation.
Tablet space: Optimizes the spacing between elements on tablet screens, ensuring content is displayed balanced and easy to interact with on medium-sized screen devices.
Mobile space: Adjusts the spacing between elements on mobile phone screens, optimizing the user experience on small screens
To add Icon block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.
Once the Icon block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Icon height: Adjust the icon height on desktop screens, controlling the display size.
Tablet icon height: Adjust the icon height on tablet screens, optimizing display for this device.
Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
How to get an SVG icon?
Step 1: Click the link Get a svg remixicon, or tabler icons under Custom SVG icon option
Step 2: Search icon you want > Click the icon > click Copy SVG button
Step 3: Go back to theme customize and paste SVG icon into the field