Blog

What this page does

The Blog page combines two layers:

1. A featured hero slider at the top (manual editorial highlights).
2. A post listing area with tag filters, cards, and pagination (automatic from blog content).

This gives merchants control over featured stories while keeping the main grid synced with published blog posts.

How this template is built

The blog template uses:

1. Product promo carousel section (for the top featured slider).
2. Beauty inspirations blog section (for chips, article grid, and pagination).

How to set it up

1. Go to Online Store -> Themes.
2. Click Customize.
3. Open the Blog template.
4. Select the top Product promo carousel section to manage featured slides.
5. Select Beauty inspirations blog section to manage listing settings.
6. Save.

How to add and edit blog posts

1. Go to Content -> Blog posts (or Online Store -> Blog posts, depending on admin layout).
2. Click Add blog post.
3. Choose the target blog (for example, Journal).
4. Set title, content, featured image, excerpt, author, publish date.
5. Add relevant tags (these drive filter chips).
6. Publish.

To edit an existing post:

1. Open the post from the post list.
2. Update content, tags, excerpt, image, or publish status.
3. Save.

Featured slider (top area)

The top slider is editorial and manual:

1. Each slide is a block in Product promo carousel.
2. You control eyebrow, heading, summary text, CTA label, link target, and background.
3. Use this area for high-priority or seasonal articles.

Listing and filters (main area)

The listing section behavior:

1. All Posts chip is always available.
2. Tag chips are generated from blog tags automatically.
3. Clicking a tag chip opens the tagged blog URL and filters the grid.
4. Cards show article image, first tag badge, title, excerpt, date, and author.
5. Pagination appears when post count exceeds configured posts-per-page.

Key settings explained

For the Beauty inspirations blog section:

1. Posts per page: controls how many cards render before pagination.

For the top Product promo carousel section:

1. Slide-level content controls featured hero copy and links.
2. Carousel controls affect top slider behavior and feel.

Important behavior

1. Tag chips come from post tags; no tags means only All Posts appears.
2. Card tag badge uses the first tag on each article.
3. Excerpt fallback uses truncated article content if excerpt is empty.
4. If no mapped thumbnail asset is found, the card shows a placeholder media area.
5. Filter navigation stores and restores scroll position in session storage for better UX.

Common tasks

Feature a new article in hero slider

1. Open Product promo carousel on Blog template.
2. Add or edit a slide block.
3. Set CTA link to the target blog post URL.
4. Save and verify in storefront.

Add a new filter category

1. Add the same new tag to one or more blog posts.
2. Publish updates.
3. Reload blog page and verify new chip appears.

Reduce grid length per page

1. Open Beauty inspirations blog section.
2. Lower Posts per page.
3. Save and check pagination.

Tips

1. Keep tag taxonomy clean (consistent casing and wording).
2. Use short, scannable titles for card readability.
3. Write purposeful excerpts to improve grid performance.
4. Keep hero slider focused on 3 to 5 top stories for clarity.

FAQs

Why is a tag chip missing?

No published posts currently use that tag in this blog.

Why does a card show generic/placeholder media?

The article does not resolve to a mapped thumbnail asset in theme logic.

Why is the card showing the wrong tag label?

The card displays the article’s first tag. Reorder or update tags on that post.

Why did page jump behavior improve after filtering?

The section stores previous scroll context in session storage and restores position on reload.

Related guides

• Blog Carousel Documentation
• Product Promo Carousel Documentation
• Theme Documentation
• Store Locations Documentation

Publish checklist

1. Featured slider links point to valid blog posts.
2. Tag naming is consistent across posts.
3. Excerpts and hero summaries are polished.
4. Pagination works at expected post count.
5. Mobile and desktop card layout verified.

Need help?

If you still need help, contact support via the Contact page.