Blog post
Overview:
The Main Article section is used to display individual blog articles on the storefront. It supports article titles, featured images, content areas, meta information, tags, social sharing, pagination, and custom Liquid integrations. The section also includes advanced layout customization, typography styling, color schemes, alignment controls, and responsive spacing settings for desktop and mobile devices.
Section Configuration:
Breadcrumb:
| Setting |
Description |
| Show Breadcrumb |
Displays breadcrumb navigation above the article content for improved navigation and SEO structure. |
| Breadcrumb Color Scheme |
Applies a predefined color palette to the breadcrumb section. |
Layout
| Setting |
Description |
| Enable Share Buttons |
Displays social sharing options for the article page. |
| Enable Pagination |
Displays previous and next article navigation links. |
| Container Layout |
Determines whether the article section uses a contained, contained content, or full-width layout. |
| Container Width |
Controls the maximum width of the article container on desktop devices. |
| Text Alignment (Desktop) |
Sets the horizontal alignment of article content on desktop devices. |
| Text Alignment (Mobile) |
Sets the horizontal alignment of article content on mobile devices. |
Color Scheme
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the article section background and content. |
| Inverse Color Scheme |
Inverts the selected color scheme styling for contrast variations. |
| Gradient Mode |
Enables gradient styling for the section background, widgets, or both. |
| Enable Heading Gradient |
Enables gradient styling for article headings. |
Padding
| Setting |
Description |
| Top Padding |
Adds vertical spacing above the section. |
| Bottom Padding |
Adds vertical spacing below the section. |
Blocks Configuration:
Typography:
| Setting |
Description |
| Article Heading Size |
Controls the size of the article title text. |
| Article Heading Weight |
Adjusts the font thickness of the article title. |
| Article Heading Case |
Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Article Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Article Heading Font Family |
Allows switching between default and body font family styles. |
| Article Heading Color Style |
Applies predefined color styling to the article title. |
Featured Image Block:
| Setting |
Description |
| Media Ratio |
Controls the aspect ratio of the featured article image such as adapt, square, portrait, landscape, or fit to box. |
| Desktop Height |
Controls the height of the featured image on desktop devices when fit mode is enabled. |
| Mobile Height |
Controls the height of the featured image on mobile devices when fit mode is enabled. |
Content Block:
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the article content on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the article content on mobile devices. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the article tags section on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the article tags section on mobile devices. |
| Setting |
Description |
| Show Author |
Displays the article author name. |
| Show Comment Count |
Displays the total number of comments on the article. |
| Show Publish Date |
Displays the article publishing date. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the article meta information on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the article meta information on mobile devices. |
Custom Liquid Block
| Setting |
Description |
| Custom Liquid Code |
Allows adding custom Liquid or dynamic Shopify code inside the article page. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the custom Liquid block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the custom Liquid block on mobile devices. |
App Block
| Setting |
Description |
| App Integration |
Allows Shopify apps to inject dynamic functionality into the article page. |
