Companion Collections in Webflow:
Solving the Multi-Image Problem

Every Webflow developer hits this wall eventually. You are building a property listing, a product page, a portfolio project, or an event gallery. You need to display multiple images. You open the CMS field options and realize: there is no multi-image field type. Every Image field in Webflow holds exactly one image.

This is not a bug or an oversight — it is a fundamental constraint of how Webflow's CMS is structured. And the standard solution is a pattern called a companion collection.

This guide explains exactly what companion collections are, when you need them, how to set them up step by step, and how to avoid the performance and maintainability pitfalls that come with them.

Webflow's Single-Image Field Limitation

Webflow's CMS offers an Image field type that stores one image per item. If you need a product with five gallery images, you have two bad options within a single collection:

• Multiple image fields: Create Gallery Image 1, Gallery Image 2, Gallery Image 3, and so on. This burns through your 54 custom fields quickly. A six-image gallery with alt text fields consumes 12 of your available fields. You have also hardcoded the maximum — if one product needs seven images, you need to add another field and rebind in the Designer for every template that uses it.
• Rich Text embedding: Embed images directly in a Rich Text field. This gives you unlimited images but strips away all structure. No alt text fields, no sort order, no conditional display, no way to bind individual images to design elements. You lose everything that makes a CMS a CMS.

Neither option scales. The companion collection pattern does.

What a Companion Collection Is

A companion collection is a separate CMS collection that exists solely to store child items belonging to a parent collection. It is not a standalone entity with its own pages — it exists to extend the data model of its parent.

The term "companion" distinguishes it from a regular collection. Blog Posts is a regular collection — it has its own template page, its own listing, its own purpose. "Product Photos" is a companion collection — it has no standalone page. Its only purpose is to hold images that belong to items in the Products collection.

The relationship is always the same: the companion collection has a Reference field pointing to the parent collection. Each companion item says "I belong to this parent." On the parent's template page, a nested Collection List filtered by that reference displays the companion items.

The Linking Pattern: Parent to Companion

The companion collection linking pattern has three parts:

The parent collection

This is your primary content type — Products, Properties, Projects, Events. It has all its own fields (title, description, price, etc.) and optionally a Featured Image field for the primary image used in cards and social sharing.

The companion collection

Named after the parent with a suffix: "Product Photos," "Property Gallery," "Project Images." Standard fields:

• Name — for CMS editor identification (e.g., "Living Room - Main")
• Image — the image file
• Alt Text (Plain Text) — for accessibility and SEO
• Sort Order (Number) — controls display sequence
• Caption (Plain Text) — optional, for galleries that show captions
• Parent Reference (Reference to parent collection) — the link back

The display binding

On the parent's CMS template page in the Webflow Designer, add a Collection List and bind it to the companion collection. Filter it: "Parent Reference equals Current Product" (or whatever your parent is). Sort by Sort Order, ascending. Each item in the list displays its Image field, with Alt Text bound to the image's alt attribute.

This gives you a dynamic gallery that automatically shows exactly the images that belong to each parent item. No hardcoded limits, no field bloat, no Rich Text hacks.

When You Need a Companion Collection

Companion collections are not just for images. The pattern applies anywhere you need a one-to-many relationship with structured data that does not warrant its own standalone page.

Photo galleries

The most common use case. Product galleries, property photos, portfolio project images, event photos, team member headshots beyond the primary image. Any time you need more than one image per CMS item, a companion collection is the answer. Read more about image gallery field patterns.

Document attachments

A "Project Documents" companion collection with fields for Document Name, File (Link to hosted PDF/document), File Type (Option: PDF, DOCX, Spreadsheet), and Project (Reference). This gives each project a structured document library without consuming fields on the parent collection.

Availability calendars

For property management or rental sites, an "Availability Dates" companion collection with Date, Status (Available, Booked, Maintenance), and Property (Reference). Each date entry represents a bookable or blocked date. The property page displays availability from its companion items.

Product variants

A "Product Variants" companion collection with fields for Variant Name (e.g., "Small / Blue"), Price, SKU, Stock Status, Image, and Product (Reference). This separates variant-level data from product-level data without overloading the Products collection with fields for every possible variant attribute.

Testimonials per service

Instead of a single Testimonials collection with a multi-reference to Services (consuming one of your five multi-reference slots), create a "Service Testimonials" companion with Quote, Author, and Service (Reference). Each service page shows its own testimonials. You save a multi-reference field on the Services collection.

Step-by-Step Setup

Here is the complete process for creating a companion collection, using Product Photos as the example.

Step 1: Create the companion collection

In the Webflow CMS panel, create a new collection called "Product Photos." Do not create a template page for it — companion collections do not need their own pages. Uncheck "Create Template Page" if Webflow offers it, or simply never design a template for this collection.

Step 2: Add the fields

Add these fields in order: Image (Image field), Alt Text (Plain Text, required), Sort Order (Number, default 0), Caption (Plain Text, optional), Product (Reference to your Products collection, required). Making the Product reference required prevents orphaned photos — every companion item must link to a parent.

Step 3: Add content

For each product that needs gallery images, create companion items. Name them descriptively: "Running Shoe - Front View," "Running Shoe - Side Profile." Upload the image, write the alt text, set the sort order (10, 20, 30 — leave gaps for easy reordering), and select the parent Product.

Step 4: Display on the parent template

Open your Product template page in the Designer. Add a Collection List element where you want the gallery. Bind it to the "Product Photos" collection. Add a filter: Product (Reference) is "Current Product." Sort by Sort Order, ascending. Limit results to your desired maximum (12 is a reasonable gallery size). Inside each Collection Item, add an Image element bound to the Image field, with Alt Text bound to the Alt Text field.

Step 5: Style the gallery

Apply a CSS Grid or Flexbox layout to the Collection List for your gallery layout. Two-column, three-column, masonry — the companion collection provides the data, your design provides the layout. Consider adding lightbox functionality with an Interaction or third-party script.

Performance Considerations

Companion collections solve a structural problem but introduce performance trade-offs you need to plan for.

CMS item count

Every companion item counts toward your site-wide CMS item limit (2,000 on CMS plan, 10,000 on Business). A product catalog with 200 products and 5 gallery images each adds 1,000 companion items. That is half the CMS plan limit consumed by photos alone. Audit your companion item count regularly and archive unused items.

Nested collection list limits

Webflow limits nested Collection Lists to 5 items by default, with a maximum of 12. If your gallery companion has 20 images per parent, only 12 will display in the nested list. For galleries that might exceed 12, consider a dedicated gallery page (linked from the parent) with a full Collection List filtered by the parent reference.

Page load impact

Each image in a companion collection is a separate HTTP request. A gallery of 10 high-resolution images can significantly impact page load time. Use Webflow's responsive image settings to serve appropriately sized images. Consider lazy loading for images below the fold. Set image dimensions in the Designer to prevent layout shift.

Editor experience

Managing companion items is more work for editors than dragging images into a single field. Each image requires creating a new CMS item, filling in fields, and setting the reference. For content teams that update galleries frequently, this friction adds up. This is where external management tools — where you drag and drop images and the companion items are created automatically — make a real difference.

How Trellis Auto-Generates Companion Collections

The companion collection pattern is well-established but tedious to set up. Creating the collection, adding the fields, configuring the reference, entering the items, binding the nested collection list — it is 30 to 60 minutes of repetitive work per companion collection.

Trellis eliminates this entirely. When your content model includes multi-image data — product galleries, event photos, property images — Trellis automatically creates the companion collection in Webflow with the correct fields and reference architecture.

If you manage your content in Airtable, the experience is seamless. Airtable's Attachment field natively supports multiple files per record. Upload five product photos to the Attachment field in Airtable. Trellis detects them, creates five companion items in the Webflow "Product Photos" collection, uploads the images, sets the alt text, configures the sort order, and links them to the parent product — all automatically.

When you remove an image in Airtable, Trellis removes the companion item. When you reorder them, Trellis updates the sort order. The companion collection stays perfectly in sync with your source data without any manual CMS work. Learn more about this pattern in the companion collections wiki.

Frequently Asked Questions

Can I use multi-reference instead of a companion collection for images?

Technically yes — create a shared "Media Library" collection and multi-reference it from your parent collection. This works for shared assets (the same logo used across multiple pages) but is awkward for item-specific galleries. Gallery images typically belong to one parent. The companion collection with a single reference is cleaner and does not consume one of your five multi-reference slots.

How many companion collections is too many?

Each companion collection uses one of your 20 or 40 collection slots. Three to four companion collections is common (photos, documents, variants). Beyond five, audit whether some can be consolidated. A single "Media" companion with a Type field (Photo, Document, Video) can replace three separate companions.

Do companion items affect Webflow publishing speed?

Yes. Webflow publishes all CMS items when you hit Publish. A site with 5,000 companion items will take longer to publish than one with 500. This is another reason to archive unused companion items rather than letting them accumulate. The publishing delay is proportional to total item count, not page count.

Can I paginate a companion collection gallery?

Not within a nested Collection List — Webflow does not support pagination on nested lists. If you need paginated galleries (more than 12 images), create a separate gallery page with a standard Collection List filtered by the parent reference. This gives you pagination, load-more functionality, and no item limit.

Should the companion collection have its own template page?

Almost never. Companion items are not standalone content — "Product Photo #3" does not need its own URL. Skip the template page entirely. If Webflow requires one, leave it blank and exclude the companion collection from your sitemap.