F12 Labs
AedifyAedify documentation / Elements
Collections and Blog posts elements
How to show live collection cards and blog post cards on an Aedify page, blog post or description: grid or carousel, picking and ordering collections, the latest posts from a blog with an optional tag or posts you pick, cards per row on each device, card styles, what each card shows, and why the Aedify content block is needed.
Two elements in the Commerce group show cards that link to other parts of your store:
- Collections: a card for each collection you pick, with its image and name. Good for "Shop by category" rows.
- Blog posts: cards for the latest posts from a blog, or for posts you pick, with image, date, excerpt and a Read more link.
Like the Products element, both are live. Aedify saves only which collections or posts to show. Names, images and new posts come from your store every time the page loads, so the cards never go out of date.
New to the builder? Start with Using the builder.
Before you start: the Aedify content block
The cards are filled in on your storefront by the Aedify content block in your theme. Without it, these elements show nothing to shoppers.
- Pages and blog posts: add the block from Storefront setup on Aedify's home page. See Getting started.
- Product and collection descriptions: add the block to your product or collection template too.
If the block is missing where you use one of these elements, the builder shows Products, collections and blog posts need the Aedify content block with a link to add it. For descriptions, add the block to your product or collection template; see Product and collection descriptions.
Collections
Choosing collections
Click Choose collections and pick up to 24 in Shopify's picker. They're listed in Collections in the order they'll show:
- Use the up and down arrows next to a collection to move it.
- The bin icon removes one. Remove all clears the list.
- Edit collections opens the picker again. Collections you keep stay where you put them; new ones go at the end.
A collection without its own image shows the image of its first product.
Collections settings
| Setting | Default | What it does |
|---|---|---|
| Appearance | Collection Grid | Collection Grid shows rows of cards. Collection Carousel shows one row that scrolls sideways |
| Collections per row (grid) or Collections visible at once (carousel) | Desktop 4, Tablet 3, Phone 2 | 1 to 6 each |
| Customize design | Card style, image, name and layout. See Card design | |
| Show product count | Off | Adds a line such as "12 products" under the name |
| List name for screen readers | Collections | Names the list (and the carousel) for screen readers, for example "Shop by category" |
Collections shoppers can't see
Only collections published to the Online Store sales channel are shown. If some aren't, the settings say how many, for example 2 collections aren't shown: not published to the Online Store sales channel. Publish them in Shopify, from the collection's Sales channels, to show them.
Blog posts
Choosing posts
Show has two options.
Latest from a blog (default) shows a blog's newest posts:
| Setting | Default | What it does |
|---|---|---|
| Blog | None | Click Choose blog and pick one from the list. Type to search |
| Only posts tagged | Any tag | Optional. One tag, exactly as written on the posts |
| Number of posts to display | 3 | 1 to 24, newest first |
New posts appear on their own when you publish them. You don't need to save the page again.
Pick posts shows posts you choose, from any blog:
- Click Choose posts and search. Click a post to add it; it shows Added. Click it again to take it out.
- Click Done.
- Reorder the list with the up and down arrows, or remove posts with the bin icon. Add or remove posts opens the search again; Remove all clears the list.
You can pick up to 24 posts.
Blog posts settings
| Setting | Default | What it does |
|---|---|---|
| Appearance | Post Grid | Post Grid or Post Carousel |
| Posts per row (grid) or Posts visible at once (carousel) | Desktop 3, Tablet 2, Phone 1 | 1 to 6 each |
| Customize design | Card style, image, title and layout. See Card design | |
| Show on each card | See below | What each card shows |
| List name for screen readers | The blog's name, or Blog posts | Names the list (and the carousel) for screen readers |
Show on each card:
| Part | Default | Notes |
|---|---|---|
| Image | On | The post's featured image |
| Date | On | The publish date, such as "Oct 20, 2026" |
| Author | Off | |
| Excerpt | On | The post's excerpt, or the start of the post if it has none, cut to 30 words |
| "Read more" link | On | Screen readers also hear the post title, such as "Read more: Planting tulips in autumn" |
The post title is always shown, and links to the post.
Posts shoppers can't see
Only published posts are shown. With Pick posts, if some are hidden or scheduled, the settings say how many, for example 1 post isn't shown: not published yet. They show once they're published.
Grid or carousel
A carousel is one row that scrolls sideways. Shoppers swipe, use a trackpad, or click into it and use the arrow keys. Carousels have no arrows and don't move on their own.
The canvas shows the desktop layout. Use Preview → Tablet or Mobile to check the others.
Card design
Customize design opens Customize collection cards or Customize blog post cards, with a live preview.
Card style:
| Style | What it looks like |
|---|---|
| Simple (default) | Image, with the name below it |
| Boxed | A card with a border, and the name padded inside. Adds Card background, Card border and Card corner radius (8px if empty) |
| Overlay | The name sits on the image, over a dark shade, in white unless you pick a colour |
The other settings:
| Group | Settings |
|---|---|
| Image | Height (empty keeps images square, or a size such as 240px), Width, Fit (Crop to fill (default) or Fit whole image), Corner radius |
| Collection name or Post title | Font size, Weight (Theme default, Regular, Medium, Semibold, Bold), Color, Maximum lines (No limit, 1, 2 or 3 lines) |
| Layout | Alignment (Left, Center, Right), Space between cards |
Reset to default design clears it all.
Limits
| Limit | Value |
|---|---|
| Collections in one element | 24 |
| Posts in one element | 24, picked or latest |
Troubleshooting
The element shows nothing on my store. Add the Aedify content block to the template the page uses (see Before you start). Check that the collections are on the Online Store channel, or that the blog has published posts.
A tagged post doesn't appear. The tag must match exactly, including capitals. On your storefront, the tag filter looks through the blog's 50 newest posts, so an older tagged post may not show even if the builder's preview has it.
I renamed a collection or blog, and the cards disappeared. Your storefront finds collections, blogs and posts by their handle (the end of their address). Open the page in Aedify and save it again to pick up the new handle. Collections and posts you've deleted are dropped from the element when you save.
The product count looks different on my store. The builder counts every product in the collection; your storefront counts the ones shoppers can see.