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.

1. How to access Blog Posts section?

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

2. How to customize Blog Posts section?

2.1. Blog block

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

2.2. Blog posts

Once you add the Blog posts section, you can customize its settings in the left or right sidebar (depending on your screen size)

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

Section padding

• 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. 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.

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

2.3. Section header

2.3.1. Heading block

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.

2.3.2. Sub heading block

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.

2.3.3. Text block

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.

2.3.4. Caption block

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.

2.3.5. Spacer block

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

2.3.6. Icon block

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

Updated on: 15/08/2025