> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/page-templates/other-pages/blog-posts.md).

# Blog posts

## Blog & Article pages

Your blog is where you build authority, share stories, and connect with customers beyond product listings. Arctos separates the blog into two distinct experiences:

* **Blog listing page** — shows all articles in a paginated grid (like a magazine index)
* **Article detail page** — the full reading experience for a single article

Each has its own sections and settings, giving you complete control over both the browsing and reading experience.

***

### What you can customize

#### Blog listing page

* **Posts per page** — control how many article cards appear before pagination
* **Grid layout** — adjust spacing between article cards for desktop and mobile
* **Color and background** — apply custom color schemes or backgrounds to the article grid

#### Article detail page

* **Featured image style** — choose between a split layout (image beside text) or full-width image
* **Reading layout** — control the gap between the article hero and body content
* **Background and spacing** — customize the visual appearance for the article section

***

### How to access this template

1. In the **Theme Editor (Customize)**, click the **template selector** (dropdown at the top).
2. Select **Blog posts** → choose a blog or create a new template.
3. The page editor will show the **Page Header** and **Blog posts** sections.

> **💡 Tip:** To customize a specific blog, go to **Store Admin** → **Blog posts** → select a blog → **Theme** → click **Customize**.

***

### Page overview

| Area                | What customers see                                                                | Why it matters                                                            |
| ------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| **Page Header**     | Blog name, optional description, and background image or color                    | Sets the tone and brand feel of your blog — like a magazine masthead.     |
| **Blog posts grid** | Article cards in a responsive grid — featured image, title, excerpt, date, author | The browsing experience. Cards should be scannable and visually balanced. |
| **Article detail**  | Featured image, title, author, date, article body, and share buttons              | The reading experience. Must be clean, legible, and distraction-free.     |

***

### Sections

#### Blog listing page

**Page Header**

The heading area at the top of your blog listing page. Its settings mirror the Collection Page Header — see the Collection page guide for full details on container width, background, and spacing options.

Key settings available:

* **Container width** — *Inherit / Full width / Standard / Wide / Narrow*
* **Show breadcrumbs** — displays navigation trail (e.g., *Home > Journal*)
* **Show count** — displays total number of articles in the blog
* **Custom background** — supports color, gradient, image, or video backgrounds
* **Padding** — custom top/bottom/left/right padding with mobile overrides

***

**Blog posts**

The main section displaying all articles in a paginated grid.

**General — Posts per page**

Controls how many article cards appear before pagination kicks in. Higher values show more articles at once; lower values keep the page fast and focused.

**Range:** *3* to *30*

**Default:** *14*

**Layout — Invisible mode**

When enabled, removes the section's background and padding so the article grid sits directly on your page background.

**Default:** *Disabled*

**Layout — Container width**

Controls the maximum width of the article grid.

**Options:** *Inherit / Full width / Standard / Wide / Narrow*

**Default:** *Inherit*

***

**Inner content layout — Gap**

Controls the spacing between article cards in the grid. Tight spacing creates a denser, more compact look; wider spacing gives each card more breathing room and feels more editorial.

**Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom*

**Default:** *Default*

**Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px.

**Default:** *4px*

**Custom on mobile** — Enable different gap values for mobile devices.

**Default:** *Disabled*

**Mobile Gap** — Gap options for mobile.

**Default:** *Default*

**Mobile Custom gap** — Custom gap value for mobile.

**Default:** *4px*

> **💡 Tip:** Use a wider gap (16–24px) for a magazine-style editorial feel. Use a tighter gap (4–8px) for a dense, product-like card grid.

***

**Style & Background**

**Inherit color scheme** — When enabled, uses your theme's default color scheme.

**Default:** *Enabled*

**Color Scheme** — When disabled, pick a color scheme for this section.

**Default:** *Scheme 1*

**Custom background** — Enable to add a color background behind the article grid.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None* or *Color*

**Color style** — When Background is Color: *Solid* or *Gradient*

**Color code** — The actual color values.

**Default:** *Solid — #ffffff*

***

**Spacing**

**Padding** — Enable custom padding values to control the space around the article grid section.

**Defaults:** *Top 32px, Bottom 32px, Left 32px, Right 32px*

**Custom on mobile** — Enable mobile-specific padding overrides.

**Mobile defaults:** *Top 16px, Bottom 16px, Left 16px, Right 16px*

***

#### Article detail page

The full reading experience for a single article. The article page is built from two mandatory blocks:

* **\_blck\_article\_hero** — displays the article title, author, date, share buttons, and optional featured image
* **\_blck\_article\_main\_content** — displays the article body text (from the blog post editor in Shopify)

***

**Section settings**

**Featured image — Style**

Controls how the article's featured image appears at the top of the article.

**Options:**

* *Split* — The image is constrained to one side of the hero area, with the title and metadata beside it. Creates an editorial, magazine-style layout. Good for blogs with a strong visual identity.
* *Full image* — The image spans the full width of the hero area, with all text content above or below it. Creates a dramatic, immersive feel. Best for blogs where the featured image is a key part of each post.

**Default:** *Full image*

> **💡 Tip:** The **Split** style works best when your featured images are consistently landscape (wide). Portrait-oriented images will appear small in a split layout.

**Featured image — Height**

Controls the height of the featured image when displayed.

**Options:**

* *Fit* — The image uses its natural aspect ratio. Keeps the image undistorted but height may vary between articles.
* *Custom* — Set a fixed height (in pixels) for all featured images. Creates a uniform, polished look across all articles — regardless of each image's natural dimensions.

**Default:** *Fit*

**Custom height** — When Height is set to Custom, enter a value from 400 to 800px.

**Default:** *728px*

**Custom on mobile** — Enable different height values for mobile devices.

**Default:** *Disabled*

**Mobile Featured image height** — When Custom on mobile is enabled: *Fit* or *Custom*

**Mobile Custom height** — Custom height for mobile, from 200 to 500px.

**Default:** *300px*

> **💡 Tip:** For mobile, using a shorter custom height (200–300px) prevents the featured image from dominating the screen and keeps the article content visible above the fold.

**Layout — Invisible mode**

When enabled, removes background and padding so the article sits cleanly on your page background — creating a seamless feel where the article flows with surrounding sections.

**Default:** *Enabled*

> **💡 Tip:** Keep Invisible mode enabled for a clean, reading-focused experience. Disable it only when you want the article section to stand out visually from the rest of your page.

**Layout — Container width**

Controls the maximum width of the article content.

**Options:** *Inherit / Full width / Standard / Wide*

**Default:** *Inherit*

> **💡 Tip:** Keep the article body at **Narrow** or **Standard** width. Lines of text that are too wide are harder to read — the optimal reading width is around 65–75 characters per line.

***

**Inner content layout — Gap**

Controls the vertical spacing between the article Hero (title, author, date) and the article Body (main content). This creates breathing room between the introduction and the actual reading material.

**Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom*

**Default:** *Default*

**Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px.

**Default:** *4px*

**Custom on mobile** — Enable different gap values for mobile.

**Default:** *Disabled*

**Mobile Gap** — Gap options for mobile.

**Default:** *8*

**Mobile Custom gap** — Custom gap value for mobile.

**Default:** *4px*

***

**Style & Background**

**Inherit color scheme** — When enabled, uses your theme's default color scheme.

**Default:** *Enabled*

**Color Scheme** — When disabled, pick a color scheme.

**Default:** *Scheme 1*

**Custom background** — Enable to add a color background behind the article.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None* or *Color*

**Color style** — When Background is Color: *Solid* or *Gradient*

**Color code** — The actual color values.

**Default:** *Solid — #ffffff*

***

**Spacing**

**Padding** — Enable custom padding values around the article section.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0 to 200px.

**Default:** *0px*

**Custom on mobile** — Enable mobile-specific padding.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px.

**Default:** *0px*

***

### Tips & best practices

> **💡 Tip:** For a clean, editorial magazine feel on your blog listing page, use a **Narrow** container width and increase the grid gap to 16–24px. This creates a focused, magazine-style browsing experience.

> **💡 Tip:** On the Article detail page, use the **Full image** featured image style with a **Custom height** (e.g., 600px). This creates a bold, visual-first article that feels premium and immersive — especially effective for travel, food, or fashion blogs.

> **💡 Tip:** Use the **Split** featured image style only when your featured images are consistently landscape (16:9 or wider). For portrait or mixed-orientation images, the **Full image** style is more reliable.

> **⚠️ Warning:** Avoid setting your article body to **Full width**. Wide text columns are difficult to read and cause eye fatigue. Keep it at **Narrow** or **Standard** (max \~750px) for the best reading experience.

***

### Common questions

**Q: How do I change the blog name or add a description?**

A: Go to **Store Admin** → **Blog posts** → select your blog → edit the **Title** and **Description** fields. The Page Header section will automatically pull in this information.

**Q: Can I reorder the article title, author, and date?**

A: Yes — the **Article Hero** block controls the order and styling of these elements. You can customize their display within the block settings.

**Q: How do I add share buttons to articles?**

A: The share buttons are part of the **Article Hero** block and are automatically included in the article page layout.

**Q: Can I add related articles below the main content?**

A: Yes — use **Add section** below the Article section to insert any Custom Section, such as a Featured Articles section or a related products row.

***

### Related pages

* Global Theme Settings — configure default typography and brand settings
* Custom Section guide — add custom sections to your blog pages
* Product Page Template — link from blog posts to relevant products
* Highlight Features — understand the theme's component architecture