The Product Display settings in the Smart Search Quick View editor control how products appear in your Quick View results across mobile, tablet, and desktop. 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.
Product card layout
The Product Card Layout setting controls how each product's image and text are arranged on the card. You can choose between a Vertical (stacked) layout or a Horizontal layout.
Image ratio
The Image Ratio setting controls the shape of the product images shown on the card. 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 second image on hover
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.
Column spacing
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 to Cart button (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.
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. |
Add to Cart button styling
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, in pixels.
Button Radius — adjusts the roundness of the button corners, in 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.
Variant display
The Variant Display settings control whether variant selectors appear on product cards and whether out-of-stock variant options are hidden from those selectors. These settings live inside the Product Display panel in the Quick View 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.
Column breakpoints
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.
Number of products displayed
The Number of Products Displayed setting sets how many products Quick View shows at once. You can display up to 15 products.
Alignment
The Alignment setting controls how the product card text is aligned in 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.
Text styling
The Text Styling settings let you customize the colors of the text shown on each product card. 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.
