Use this article to control how each product looks in your Smart Search results — image shape, spacing, how many products sit in a row on each device, text alignment and colors, variant selectors, and the Add to Cart button. The Product Display settings in the Smart Search Results Page editor apply across mobile, tablet, and desktop, and each device type can be adjusted individually. To configure them, go to Smart Search → Results Page in your Rebuy admin to open the Configure Results Page editor, then select Product Display from the editor's left navigation. This article is part of the Smart Search Results Page documentation set — for a general introduction, see Smart Search Results Page: Overview.
Change the product image shape (image ratio)
The Image Aspect Ratio setting controls the shape of the product images shown in your Smart Search results. You can choose from three ratios:
1:1 — the default square ratio.
3:4 — a slightly rectangular ratio with more height.
9:16 — a taller, portrait-style ratio.
Adjust the space between product columns
The Column Spacing setting adjusts the amount of space between product columns in your Smart Search results. Use the slider to choose from six preset spacing options:
None
Extra Tight
Tight
Default
Loose
Extra Loose
Show a second product image when a shopper hovers
Show Second Image on Hover displays a product's second image when a shopper hovers over the product image in your Smart Search results. You will find it under Results Page > Product Display > Product Card: Image Behavior in the Results Page editor. It is disabled by default and must be enabled separately in each editor.
When Show Second Image on Hover is enabled, hovering over a product image in the search results dissolves the original image into the product's second image. The behavior is variant-aware: if a product has variants, the second image shown matches the currently selected variant. For example, if a shopper has selected the grey shirt variant, the second image displayed is the grey shirt's second image. If a product has no variants, the master product's second image is used. If a product has no second image at all, nothing changes on hover and the original image stays in place.
The dissolve transition is fixed and cannot be customized at this time. Additional transition options may be added in a future release.
Set how many products appear per row on each device
The Product Column Breakpoints settings control how many product columns your Smart Search results display on each device type — mobile, tablet, and desktop — so you can optimize the layout for each screen size. Adjust each device type individually. The following table lists the available range and the default for each device type:
Device | Columns per row (range) |
Mobile | 1–2 |
Tablet | 1–4 |
Desktop | 1–5 |
Align the product card text
The Alignment setting controls how the product card text is aligned on the Smart Search Results Page. You can choose from the following options:
Left — aligns text to the left side of the product card.
Center — aligns text to the center of the product card. This is the default.
Right — aligns text to the right side of the product card.
Change the product title and price colors
The Text Styling settings let you customize the colors of the text shown on each product card in your Smart Search results. You can set a color for each of the following details:
Title — the color of the product title.
Price — the color of the regular product price.
Sale Price — the color of discounted product prices.
Compare at Price — the color of the original price shown when a product is on sale.
To style product cards beyond these color settings, add your own CSS in the Results Page editor's Custom CSS block. For ready-made selectors and styling examples, see CSS Styling Tricks for Customizing Smart Search.
Show or hide variant selectors on product cards
The Variant Display settings control whether variant selectors appear on product cards in your Smart Search results and whether out-of-stock variant options are hidden from those selectors. These settings live inside the Product Display panel in the Results Page editor. The two available options are described below:
Setting | What it does |
Show Variants | Displays variant selectors (for example, color or size) on each product card. Enabled by default. |
Hide Out of Stock Variants | Hides variant options that are unavailable or out of stock from the variant selector. Disabled by default. Requires Show Variants to be enabled. |
The two settings are dependent on each other: if Show Variants is disabled and you enable Hide Out of Stock Variants, Show Variants turns on automatically.
Variant availability is determined at the time of the search query. If inventory changes in real time, there may be a brief window where the variant selector and actual stock levels do not align.
Add an Add to Cart button to product cards (Call to Action)
The Call to Action settings control the Add to Cart (ATC) button shown on product cards in your Smart Search results — whether the button appears, the text it displays in each state, and its styling — so it matches your brand and storefront design. You find them on the Call To Action screen in the Results Page editor's left navigation, which is a separate screen from Product Display. The Add to Cart Button toggle turns the ATC button on or off; it is disabled by default on the Results Page. To customize the button's text and styling, click EDIT on the Call To Action screen to open the side panel.
Change the Add to Cart button text
The Add to Cart button text fields let you customize the label the button displays in each of its states, from before a product is added through to when it is sold out. Each field, its default text, and what it controls are listed in the following table:
Field | Default text | What it controls |
Add to Cart Button Text | Add to Cart | The label shown on the button before a shopper adds the product. |
Adding to Cart Button Text | Adding... | The label shown while the product is being added to the cart. |
Added to Cart Button Text | Added | The label shown after the product has been added to the cart. |
Sold Out Button Text | Sold Out | The label shown when the product is out of stock and cannot be added. |
Style the Add to Cart button to match your brand
The styling options let you match the Add to Cart button to your storefront design. The following styling options are available:
Button Text — sets the color of the button's label text.
Button Background — sets the button's background color.
Button Border Color — sets the color of the button border.
Button Border Width — adjusts the thickness of the button border. The slider ranges from 0 to 24 pixels.
Button Radius — adjusts the roundness of the button corners. The slider ranges from 0 to 24 pixels; a higher value produces more rounded corners.
To revert all Call to Action styling back to your theme's defaults, click Reset to Theme.
Note: Your Rebuy theme may allow larger border-width and radius values, but these Add to Cart styling settings in Smart Search are limited to a maximum of 24 pixels.
To style the Add to Cart button beyond these settings, add your own CSS in the Results Page editor's Custom CSS block. For ready-made selectors and styling examples, see CSS Styling Tricks for Customizing Smart Search.