Formula comparison

A comparison built from product pickers has one problem on a product template: the template is shared. Pick three serums in the blocks and every product page in your store shows those same three serums — including the pages of the serums themselves.

So the section reads its columns from one of two places, set by Column products under Comparison columns.

Mode	What fills the columns	Where to use it
Product picked in each formula block (default)	The products you picked, the same on every page	Home page, a collection page, a dedicated comparison page
Product being viewed, plus the customer’s choice	The product on the page, then products the customer picks	Product templates

The second mode does two things at once: it puts the product being viewed in the first column automatically, and it lets the customer choose what to compare it against from a dropdown on each of the other columns.

It needs a product on the page. On a home page there is nothing being viewed, so the section falls back to your formula blocks and the theme editor tells you so.

The full walkthrough

Step 1 — switch the source

On your product template, open the section and set Column products to Product being viewed, plus the customer’s choice.

The formula blocks stop being used at this point. They are not deleted — switching back restores them — but hiding or reordering them changes nothing while this mode is on, and the editor says as much.

Step 2 — choose what customers compare within

Collection customers compare within sets the pool the dropdowns offer.

Pick the collection that holds comparable products — your serums, your moisturizers. Leave it blank and the section uses the smallest collection the product belongs to, on the reasoning that the smallest is usually the most specific: better to compare within “Vitamin C serums” than within “All products” or “Sale”.

Leave Compare only products of the same type on to keep a comparison to one kind of product. It reads Shopify’s Product type field, and is ignored on a product that has none — so if your comparison is offering unrelated products, that field is usually empty in admin.

Step 3 — give every row a source

This is the step that catches people out. A product the customer swaps in has no block to type a value into, so every row you want visible needs a Value source under Comparison rows.

Rows left on Manual value are hidden in this mode. They are not shown as empty — an empty comparison row is worse than no row — and the editor lists exactly which rows dropped and why.

See Per-product content for how value sources work and which attributes exist.

Step 4 — size the comparison

Setting	What it does
Columns to compare	How many columns sit beside the product being viewed. 1–3.
Products customers can choose from	How long each dropdown list is. 2–8.
Current product label	The wording on the first column’s chip. Blank hides it.

Two columns is the practical maximum on a desktop. The row-label column plus the product being viewed plus three more needs about 1140px, so three columns is permanently scrolled sideways at normal page widths.

What the customer sees

The first column is the product they are already looking at, marked with the label from Current product label and given a quiet ring so it reads as theirs.

Every other column carries a dropdown naming the product in it. Opening it lists the pool, where:

• the column’s own product is ticked
• a product already shown in another column is greyed out with a dash, because two columns showing the same product is not a comparison
• choosing one swaps that column, and only that column

Nothing reloads. Every choice is rendered with the page and swapped in place, so the comparison changes instantly and no images are fetched until a choice is actually made.

What renders in each situation

The situation	What a customer sees
The collection has plenty of products	The full comparison, with dropdowns
The collection has fewer products than Columns to compare	Fewer columns, and the editor says how many it found
The collection has nothing to compare against	Nothing — the section is hidden
The product being viewed has no collection	Falls back to the smallest collection it belongs to; hidden if there is none
The section sits where no product is being viewed	Your formula blocks, as normal
A row has no value source	That row is hidden, in every column

A product with nothing comparable hides the section rather than showing a one-column table. Every one of these states explains itself in the theme editor — if the section looks short or empty while editing, read the note under it.

How the choices are ordered

The dropdown offers the first products in the collection’s own sort order, skipping the product being viewed and anything filtered out by product type.

That means the collection’s sort order in Shopify admin is the ranking. There is no relevance scoring. If you want a particular product to be the default comparison, sort that collection manually and put it first.

Two things it deliberately does not do: it does not exclude sold-out products, because a comparison is still informative for something out of stock, and it does not narrow by tag or price.

Keeping the cards aligned

Rows only read as a comparison when they line up across the columns, so the section holds the media and the titles to a fixed shape:

• Image ratio — Portrait, Square, or Landscape — applies at every screen size, so every column’s image occupies identical space. Square keeps cards shortest on a phone, where the comparison becomes a swipeable deck one card at a time.
• Two lines are always reserved for a product title, so a short name and a long one do not offset the rows beneath them. Titles are never truncated, so a name long enough to need three lines will still push its own column down.

Using it well

• Two columns beside the product, not three. A comparison a customer cannot see at once does not help them decide.
• Point every row at an attribute before switching modes. Otherwise the comparison arrives three rows shorter than you designed it.
• Keep the choice list short. Every option is prepared with the page, so eight choices is more page weight than four for a list most customers never open.
• Set Product type on your products. It is what keeps a wax out of a serum comparison.
• Test on two products — one in the collection with attributes filled in, and one with nothing. The second is how you confirm the section hides itself instead of showing an empty table.

When a column shows dashes

Work down this list:

1. The product has no category. Value sources read category attributes, and those do not exist until the product has a category. This is the cause most of the time.
2. The attribute is empty on that product. Assigning a category creates the field; it does not fill it in.
3. The row is still on Manual value. In this mode that row is hidden rather than filled.
4. The category does not carry that attribute. A cleanser category will not offer SPF level.
5. You are looking at a product outside the collection. The comparison is built from the collection pool, and the product being viewed is always the first column regardless.

The fastest check is the product in Shopify admin. If the value is blank there, the theme has nothing to show.