View by card styles

The View by buttons above a collection grid let shoppers choose how many products show per row, for example 4, 6 or 8. Each button also switches the view profile: which details the cards show, how they are aligned and how far apart they sit. A large view can show the title, price and swatches, and a dense view only the images.

All of this is set in the View by card styles block of the Collection product grid section. This article explains how buttons and profiles relate, then how to set them up.

How View by works

Views and view profiles

A view is one of the View by buttons: a number of products per row. A view profile is the set of card settings that view uses: which details each card shows (title, price, vendor, swatches, badges, quick view), how the card text is aligned, and the gap between cards.

The block has three profiles. Each button uses the profile with the same position: the first button uses View profile 1, the second View profile 2, the third View profile 3. So when a shopper clicks a button, two things change at once: the number of columns and the profile. That is what lets a big view show full product details while a dense view shows images only.

Phone buttons always mean 1, 2 and 3 columns, whatever counts you set for desktop. The profiles are shared: View profile 2 sets up both the second desktop button and the 2-column phone view. Keep that in mind when you choose what a profile shows.

What a profile controls, and what it doesn't

On the collection page every card is built with all its parts: vendor, title, price, swatches, badges and the quick view button. The profile of the current view then decides which parts show. This means the show/hide switches in Theme settings > Product card (Show product title, Show price, Show vendor, Show variant options, Show badges, Enable quick view) don't apply to the collection grid; the View profiles do. Those theme settings still apply to product cards in other sections.

Variant style: Hover reveal or Always show

Under the title, the card has one row for the price and the swatches.

• Hover reveal: the row shows the price. When the shopper points at the card (or reaches it with the keyboard), the row slides up and the swatches take the price's place. The card stays compact and calm until someone shows interest.
• Always show: the price and the swatches sit side by side on the row, price on the left, swatches on the right. With many colors, the swatches scroll sideways. Phones have no hover, so use Always show in a profile used on phones if shoppers should see the colors without tapping.

If only one of the two is on (price or swatches), there is nothing to swap: that one simply shows.

Variant overlap display

With it on, the swatches overlap each other in a tight stack and spread apart when the shopper points at them. With it off, they are always spaced apart. The stack saves room in small cards.

Image-only views

Turn off Show product title, Show price, Show vendor and Show variant options in a profile and the text area under the image is removed completely, so the images sit edge to edge (with a grid gap of 0). Turn off Show badges and Enable quick view too for a clean lookbook wall. Every image still links to its product.

Set it up

Step 1: Open the block

1. In the theme editor, use the page picker to choose Collections > Default collection.
2. Click Collection product grid, then the View by card styles block below it.
3. If the section has no such block, click Add block under the section and choose View by card styles. A section has one. Without it, the grid still shows View by 3 / 4 with every detail on in both views.

Step 2: Choose the buttons

1. Scroll to the bottom of the block. Under Desktop, open Columns (desktop) (1) and pick a pair: 2 / 3, 3 / 4, 4 / 5, 5 / 6 or 6 / 7. These give two buttons, so profiles 1 and 2 are used.
2. For other counts, or for three buttons, choose Custom. Two settings appear at the top of the block: set Number of views to 2 or 3, then type the counts in Custom view by options (1) with slashes, for example 3/5, 2/5 or 4/6/8. Each count is a number of columns from 1 to 8.
3. Put the counts in the order you want the profiles: the first count opens the page and uses View profile 1. View profile 3 only appears in the block when Number of views is 3.

Step 3: Set up View profile 1 (the first button, and 1 column on phones)

1. Turn on the details shoppers need when they first see the grid: usually Show product title, Show price and Show badges.
2. Turn on Show variant options for swatches, and choose the Variant style: Hover reveal (price swaps for swatches on hover) or Always show (both on one row).
3. Keep Variant overlap display on for a tight stack of swatches, or turn it off to space them out.
4. Turn on Enable quick add to add the quick add button on the image.
5. Choose the Content alignment and the Grid gap (desktop). Product card setting, the default for new views, follows the product cards' desktop and mobile alignment.

Step 4: Set up View profile 2 (the second button, and 2 columns on phones)

1. Cards are smaller here, so show less: for example title and price, swatches on Hover reveal, no vendor.
2. Remember that phones open on 2 columns, so this profile is what most phone shoppers see first.

Step 5: Set up View profile 3 (the third button, and 3 columns on phones)

1. Only with three views. This is the densest view: turn off every detail and set the gap to 0 for an image-only wall, or keep just the price.

Step 6: Set the gaps for phones

1. Turn on Customize for mobile to show Grid gap (mobile) in each profile, and set the space between cards on phones.

Step 7: Animate the change (optional)

1. Turn on Animate grid view changes to replay the cards' reveal animation when a shopper switches views. With it off, the grid changes at once.

Step 8: Check every view

1. Open a collection on the storefront and click each View by button. Check the details and the gaps.
2. Point at a card with swatches to check the Hover reveal.
3. Switch the editor preview to mobile and try 1, 2 and 3.

Example: the Radian demo (4 / 6 / 8)

On phones the same profiles give: 1 column with full details, 2 columns with full details (the page opens here), and 3 columns of images only.

Ideas for your store

Settings reference

How it works

• A shopper's choice is saved in their browser, separately for desktop and phone, so the collection opens in the view they picked last time. When you change the options in the block, everyone starts again on the first count.
• In Custom, counts outside 1 to 8 and repeated counts are skipped, and only as many counts as Number of views are read. With fewer than two usable counts, the buttons fall back to 3 / 4.
• Filtering, sorting, Load more and infinite scroll keep the chosen view: products that load later use the same profile.
• View by is part of the collection page only. The search results page and product sections use their own card settings.

Troubleshooting

I turned off Show vendor in Theme settings, but it still shows on the collection page.

On the collection grid, the View profiles decide what cards show. Turn off Show vendor in each View profile.

The View by buttons don't show on a tablet.

That is by design: between 768px and 1023px wide, the grid uses the desktop view without buttons. If the first count is large, such as 6, tablets show six columns: put a smaller count first.

The page opens in a different view than I set.

Your browser remembers the view you clicked last. Open the collection in a private window to see what a new shopper gets.

My phone shows titles in 3 columns, but I set images only for 8 columns.

Phone column 3 uses View profile 3, and desktop 8 uses it too only when 8 is your third count. Check the order of your counts.

My custom options show 3 / 4 instead.

Use numbers from 1 to 8 with slashes, such as 3/5, with at least two different numbers, and set Number of views to match.

Related

• Collection product grid
• Product cards
• Variants and swatches
• Quick add and quick view