Designing Your Blog Pages in the Theme Editor (OS 3.0 Themes)

The Blogs page and Blog Category page let customers browse your store's articles and filter them by topic, giving shoppers an easy way to discover your brand's stories, guides, and updates. Both pages are built from the same Blogs module in the Theme Editor, so most components and settings work the same way across each. 

This guide explains how to customize the Blogs page, configure the Blog Category page, and enable rich text overviews for your blog post previews.

Designing the Blogs Page

The Blogs page displays all of your store's blog posts as a list of cards. To open it in the Theme Editor:

1. From your SHOPLINE admin, go to Online Store > Design.
2. Locate your current theme and click the Design button to enter the Theme Editor.
3. In the page selector at the top, select Blog, then click Default to edit the standard Blogs page template, or click + Create a template to build a new layout from scratch.

4. Above the header section on the left-side menu, use the search field or the list of blog post titles to choose which blog post to preview. 

   Note: This list is only available if you've already created blog posts in the Blogs module. See "Creating and Managing Blog Posts" for more information.

5. Click the Article component to design how each blog post displays, including its Title, Author/Time, Image, Content, Share, 'Back' button, and Review section.

6. Click + Add component, then search for and add the Blogs section. Once added, you can configure the following settings:

   Note: The Blogs section is a component, not something exclusive to the Blog page.  You can add it to most other pages in the Theme Editor the same way — via + Add component — with the exception of the Checkout page. Any settings you configure here, including Enable rich text summary, apply wherever you add the Blogs section.

   • Blogs: Click the Blogs component to configure the general settings for the blog section, including:
     • Blog category: Click Choose blog category to filter which category of posts appear in the list.
     • Color: Select a color scheme for the page, or click Edit to modify an existing scheme.
     • Layout: Adjust how the blog list is arranged on the page.
     • Custom CSS: Add custom styling if needed.
   • Title: The heading text displayed above the blog list.
   • Blog list: The container that holds all blog post cards. Click it to configure:
     • Blog count: Set how many blog posts display in the list.
     • Number of columns (mobile): Set how many columns display per row on mobile devices.
     • Turn on left-right scroll on mobile: Let customers swipe horizontally through blog cards on mobile.
     • Mobile swipe style: Choose how cards behave when swiped on mobile (for example, Simple).
     • Number of columns (desktop): Set how many columns display per row on desktop.
     • Blog cards: Each individual card, made up of a Cover image and Blog info (Title, Author/date label, and Summary).
   • Buttons: Any call-to-action buttons displayed alongside the blog list.
7. Click Save to apply your settings.

Enabling Rich Text Overview for Blog Cards

By default, each blog card on the Blogs page and Blog Category page shows a plain text overview of the post. You can switch this to a rich text overview, which displays the same formatted preview text — including styling like bold, italics, and links — that appears in the blog post itself.

To enable rich text summaries:

1. Select a Blog cards component, then select Blog info > Summary on the left-side menu.
2. In the settings panel, turn on Enable rich text summary.

When this setting is off (default), the following options are available:

• Text Tag: Sets the HTML heading tag used for SEO purposes; this does not change how the summary looks on the page.
• Layout: Controls the text style used for the summary.
• Text Alignment: Left, center, or right align the summary text.
• Display Rule: Controls how much of the summary is shown (for example, full display or truncated). 

When this setting is on: 

• Only Display rule remains available. The summary is instead rendered using the same rich text formatting and SEO tags applied in the blog post editor.

Designing the Blog Category Page

The Blog category page works the same way as the Blogs page, but displays only the posts belonging to a specific category. 

To open it in the Theme Editor:

1. From the page selector, select the Blog category from the dropdown menu.
2. Use the search field or the list of categories in the left-hand panel to choose which category you're editing.
3. On the left-side menu, select the Blog category to view and edit its components.

The Blog category page shares the same Blog cards and Blog info components as the Blogs page (Cover image, Title, Author/date label, and Summary), including the Enable rich text summary setting described in "Enabling Rich Text Overview for Blog Cards" above. It also includes a Blog category name component, which displays the category title at the top of the page. 

In the settings panel, you can additionally configure:

• Layout: Choose Grid to arrange blog cards in columns.
• Number of columns (desktop): Set how many columns display per row; applicable only in grid layout.
• Number of blogs per page: Use the slider to set how many posts display before pagination.
• Color and Custom CSS: Same as on the Blogs page.