Pills vs Image Cards: Choosing the Right Collection Navigation Layout in Shopify

When adding sub-collection navigation to a Shopify collection page using Collection Paths, one design choice appears immediately. Should the navigation links appear as simple text pills or as larger image cards?

Both layouts solve the same problem. They help customers move between related collections without returning to the main menu or relying on filters. The difference is how the options are presented.

Text pills focus on quick scanning and minimal space. Image cards focus on visual recognition and style. Choosing the right layout depends on how customers make decisions within a category.

Quick Answer

What Are Navigation Pills?

Navigation pills are compact text links that appear above the product grid on a collection page.

Each pill links to another collection, allowing customers to move quickly between related categories without leaving the browsing context.

For example, a jeans collection might display navigation such as:

In this case the label itself communicates the difference between the categories. Customers can scan the options quickly and select the one they want.

Because pills take up very little vertical space, they allow navigation to remain visible without pushing the product grid further down the page.

When Pills Work Best

Text pills work best when the category name clearly explains the difference between product groups. Examples include:

In these situations the customer is making a factual choice rather than reacting to visual style. The label alone is enough information.

Pills are also useful when a collection contains many related sub-categories. Because they are compact, several links can appear in a single row without taking up much screen space.

What Are Image Cards?

Image cards combine a collection image with a category label.

Each card represents a collection and links directly to that collection page.

In Collection Paths, image cards typically display the collection image alongside the collection name, creating a more visual navigation element.

Because image cards are larger than pills, they place more emphasis on the visual identity of each category.

When Image Cards Work Best

Image cards are useful when the sub-category represents a visual style or mood rather than a clearly defined attribute. Examples include:

In these situations an image helps communicate the difference between categories more quickly than text alone.

Stores with strong product photography often benefit from image cards because the imagery itself helps guide the browsing experience.

Comparing the Two Layouts

Both layouts help customers move between related collections without relying entirely on menus or filters.

Mixing Layouts Within the Same Store

Many stores use both layouts depending on the category.

For example, a jeans collection may use pills to display fit types such as Slim or Relaxed, where the label communicates the difference clearly.

A dresses collection may use image cards because the customer often responds to the visual style of the category.

In Collection Paths, the navigation layout is configured per collection. This allows stores to choose the layout that best fits how customers browse that particular category.

Do Shapes Make a Difference?

Navigation elements often include options for rounded or square styling.

Text pills may appear with rounded corners or square edges. Image cards may be circular or rectangular depending on the design.

In most cases this decision is primarily visual rather than functional. The shape should match the design language of the store's theme so that the navigation feels consistent with the rest of the page.

Consistency across the store usually matters more than the specific shape used.

A Simple Way to Choose

When deciding between pills and image cards, it helps to think about how customers recognise the difference between categories.

If the name alone explains the difference clearly, text pills are often the simplest and most efficient option.

If customers benefit from seeing the category before clicking, image cards can provide a clearer browsing experience.

Many stores start with pills because they are compact and easy to scan, then introduce image cards in categories where visual context improves navigation.

Final Thoughts

Sub-collection navigation helps customers move between related categories without leaving the collection page.

Choosing between pills and image cards is less about design preference and more about how customers make decisions within a category.

When the label is enough, pills keep navigation simple and efficient. When the category relies on visual recognition, image cards can help customers understand the options more quickly.

In Collection Paths, both layouts are available so that stores can choose the navigation style that best fits each collection.