> 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/blog-and-blog-post.md).

# Blog and Blog post

Customize your blog listing and article detail pages — from post grids and featured images to reading layout and spacing.

<figure><img src="https://193928255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9PfGmHWEt81G4XNeDZqZ%2Fuploads%2F6Q45JaCq0URXuTsxQUWw%2FBlog%20post.webp?alt=media&amp;token=ea765e90-3f35-4e24-93c2-2f430a50b56f" alt=""><figcaption></figcaption></figure>

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

* **Blog page** — shows all articles in a paginated grid, like a magazine index
* **Blog post 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 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

#### Blog posts 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 of 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.

{% hint style="success" %}
**Tip:** To customize a specific blog, go to **Store Admin** → **Blog posts** → select a blog → **Theme** → click **Customize**.
{% endhint %}

***

### 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 starts. Higher values show more articles at once; lower values keep the page fast and focused.

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

**Layout — Invisible mode**

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

**Layout — Container width**

Controls the maximum width of the article grid.

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

***

**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*

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

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

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

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

{% hint style="success" icon="lightbulb" %}
**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.
{% endhint %}

***

**Style & Background**

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

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

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

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

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

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

***

**Spacing**

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

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

***

#### Article detail page

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

* **Article hero** — displays the article title, author, date, share buttons, and optional featured image
* **Article 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.

{% hint style="success" icon="lightbulb" %}
**Tip:** The **Split** style works best when your featured images are consistently landscape (wide). Portrait-oriented images will appear small in a split layout.
{% endhint %}

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

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

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

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

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

{% hint style="success" icon="lightbulb" %}
**Tip:** On mobile, a shorter custom height (200–300px) prevents the featured image from dominating the screen and keeps the article content visible above the fold.
{% endhint %}

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

{% hint style="success" icon="lightbulb" %}
**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.
{% endhint %}

**Layout — Container width**

Controls the maximum width of the article content.

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

{% hint style="info" icon="note-sticky" %}
**Note:** Keep the article body at **Standard** or **Narrow** width. Lines of text that are too wide are harder to read — the optimal reading width is around 65–75 characters per line.
{% endhint %}

***

**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*

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

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

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

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

***

**Style & Background**

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

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

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

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

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

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

***

**Spacing**

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

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

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

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

***

### Tips & best practices

{% hint style="success" %}
**Tip:** 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.
{% endhint %}