Blog page

Overview:

The Main Blog section displays a selection of blog articles in a flexible grid layout. It supports customizable headings, layout configurations, and detailed control over blog card appearance. This section is ideal for showcasing recent posts or specific blog content on your store’s homepage or other pages.

Section Configuration:

Heading and Description

Setting	Description
Heading	Sets the main title displayed at the top of the section.
Heading Size	Controls the HTML heading level (h1–h6), which also affects font size.
Heading Weight	Defines the font weight of the heading text.
Description	Optional rich text displayed below the heading.
Description Size	Sets the font size of the description text.
Description Weight	Sets the font weight of the description text.
Show Border Below Heading	Adds a border underneath the heading and description for visual separation.

Grid Layout Settings

Setting	Description
Desktop Columns	Determines how many blog articles appear per row on desktop screens (2–5).
Desktop Rows	Sets how many rows of blog articles appear on desktop. The total number of articles shown = columns × rows.
Mobile Columns	Controls how many columns are shown on mobile (1 or 2).
Gap Between Articles	Adjusts the space between blog cards.

Blog Card Content Options

Setting	Description
Image Ratio	Sets the aspect ratio of the featured image: adapt, square, portrait, or landscape.
Card Heading Size	Controls the font size of blog titles within each card.
Card Heading Weight	Defines the font weight of blog titles.
Show Featured Image	Displays the featured image for each blog post.
Show Tags	Displays blog tags associated with each article.
Show Date	Shows the publication date of each article.
Show Author	Displays the author’s name on each blog card.
Show Excerpt	Shows a short summary of the article.
Show Comments Count	Displays the number of comments on each blog post, if applicable.

Setting	Description
Show Breadcrumb	Displays breadcrumb navigation above the section for improved user navigation.

Container & Layout

Setting	Description
Section Width	Sets the container width to either container (boxed) or container-fluid (full width).
Enable Container Padding	Adds or removes horizontal padding inside the container.
Text Alignment (Desktop)	Controls horizontal alignment of text on desktop screens.
Text Alignment (Mobile)	Controls horizontal alignment of text on mobile screens.
Color Scheme	Applies a color scheme to the background and text of the section.

Padding Settings

Setting	Description
Top Padding	Adds spacing above the section. Measured in pixels.
Bottom Padding	Adds spacing below the section. Measured in pixels.