The product grid is your search results page, showing the collection. Its cards, badges, review stars, colors and CSS come from your search design, so the grid always looks like your search and changes with it. Shopify keeps deciding which products are in the collection, and provides the filters, sort options and paging. You decide the banners between the rows, the layout and what returning shoppers get.
Open the grid settings
- Open your template under Live on your store → Collection pages, on the Design tab.
- Click the product grid in the canvas to select it.
- Click Settings in the toolbar. The Product grid panel opens with four tabs: Design, Personalize, Banners and Layout.
Changes show in the canvas straight away and save automatically.
Design: the look of your search
Under Search design, choose whose look the grid takes:
- Your store's search, the default, follows the search design your store's search runs on. If you ever switch your store to another search design, the grid follows.
- Any other search design by name, to style the grid like that one.
To change cards, quick add, badges, review stars, image hover or colors, click Edit under the picker. That opens the search design itself. What you change there reaches your live collection pages right away, without republishing. If your store has no search running yet, the grid uses the default design until you pick one.
Want one page to look different from search? Click Edit page CSS under Only on this page. That CSS applies on top of the search design, to the grid too, and only on this template. To change the grid on every collection page but not in search, add the CSS to your search design and start the rule with .sb-panel--collection.
Cards on this page
Under Cards on this page, each card option follows your search design until you give this page its own value: Quick add, Variant swatches, Image hover, Badges (hidden on this page) and Prices (with or without VAT, when your search design has a VAT rate). The first choice, “Same as search”, shows what your search design has now and follows it again when you pick it. Nothing is copied, so a page that follows search keeps up with every change you make there.
Badges on this page only
Add badges that only this page shows with Add badge under Badges on this page only. They work like the badges in your search design: a sale badge from a minimum discount, a tag badge for products with certain tags, or a sold out badge. They show after your search design's badges. To show only this page's badges, set Badges to Hidden on this page. Page badges reach your store when you publish or republish.
Personalize
The Personalize tab has the switches for returning shoppers: the “For you” row above the grid, personalized badges, continuing where they left off and suggested filters. See Personalize collection pages.
Banners between the rows
Banners look like the quiz cards in your search results and open a quiz. They work well right where shoppers start scrolling through too many options.
- On the Banners tab, click Add banner. It starts with ready-made copy.
- Edit the Heading, Subheading and Button text.
- Choose the Linked quiz. The banner opens this quiz.
- Pick a Placement. Full-width row takes a whole row of the grid. Single card takes the place of one product and pushes the rest along.
- Set Rows above for a full-width banner, or Products before for a single card.
- Optionally add a Background image and set the Background and Text color. Left empty, the banner uses your search design's accent color.
Click a banner in the canvas to jump straight to it. Banners show on the first page of the collection only. On a collection with fewer products, a banner moves up to sit after the last product. A banner without a linked quiz stays visible in the canvas, faded, but is hidden on your store.
In a store with more than one language or market, Where decides who sees a banner. Translate the texts of a banner for every language under Translations. They reach your store when you publish again. Until a banner is translated into a language, shoppers in that language don't see it, and a banner only shows where its quiz is translated too. Use the language picker on the Preview step to check. A banner for one language is written in that language and shows in every market that speaks it. A market's own banner shows only in that market.
Layout
- Products per page: how many products show before the page links to the next one. The default is 24.
- Show filters: the filters you set up in the Shopify Search & Discovery app, in the same sidebar as your search results. On phones they open from a Filter button. A collection without filters in Search & Discovery shows none.
- Show sorting: lets shoppers sort with the sort options Shopify offers, such as price or best selling.
Smart order
Out of the box, products keep the order you set for the collection in Shopify. Switch on Smart order to let bluebarry order the collections of this page by how their products do in your store:
- Products shoppers view, add to their cart and buy come first. Recent activity counts more than older activity.
- Sold-out products move behind the available ones.
- New products get a fair place in the middle until they have data of their own, instead of starting at the bottom.
bluebarry writes the order into Shopify, so every page of the collection follows it, and shoppers can still pick another sort. It takes effect on a published page as soon as you switch it on, and is refreshed daily. While it is on, the collections use manual sort in Shopify. Turning it off, unpublishing or deleting the page, or removing a collection from it gives the collection its own sort back, and a hand-sorted collection its own order. The panel shows when the order was last updated, and a message per collection if Shopify refused it.
Good to know
- Quick add uses the same cart connection as your quizzes and search, so your theme's cart count updates without a page reload.
- Grid settings are part of the template. Every collection that uses it gets the same layout, with its own products.
- Banner, layout and personalization changes reach the store when you publish or republish. See Assign and publish a collection page.