Product cards
Product cards show products in collections, search results and product sections. Their default look comes from Theme settings > Product card. Sections with products can keep these global settings or turn off Use global settings to style their own cards.
How to set it up
Step 1: Style the card
- Go to Theme settings > Product card.
- Under Product grid cards, set the Corner radius, Product card thumbnail ratio (1) and Image fit.
- Pick a Hover effect (2): Instant, Fade image, Soft zoom, Curtain reveal or Media gallery (swipe through images with an indicator).
- Turn on Autoplay video to play a muted video when it is the product's first media.
Step 2: Choose what the card shows
- Title (with a line limit and equal height), price, vendor and badges.
- Show variant options: swatches or option buttons on the card, shown on hover or always.
- Savings as an amount or a percent.
Step 3: Set up quick view
- Turn on Enable quick view and choose the Mobile quick view behavior: always show the button, open quick view on card tap, or reveal the button on the first tap.
Step 4: Turn on the grid cursor (optional)
- Under Product grid cursor, turn on a custom cursor that follows the mouse over product grids, with your own label and colors.
Step 5: Set up 3D models
- Under 3D product media, Radian shows 3D models with its own viewer: background, grid, exposure, shadow and viewpoint controls. Turn on Use native presentation to use Shopify's default viewer instead.
Settings reference
Product card
| Product grid cursor | |
|---|---|
| Enable product grid cursor | Turns this on or off. |
| Cursor label | |
| Cursor background | |
| Cursor text | |
| Product grid cards | |
| Corner radius | Slider. |
| Product card thumbnail ratio | Options: Portrait (3/4), Square (1/1), Landscape (4/3), Landscape (16:9), Portrait (4:5), Portrait (9:16). |
| Image fit | Options: Cover, Contain. |
| Hover effect | Options: None, Instant, Fade image, Soft zoom, Curtain reveal, Media gallery. |
| Gallery indicator thickness | Slider. |
| Show indicator background | Turns this on or off. |
| Autoplay video | Plays a muted, looping Shopify-hosted video when it is the product's first media item. |
| Show product title | Turns this on or off. |
| Title lines | Options: Unlimited, 1 line, 2 lines, 3 lines. |
| Equal title height | Turns this on or off. |
| Show price | Turns this on or off. |
| Show vendor | Turns this on or off. |
| Enable quick view | Turns this on or off. |
| Mobile quick view behavior | Options: Always show quick view button, Open quick view on card tap, Reveal quick view button on card tap. |
| Show variant options | Turns this on or off. |
| Variant option size | Options: Extra small, Small, Medium, Large, Extra large. |
| Variant style | Options: Hover reveal, Always show. |
| Variant overlap display | Turns this on or off. |
| Show badges | Turns this on or off. |
| Content alignment | |
| Save display | Options: Amount, Percent. |
| Show saved amount | Turns this on or off. |
| 3D product media | |
| Custom 3D view | Shows the customization settings for Radian's default 3D presentation. Turning this off only hides the settings and doesn't change the storefront presentation. |
| Use native presentation | Switches product pages and Quick View to Shopify's default 3D model presentation. This is the only setting that disables Radian's custom presentation; all other 3D settings below are ignored while it is enabled. |
| Background color | |
| Show background grid | Turns this on or off. |
| Exposure | Slider. |
| Show model shadow | Turns this on or off. |
| Shadow intensity | Slider. |
| Shadow softness | Slider. |
| Show viewpoint controls | Turns this on or off. |
How it works
- Quick view opens the Quickview section in the Overlay group. Its blocks are set there.
- Swatch colors and shapes come from Theme settings > Variants & swatches.