Use this article to control how product cards look on your collection pages: the image shape, how many cards fit per row on each device, how card content is aligned, the colors used for titles and prices, whether variant selectors appear, and whether shoppers can add to cart without leaving the collection.
To configure any of it, go to Smart Collections → Template & Settings in your Rebuy admin, open the Collection Template Editor, then select Product Display under General Settings in the editor's left navigation.
Everything on this page applies globally to every collection on your store. This article is part of the Smart Collections Template & Settings documentation set — for a general introduction, see Smart Collections: Template & Settings Overview.
What the Product Display page contains
The Product Display page is organized into the settings cards below, in the order they appear. Each has its own section below.
Card | What it controls |
Theme | A link out to the Rebuy theme colors that every color picker in the editor starts from. |
Product Card | Image ratio, second image on hover, and column spacing. |
Call To Action | The Add to Cart button, its text states, and its styling. |
Variant Display | Whether variant selectors appear on product cards. |
Product Column Breakpoints | How many product cards appear per row on mobile, tablet, and desktop. |
Alignment | How content on each product card is aligned. |
Text Styling | The colors used for product titles and prices. |
Change the baseline colors for every color picker
The Theme card at the top of the page links out to the Rebuy theme settings that define the default colors every color picker in the Collection Template Editor starts from. Use the link in the card to open Settings → Themes in your Rebuy admin in a new tab.
Every color picker in the editor inherits your Rebuy theme color rather than a fixed value, and every RESET TO THEME button returns that card's colors to these theme values. So if you want to shift the baseline colors across all of Smart Collections at once instead of card by card, change your Rebuy theme rather than overriding each card here.
Set the product image aspect ratio
Image Ratio sets the aspect ratio of the product image on every collection card. The available ratios appear as selectable tiles:
1:1 — a square image, equal width and height. This is the default.
3:4 — portrait, slightly taller than wide.
9:16 — tall portrait, common for mobile-first imagery.
When you select a different ratio, every product card image container updates to match, and source images that do not match the selected ratio are cropped to fit.
Show a second image when a shopper hovers
Show Second Image on Hover, grouped under the Image Behavior label in the Product Card card, displays a product's second image when a shopper hovers over the product image. Its tooltip reads Displays the product's second image when a shopper hovers over the product image. It is off by default.
How the second image is chosen depends on the product:
If the product has variants, the second image shown matches the currently selected variant.
If the product has no variants, the master product's second image is used.
If the product has no second image at all, hovering changes nothing.
The transition between the two images is a dissolve, and it cannot be customised — there is no setting for transition style, speed, or effect.
Set the spacing between product cards
Column Spacing controls the gap between product cards. It is a dropdown of named options, from tightest to loosest: None, Extra Tight, Tight, Default, Loose, and Extra Loose. Default is selected out of the box. Choose the spacing that matches the visual density of your store's design.
Set how many product cards appear per row on each device
Product Column Breakpoints sets the number of product cards per row separately for each device size. Each device has its own selector with its own range.
Device | Available columns |
Mobile | 1 or 2 |
Tablet | 1 to 4 |
Desktop | 1 to 5 |
Selecting a breakpoint also switches the live preview to that device size, so you can see the result immediately.
Column count is the only Smart Collections layout setting that varies by device. The filter layout itself — Sidebar or Dropdown — applies uniformly to every device size and cannot be mixed.
Align the content on product cards
Alignment controls how the content on each product card is aligned. The options appear as a segmented control: LEFT, CENTER, and RIGHT. The selected alignment applies to product cards on every collection page.
Set product title and price colors
The Text Styling card controls the text colors used on product cards. Each control opens a color picker and inherits your Rebuy theme color:
Title — the color of the product title.
Price — the color of the product price.
Sale Price — the color of the price shown when a product is on sale.
Compare At Price — the color of the original compare-at price displayed alongside a sale price.
Click RESET TO THEME at the bottom of the card to return every color on the card to your Rebuy theme. The button stays greyed out until you set at least one of them, and clicking it returns them all to your theme and greys the button out again.
Text Styling sets colors only. To change the font size or font family of product titles and prices, use custom CSS — see Smart Collections CSS Guide.
Show variant selectors on product cards
The Variant Display card controls whether product variants are surfaced on product cards. These checkboxes sit under the Variant Options label:
Show Variants — displays variant selectors such as color or size on each product card. Its tooltip reads Displays variant selectors (e.g. color, size) on each product card. On by default.
Hide Out of Stock Variants — hides variant options that are unavailable or out of stock, so shoppers only see variants they can actually buy. Its tooltip reads Hides variant options that are unavailable or out of stock from the selector. Off by default.
How Show Variants, Hide Out of Stock Variants, and Add to Cart depend on each other
These settings are linked, because the Add to Cart button needs a variant selector to know which variant to add, and there is nothing to filter when no selector is shown. The editor enforces the relationship for you, changing other checkboxes automatically:
Ticking Show Add to Cart Button automatically ticks Show Variants.
Ticking Hide Out of Stock Variants automatically ticks Show Variants.
Unticking Show Variants automatically unticks both Show Add to Cart Button and Hide Out of Stock Variants.
Turning off Show Variants also removes the Add to Cart button from your product cards, even though that checkbox lives on a different card. If your Add to Cart button disappears unexpectedly, check whether Show Variants was turned off.
Let shoppers add to cart from the collection page
The Call To Action card controls the inline Add to Cart button on every product card, which lets shoppers add a product to their cart straight from the collection page instead of opening the product detail page first.
One setting sits directly on the card:
Show Add to Cart Button — shows or hides the Add to Cart button on all product cards.
To configure the button's text and styling, click the EDIT gear icon on the Call To Action card header. That opens the Call To Action flyout, which holds the Call To Action card for the button text and the Styling card for its appearance.
he Add to Cart button settings used to have their own page in the Collection Template Editor's left navigation. They now live entirely on the Product Display page's Call To Action card. No settings were removed in the move, and any values you configured previously carry over.
Set the Add to Cart button text
The Call To Action card inside the flyout holds the text fields, laid out in two columns, that control the button label as a shopper interacts with it. Each applies to every product in every collection:
Field | When shoppers see it | Default |
Add to Cart Button Text | Before they click | Add to Cart |
Adding to Cart Button Text | While the product is being added | Adding |
Added to Cart Button Text | After the product is added | Added |
Sold Out Button Text | When the product has no available inventory | Sold Out |
None of them can be left empty — clearing one shows the validation message Cannot be empty.
Dynamic translation of these fields is not supported. The labels you enter display as-is to every shopper, regardless of their language or locale.
Style the Add to Cart button
The Styling card inside the Call To Action flyout controls the button's appearance. Its controls, in the order they appear, all inherit your Rebuy theme:
Button Text — a color picker for the button label.
Button Background — a color picker for the button's background.
Button Border Color — a color picker for the button border.
Button Border Width — a slider from 0 to 24 that sets the border thickness.
Button Radius — a slider from 0 to 24 that sets how rounded the corners are; 0 produces square corners.
Click RESET TO THEME at the bottom of the card to return the button to your Rebuy theme. As with the other cards, the button stays greyed out until you set at least one value.
The Styling card has no hover color and no font size. For either of those, use custom CSS — see Smart Collections CSS Guide.
Frequently asked questions
How do I change the Add to Cart button color in Smart Collections?
Go to Smart Collections → Template & Settings, open the Collection Template Editor, select Product Display under General Settings, click the EDIT gear icon on the Call To Action card, and use the Styling card in the flyout. Button Text sets the label color, Button Background sets the fill, and Button Border Color sets the border. The Button Border Width and Button Radius sliders each accept a value from 0 to 24 for border thickness and corner rounding. The colors all inherit your Rebuy theme, and RESET TO THEME returns them to it. You no longer need custom CSS for these properties — only for things with no native control, such as a hover state or a font size.
Why is the RESET TO THEME button greyed out in the Smart Collections editor?
Because nothing in that card has been overridden yet. Every color and slider in the editor starts out inheriting the matching value from your Rebuy theme rather than holding a value of its own, and RESET TO THEME only becomes clickable once at least one value in that specific card has been set. Clicking it returns every value in the card to your Rebuy theme, which means the button greys out again immediately afterwards — that is expected. Each card has its own button, so resetting Text Styling does not affect the Styling cards on the Call To Action flyout, the Pagination page, or the Product Reviews page.
Why did my Add to Cart button disappear from my Smart Collections pages?
The most likely cause is that Show Variants was turned off on the Variant Display card. The Add to Cart button needs a variant selector to know which variant to add, so unticking Show Variants automatically unticks Show Add to Cart Button as well — and it also unticks Hide Out of Stock Variants. Tick Show Variants back on, then tick Show Add to Cart Button on the Call To Action card. Both are on the Product Display page.
How do I hide the Add to Cart button on my Smart Collections pages?
Go to Smart Collections → Template & Settings, open the Collection Template Editor, select Product Display under General Settings, find the Call To Action card, and untick Show Add to Cart Button. Shoppers then open the product detail page to add a product to their cart. This is the setting to use if your catalogue relies on a pre-order app, or any other app that needs to own the add-to-cart action on the product page.
Can I use a different number of product columns on mobile than on desktop in Smart Collections?
Yes. Product Column Breakpoints on the Product Display page sets the number of product cards per row separately for each device size: 1 or 2 on mobile, 1 to 4 on tablet, and 1 to 5 on desktop, defaulting to 1, 2, and 4 respectively. Column count is the only Smart Collections layout setting that varies by device — the filter layout itself, Sidebar or Dropdown, applies uniformly to every device size and cannot be mixed.