Use this article to control how each product looks in your Smart Search Quick View results — card layout, 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 Quick View editor apply across mobile, tablet, and desktop, and each device type can be adjusted individually. This article is part of the Smart Search Quick View documentation set — for a general introduction, see Smart Search Quick View: Overview.
Choose a vertical or horizontal product card
The Product Card Layout setting controls how each product's image and text are arranged on the card in Smart Search Quick View. You can choose between a Vertical (stacked) layout or a Horizontal layout.
Change the product image shape (image ratio)
The Image Ratio setting controls the shape of the product images shown on the card in Smart Search Quick View. 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.
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 Quick View results. You will find it under Quick View > Product Display > Product Card: Image Behavior in the Quick View 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 Quick View 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.
Adjust the space between product columns
The Column Spacing setting adjusts the space between product columns in Quick View. Use the dropdown to choose from six preset spacing options:
None
Extra Tight
Tight
Default
Loose
Extra Loose
Add an Add to Cart button to product cards (Call to Action)
The Call to Action section in Product Display controls the Add to Cart (ATC) button shown on product cards in Quick View — whether the button appears, the text it displays in each state, and its styling — so it matches your brand and storefront design. The Product Display panel includes a Show Add to Cart Button checkbox that turns the ATC button on or off for your product cards; it is enabled by default. To customize the button's text and styling, click EDIT in the Call to Action section 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 Quick View editor's Custom CSS block. For ready-made selectors and styling examples, see CSS Styling Tricks for Customizing Smart Search.
Show and style variant selectors on product cards
The Variant Display section controls whether shoppers can pick a product variant straight from a card in Smart Search Quick View, and what that picker looks like. To find it, go to Smart Search > Quick View in your Rebuy admin to open the Quick View editor, then select Product Display from the editor's left navigation. Its controls sit under the Variant Options label.
These checkboxes control whether variant selectors appear at all:
Show Variants — displays variant selectors such as color or 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. Off by default.
The two are linked: ticking Hide Out of Stock Variants turns Show Variants on automatically, since there is nothing to filter without a selector.
The settings beneath them control what that selector looks like:
Setting | What it does | Options | Default |
Hide Specific Variants | Excludes a variant type from the product card selector | A multi-select list of your store's variant options, such as amount, color, or size | None selected |
Selector Type | Controls whether variants display as buttons or as a dropdown | Buttons / Dropdown | Dropdown |
Selector Shape | Controls the shape of the variant buttons when Buttons is selected | Circle / Square | Square |
Number of Selectors Shown | Sets how many variant options display before the rest group under a "+X" label | 1–10, All | All |
Hide Specific Variants, Selector Type, Selector Shape, and Number of Selectors Shown are available in Smart Search Quick View only. The Smart Search Results Page editor has Show Variants and Hide Out of Stock Variants but does not include them, so you cannot currently apply button swatches or a selector cap to your Results Page results.
Every setting in the table above requires Show Variants to be enabled — untick it and they all gray out. Selector Shape and Number of Selectors Shown apply to the Buttons selector type only: while Selector Type is set to Dropdown, Selector Shape is locked to Square and Number of Selectors Shown is locked to All.
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.
Hide a specific variant type from product cards
Hide Specific Variants removes an entire variant type — amount, color, size, and so on — from the variant selectors on your Quick View product cards, while leaving your other variant types selectable. Click the Select Variant to Hide dropdown and tick each variant type you want to exclude; the list holds your store's own variant options and you can select more than one. Nothing is selected by default.
Show variants as buttons or as a dropdown
Selector Type sets how shoppers pick a variant on a Quick View product card, and it defaults to Dropdown — so button swatches are something you turn on. Its tooltip reads Displays variant options as buttons or a dropdown. Buttons show the variant's image or swatch color when available, or the variant name as text if not.
With Buttons selected, each variant option renders as its own clickable button. A button shows a 30 x 30 pixel swatch when the variant has its own image in Shopify or a matching color swatch image in your theme, and falls back to the variant name as text — 6 oz or M — when neither exists. Text buttons are wider, with room for longer labels such as XL or 12.5. Use Selector Shape to render buttons as a Circle or a Square. Selecting a variant that has its own image also updates the product image on the card.
Theme color swatch images work the same way in Quick View as they do in Rebuy's merchandising widgets. For the option naming rules and the assets/ folder setup, see How to Set Up Widget Variant Image Buttons (Color Swatches) in Rebuy.
(Screenshot above: Smart Search Quick View variant selector type set to DROPDOWN.)
(Screenshot above: Smart Search Quick View variant selector type set to BUTTONS with variant color image "swatches" configured.)
Limit how many variant options a card shows
Number of Selectors Shown caps how many variant options appear on a product card before the rest collapse behind a "+X" label, which keeps cards tidy for products that carry a lot of colors or sizes. Choose any number from 1 to 10, or All, which is the default and applies no cap.
When a product has more variant options than your setting, the card displays that many options and adds a "+X" label beneath them, where X is the number still hidden. With the setting at 3 and a product carrying 8 colors, the card shows 3 swatches followed by +5. Clicking "+X" reveals the hidden options inline and removes the label, wrapping onto a new row so the selector never extends past the card's width. Products with fewer options than your setting — or exactly as many — show every option with no "+X".
Out-of-stock variants are either fully shown or fully hidden. Every variant displays and stays clickable unless Hide Out of Stock Variants is enabled, which removes out-of-stock variants from the selector entirely. Showing them in a grayed-out or disabled state is not supported at this time.
Set how many products appear per row on each device
Column Breakpoints control how many product columns Quick View displays on each device type — mobile, tablet, and desktop — so you can optimize the layout for each screen size. Adjust each device type individually.
The maximum number of products per row depends on the device and the product card layout you are using. The following table shows the maximum columns per row for each combination:
Device | Vertical card (max per row) | Horizontal card (max per row) |
Mobile | 2 | 1 |
Tablet | 4 | 3 |
Desktop | 5 | 3 |
Note: When the Side Search layout is active, the available column options are reduced for all device sizes. Disabled breakpoints are grayed out and cannot be selected while Side Search is active. Switching to a different layout restores the full breakpoint range.
Set how many products Quick View shows
The Number of Products Displayed setting sets how many products Smart Search Quick View shows at once. You can display up to 15 products.
Align the product card text
The Alignment setting controls how the product card text is aligned in Smart Search Quick View. 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 Smart Search Quick View. 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 Quick View editor's Custom CSS block. For ready-made selectors and styling examples, see CSS Styling Tricks for Customizing Smart Search.
Frequently asked questions
Why can't I make the Add to Cart button corners more rounded in Quick View?
The Button Radius slider for the Smart Search Quick View Add to Cart button is capped at 24 pixels, so 24 px is the most rounded the corners can be from the Product Display settings. The Button Border Width slider has the same 0–24 pixel range. Your Rebuy theme may allow larger values elsewhere, but these Smart Search styling sliders are limited to 24 pixels. To go beyond that, add your own CSS in the Quick View editor's Custom CSS block — see CSS Styling Tricks for Customizing Smart Search.
Why are some column breakpoint options grayed out in Quick View?
Column breakpoint options are grayed out when the Side Search layout is active. Side Search gives Quick View less horizontal room, so the higher column counts are disabled on every device size — see "Column breakpoint limits when Side Search is active" above for exactly which counts remain selectable. This is expected behavior, not a bug. Switching Quick View back to the dropdown layout restores the full breakpoint range.
Why do my Quick View variant buttons show text instead of color swatches?
Quick View variant buttons display an image only when your product data supplies one, and fall back to the variant name as text — 6 oz or M, for example — when it does not. A button shows a swatch when the variant has its own image in Shopify, or when a matching color swatch image exists in your theme following the naming rules in How to Set Up Widget Variant Image Buttons (Color Swatches) in Rebuy. Also check Selector Type, since variant buttons appear only when it is set to Buttons and it defaults to Dropdown.
Why are out-of-stock variants still showing in Quick View?
Out-of-stock variants keep appearing in Smart Search Quick View either because Hide Out of Stock Variants is not doing what you expect, or because Rebuy does not consider those variants out of stock in the first place. Work through these in order:
Confirm the setting is enabled. Hide Out of Stock Variants is off by default, so out-of-stock variants display until you turn it on. Go to Smart Search > Quick View > Product Display and tick it under Variant Options.
Confirm you enabled it in the right editor. Quick View, the Results Page, and Smart Collections each have their own Product Display settings. Enabling Hide Out of Stock Variants in one does not enable it in the others.
Check the variant's inventory settings in Shopify. A variant set to continue selling when it is out of stock still reports as available, so Rebuy treats it as in stock and displays it. Change that setting in Shopify if you want the variant hidden.
Resync your product data. Smart Search serves results from indexed product data, so a variant that recently sold out can keep appearing until the index catches up. Run a sync from Sync Manager in your Smart Search global settings — see How to Set Up Smart Search Global Settings in Rebuy.
Allow for search-timing. Variant availability is determined at the moment of the search query. A variant that sells out while a shopper is mid-session can stay visible in results already on screen until they search again.