Blog page
Section class: section-main-blog
Supported blocks
_sidebar
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Full width | full_width | checkbox | false | |
| Main section class | class | text | md:py-5 py-3 | Tailwind utilities for this section. Space separated, e.g. mt-2 mb-4 px-6. Spacing scale: 0-10 plus 15 and 20 (1 = 0.25rem = 4px); responsive with md: / lg:, e.g. lg:px-20 lg:mt-10. |
| Background | bg | color_background | Supports gradient colors. | |
| Or, use image | bg_schema | select | Background image schema go to theme settings. | |
| Enable background fixed | bg_attachment | checkbox | false | |
| Position | breadcrumbs | select | above | |
| Link color | breadcrumbs_color | select | secondary | |
| Custom text color | breadcrumbs_link_color | color | #111827 | Only used when Link color is Custom. |
| Alignment | breadcrumbs_align | text_alignment | center | |
| Show posts list | show_articles | checkbox | true | Turn off when the posts list is rendered by another section, for example a Sidebar section template. The top banner stays. |
| Number per page | per_page | range | 12 | |
| Per row (desktop) | card_per_row | range | 3 | When layout is grid |
| Per row (mobile) | card_per_row_mob | select | 2 | When layout is grid |
| Grid gap (desktop) | gap | range | 4 | Spacing scale, 1 = 0.25rem (4px). gap only supports 0-10. |
| Grid gap (mobile) | gap_mob | range | 2 | Spacing scale, 1 = 0.25rem (4px). gap only supports 0-10. |
| Enable masonry | card_masonry | checkbox | false | When default layout is grid. |
| Paging | show_paging | select | ajax | |
| Show tag filter by | show_filter | checkbox | true | |
| Style | filter_tag_style | select | solid | |
| Shape | filter_tag_radius | select | rounded-full | |
| Size (mobile) | filter_tag_size_mob | select | text-sm | |
| Size (desktop) | filter_tag_size | select | text-base | |
| Color | filter_tag_color | select | primary | |
| Custom color | filter_tag_custom_bg | color_background | #f3f4f6 | Shown when Color = Custom. Supports solid or gradient colors. |
| Custom text color | filter_tag_custom_text_color | color | #111827 | Shown when Color = Custom. |
| Tag class | filter_tag_class | text | ||
| Show view button | show_view | checkbox | true | |
| Show RSS feed link | show_rss_icon | checkbox | true |
Option values
- Or, use image (
bg_schema): None (``), Bg image schema 1 (bg_schema1), Bg image schema 2 (bg_schema2), Bg image schema 3 (bg_schema3), Bg image schema 4 (bg_schema4), Bg image schema 5 (bg_schema5), Bg image schema 6 (bg_schema6), Bg image schema 7 (bg_schema7), Bg image schema 8 (bg_schema8) - Position (
breadcrumbs): Above top banner (above), Above page title (above-title), Below banner text (below-text), Below top banner (below), Hide (hide) - Link color (
breadcrumbs_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Per row (mobile) (
card_per_row_mob): 1 (1), 2 (2) - Paging (
show_paging): Infinite scroll (ajax), Show buttons (btn) - Style (
filter_tag_style): Solid (solid), Outline (outline), Ghost (ghost) - Shape (
filter_tag_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Size (mobile) (
filter_tag_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Size (desktop) (
filter_tag_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Color (
filter_tag_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom)
💡 Edit via Shopify Admin → Online Store → Themes → Customize.