Build post templates and archive pages in SG-Builder

In short. SG-Builder has five post components that pull live content from your SGEN posts automatically — no manual copy-paste. Post Title, Post Content, Post Featured Image, and Post Navigation go on single-post detail templates (the page visitors land on when they click a post). Posts Archive goes on any listing page — blog index, events page, or a "Latest Posts" section — and renders a configurable grid with optional pagination. Drop the components into Cells, configure the Traits panel, publish, and the content fills itself in. The one rule that catches everyone: post-detail components only work when the page is assigned as a template in Appearance → Templates. Without that assignment they render blank.

On this page: Component overview · Steps · Trait reference · Troubleshooting · Related reading

How to display blog posts and content listings on your site

What is this for?

Five components, two use cases. Four components — Post Title, Post Content, Post Featured Image, Post Navigation — are for single-post detail templates. One — Posts Archive — is for any listing page.

• Post Title, Post Content, Post Featured Image, Post Navigation — read the current post context automatically. Drop them on a template page assigned in Appearance → Templates; they render the real post data when a visitor views a specific post.
• Posts Archive — queries your posts table and renders a configurable grid. Use it for blog indexes, event listings, or "Latest Posts" sections on any page.

For static content that doesn't change per-post — a Features section, a team grid — use Heading, Text, Image, and Card components instead.

All five components are available in the Blocks panel inside SG-Builder. Search by name to find them quickly.

Good use cases

Single-post template — Your Store needs one consistent layout for 18 blog posts. They create an SGB page, assign it as the Blog Single template in Appearance → Templates, and build the structure once. Every post uses it automatically. Here is what the published "How to Style a Canvas Tote Bag" post looks like:

Archive page — Your Store wants /blog listing posts in a 3-column grid, 9 per page, newest first, with pagination. They drop a Posts Archive component into a full-width Cell and configure the Traits panel:

After publishing, the /blog page renders a live grid of Your Store's 9 most recent posts with pagination:

"Latest Posts" homepage section — drop a Posts Archive into a section near the footer, set type to blog, limit to 3, order to date, order_by to desc, leave show_pagination off. The section updates itself whenever a new post is published — no homepage edits required:

What NOT to use this for

• Post Title / Content / Featured Image / Navigation only work on a template page. They read the "current post" context that only exists when a visitor views a specific post. Drop them on a standard landing page and they render blank — permanently.
• Posts Archive type has no "all" option. Pick page, blog, or event. For two post types side by side, use two Posts Archive components in adjacent Cells.
• Do not pick a featured image on the Post Featured Image component. There is no picker. The image comes from the "Featured Image" field on the post's edit page. No featured image on the post = blank component.
• Do not use Post Navigation on an archive page. It needs a current-post context to resolve prev/next — archive pages have none.

How this connects to other features

• Appearance → Templates — after building the template in SG-Builder, assign it as the Blog Single, Event Single, or custom-post single template. Post-detail components render blank until this assignment is in place. To assign: go to SG-Admin → Appearance → Templates, find the relevant post type row, click the template selector, and choose your SGB page. Save the assignment.
• Blog — add a new post — publish posts with featured images and body content before building the template. The Posts Archive type field (blog, event, page) maps directly to the post type. A post must have Published status to appear in the archive or detail template.
• Appearance → Custom CSS — none of the post components expose an additional_css trait. For typography overrides inside Post Content (link color, heading margin, code blocks), scope rules to body.page_id-<n> in Appearance → Custom CSS to keep them isolated to the post template page.
• Structure and layout in SG-Builder — all five components are Level-5 leaves. They must sit inside a Cell. Confirm the Section → Container → Row → Cell hierarchy is in place before dragging post components. If you drop a post component directly onto a Row or Container it will not render correctly.
• Media Library — upload the featured image there first, then set it on the post's "Featured Image" field using the sidebar picker on the post edit page. The Post Featured Image component has no image picker of its own — it only reads what is already set on the post.
• Appearance → Theme — the post template and archive page inherit the active theme's global typography, spacing, and color settings. Post components do not override theme styles by default; use Custom CSS for page-specific overrides.

Before you start

Before you open SG-Builder, confirm you have the following in place:

For a single-post detail template:

• At least 2 published posts of the target type (Blog, Events, or custom) so you can verify navigation works.
• Each post should have body content and a featured image set — otherwise Post Content and Post Featured Image will render blank during your test.
• A new, empty SGB page created specifically as the template. It does not need to be published — you can work on it in draft mode. Give it a clear name like "Blog Detail Template" so it is easy to identify in Appearance → Templates.

For an archive listing page:

• At least 3 published posts so the grid has visible content to render.
• The page where the archive will live already created (for example, your /blog page). If the page does not exist yet, create it in SG-Admin → Pages first, then open it in SG-Builder.

For both:

• Confirm the Section → Container → Row → Cell structure is in place before dropping post components. Post components are Level-5 leaf components — they must sit inside a Cell.
• Note the page ID of each page you are working on. You will need it for any body.page_id-<n> Custom CSS scoping. Find the ID in the URL when editing the page in SG-Admin (e.g., ...pages/edit/148 → page ID is 148).
• Save a published version of the SGB page before assigning it as a template. An unpublished SGB page can be assigned as a template, but it is good practice to publish first so the template layout is stable.

Where to go

1. Go to SG-Admin → Pages (or Blog, Events) and open the page or template in SG-Builder by clicking the builder icon next to it.
2. In the canvas, build your Section → Container → Row → Cell hierarchy if it is not already in place.
3. Open the Blocks panel on the left, search for the component by name ("Post Title", "Post Content", "Posts Archive", etc.), and drag it into a Cell.
4. Open the Traits panel on the right to configure available options for the component you just placed.

Component overview

Two template patterns:

• Single-post detail template — one SGB page assigned to a post type in Appearance → Templates. Visitors land here when they click a post. Use Post Title + Post Content + Post Featured Image + Post Navigation. Build the layout once; every post in that type uses it automatically.
• Archive listing page — a standard SGB page (any URL, typically /blog). Use Posts Archive to render a configurable grid of posts from a chosen post type. Add pagination when you expect more posts than your per-page limit.

The two patterns are independent. You can build only an archive, only a detail template, or both — they do not require each other.

Post components and the template assignment are tightly coupled. The four detail components (Post Title, Post Content, Post Featured Image, Post Navigation) render blank anywhere that is not a template-assigned page. A common error is dropping one of these onto a standard landing page or the homepage and wondering why it shows nothing on the live site. Always check: is the page I am building on set as a single-post template in Appearance → Templates?

Archive pages are not templates. The Posts Archive component works on any page — your /blog index, your homepage, an "Events" page. You do not need to assign it as a template. It queries SGEN posts by type and renders them wherever you place it.

Steps

1. Build the Section → Container → Row → Cell hierarchy

All five post components are Level-5 leaf components — they must sit inside a Cell. Build the hierarchy first.

A standard single-post template layout:

Section (full-width) Container (max-width ~900 px) Row Cell (full width) <- Post Featured Image Row Cell (full width) <- Post Title [heading_tag: h1] Row Cell (full width) <- Post Content Row Cell (full width) <- Post Navigation

2. Drop the components and check canvas placeholders

After dropping a post component into a Cell, the canvas shows a placeholder: ===POST_TITLE=== for Post Title, a Lorem ipsum block for Post Content, a placeholder image for Post Featured Image, and a real nav link for Post Navigation. This is correct — the real content appears only when a visitor views an actual post on the public site.

3. Configure Post Title heading tag

Select the Post Title component. In the Traits panel, change heading_tag from the default div to h1. Every blog detail page should have exactly one <h1> — this component is it. Using div or h2 here harms SEO.

4. Configure Posts Archive query (archive pages only)

Select the Posts Archive component. In the Traits panel:

1. Set type to blog, page, or event — required, no "all" option.
2. Set limit (default: 12) to the number of posts per page.
3. Set order and order_by (asc or desc).
4. Enable show_pagination when posts exceed limit.
5. Enable use_excerpt to show short summary cards instead of full post bodies.
6. In the config section, set items_per_row to 2 or 3.

category, include_ids, and exclude_ids are plain text fields — enter comma-separated IDs or leave blank to show all posts. A typo here silently filters incorrectly.

5. Publish and verify

Click Publish in SG-Builder. The save flash confirms the section is live:

Open the public page in a new tab. For single-post templates, navigate to an actual published post. For archive pages, the post grid should render with real titles, images, and links. If a section is blank, the most common cause is a missing template assignment — see "What to do if it does not work" below.

Component trait reference

None of the post components have an additional_css trait — use Appearance → Custom CSS scoped to body.page_id-<n> for decorative overrides.

To access traits: select the component in the SG-Builder canvas, then open the Traits panel on the right side of the editor. Each component shows only its own traits — selecting a Cell or Container shows different options. If the Traits panel appears empty after selecting a post component, click directly on the component block itself (not its parent Cell).

Post Title traits

The builder canvas shows ===POST_TITLE=== as a placeholder. This is correct — the real post title appears only when a visitor views a specific post on the public site.

heading_tag default is div, not h1. Every single-post detail page should have exactly one <h1> — change this trait before publishing. Using div or h2 for the post title means the page has no <h1>, which harms search indexing. The fix is a one-field trait change in the builder — no layout rebuild required.

Post Content traits

No configurable traits. Outputs the post's full body exactly as saved — all heading tags, lists, inline links, embedded images, and custom HTML blocks are preserved. The component has no truncation or filtering options; the only way to show a shorter version of post content on a listing page is to use the use_excerpt trait on a Posts Archive component, not on Post Content itself.

Post Featured Image traits

No image picker. The image comes from the "Featured Image" field on the post's own edit page. No featured image = blank output with no fallback.

Post Navigation traits

At the start or end of the post list one direction renders blank — the first post has no "previous", the last has no "next". This is correct behavior. If you want to customize the link labels or icons, change prev_label, next_label, prev_icon, or next_icon in the Traits panel before publishing.

Posts Archive traits

items_per_row set on desktop cascades to mobile unchanged. If the grid stacks incorrectly on narrow screens, add a Style Manager override at the tablet and mobile breakpoints, or scope a fix to body.page_id-<n> in Appearance → Custom CSS.

include_ids and exclude_ids override the type query. If you set include_ids, only those specific posts appear regardless of type. Use exclude_ids to hide specific posts from an otherwise normal type-filtered list. Both fields accept comma-separated post IDs — find a post's ID in the URL when editing it in SG-Admin.

order + order_by interaction:

• order: default with any order_by value = catalog/insertion order, ascending or descending.
• order: date + order_by: desc = newest posts first (the most common archive sort).
• order: title + order_by: asc = alphabetical A→Z.

If you want posts ordered by publish date newest first (typical blog index), set order to date and order_by to desc. The default order: default does not guarantee date order.

The complete flow

Full component layout for a blog detail template — every component is a Level-5 leaf in its own Cell:

What success looks like

Single-post detail template:

• Visiting a published blog post URL shows the featured image at the top of the page.
• The post title renders as an <h1> (assuming you changed heading_tag in step 3).
• The full body content appears with all formatting from the post editor — headings, lists, inline images, blockquotes, and any embedded HTML.
• Previous and Next navigation links appear at the bottom. The first post in the series shows only "Next" (no "Previous"). The last post shows only "Previous" (no "Next"). A post in the middle of the series shows both.

Archive listing page:

• The page shows a grid of post cards. Each card displays the featured image (if set), the post title, the excerpt or body (depending on use_excerpt), and a link to the detail page.
• The grid respects the items_per_row config — 3 columns on desktop with 3 set, 2 columns with 2 set.
• Pagination controls appear at the bottom only when the total post count exceeds limit. Clicking a page number loads the next set without reloading the whole page.

Post Featured Image (when the post has no featured image):

• The component renders blank — no fallback image or placeholder is shown on the public site. This is expected behavior; set a featured image on the post to populate it.

What to do if it does not work

• Template renders blank on the public site — the template has not been assigned. Go to Appearance → Templates and set this SGB page as the single-post template for the post type. Without this assignment, SGEN does not know to use this layout for any post in that type.
• Post Featured Image is blank — the post has no featured image. Open the post in SG-Admin → Blog (or Events), find the "Featured Image" sidebar field, and upload or select an image from the Media Library. The component renders blank with no fallback when no image is set.
• Post Title or Post Content blank on the detail page — the page you dropped the component on is not being used as a template. Check the template assignment in Appearance → Templates and confirm the correct SGB page is selected for the post type.
• Posts Archive shows no posts — confirm type is set to the correct post type (blog, page, or event) and that published posts of that type exist. Drafts, scheduled, and trashed posts are excluded from the archive query.
• Posts Archive shows wrong posts or too few — check category, include_ids, and exclude_ids if you have set them. These are plain text fields for comma-separated IDs — a typo here silently filters incorrectly and SGEN does not surface an error. Clear all three fields to reset the query to all published posts of the selected type.
• Post Navigation shows no links — fewer than 2 published posts of that type exist. The component has nothing to link to. Publish at least 2 posts of the same type.
• Post Navigation shows unexpected links in the builder canvas — the canvas placeholder uses any available published post for the nav preview. This is expected. The real prev/next links on the public site are always calculated from the current post's position.
• Posts Archive grid stacks to a single column on mobile — items_per_row does not cascade responsive overrides automatically. Add breakpoint-specific overrides in the Style Manager or scope a CSS fix to body.page_id-<n> in Appearance → Custom CSS.

Related reading

• Structure and layout in SG-Builder — the Section → Container → Row → Cell hierarchy every post component must sit inside. Read this first if you are new to SG-Builder.
• Text, headings, and buttons in SG-Builder — the static leaf components (Heading, Text, Button, Divider) used alongside post components on non-template cells of the same page.
• Ecommerce storefront components in SG-Builder — the parallel leaf component family for product-bound pages; the same Level-5 leaf rules apply.
• Add a new blog post — publish the blog content that the post template components display. Post components depend on published, well-formed post records to render correctly.

Next step

Once your template is built and published, two things make it work:

• Appearance → Templates — assign your new template so SGEN uses it for blog or event detail pages. Without this assignment, the post components render blank on the public site. Check the assignment after every SGB rebuild of the template page — reassigning is not automatic.
• Blog — publish posts with featured images and body content to populate the template. The archive grid and the detail template both depend on published post records. Drafts and trashed posts do not appear.
• Appearance → Custom CSS — write scoped CSS for post body typography and navigation link styles using body.page_id-<n> selectors to keep the rules isolated to the post template page. Global styles from the active theme still apply; Custom CSS overrides sit on top.

If you have both a detail template and an archive page, verify both independently: visit the archive page first (grid should render), then click into a post (detail template should render). A blank archive page and a working detail template point to a Posts Archive configuration issue. A blank detail page with a working archive points to a missing template assignment.

The most common first-time setup sequence: create posts → build archive page → build detail template → assign template → verify archive → verify detail. Running these steps in order surfaces each dependency before the next one is needed.