Product Card Settings
Last updated
Last updated
The Product Display Settings in the Materia theme give you full control over how your product cards look, feel, and behave across your collection and homepage sections. From hover effects to card layout, button styling, image aspect ratios, and typography — everything can be customized to match your brand and shopping experience.
When enabled, the second image from your product gallery appears on hover — ideal for showing alternate angles or variants.
Activates zoom functionality on the hover image, letting users inspect more detail before clicking.
Applies a smooth fade transition between the first and second product image when hovered.
Adds a subtle upward motion + fade-in effect when users hover over a product card.
Displays the “Select Options” button on hover. Great for stores with variable products (sizes, colors, etc.).
Displays the vendor/brand name underneath the product title.
Enable this to show star ratings (requires integration with a reviews app like Judge.me).
Toggle to show or hide the cart functionality entirely. Useful for portfolio-style stores or early-stage catalogs.
Disables all purchase functionality and hides the “Add to Cart” or “Select Options” button. Turns your store into a browse-only mode.
When catalog mode is active, you can also choose to hide product prices for a clean, no-pressure browsing experience.
Choose from layout presets like:
Classic Card Style – Standard image-top, text-bottom design (More styles may be available in future updates.)
Choose from predefined ratios:
Portrait (2:3) – Great for fashion or vertical products
Square (1:1) – Ideal for balanced displays
Landscape (16:9) – Good for horizontal visuals
Enter your own custom ratio (e.g., 2:3, 4:5, 3:4, 16:9) for full control over how images are cropped and displayed.
Customize the button label.
Example: Select Options, Quick Add, Shop Now
Adjust how rounded the corners are.
Example: 5 = slightly rounded
Set the default background color.
Example: #2D2D2D
Color of the button when hovered.
Example: #FFFFFF
Set the button text color.
Example: #F5F5F5
Text color when hovered.
Example: #151515
Adjust font size in pixels for mobile displays.
Example: 13
Choose between:
Normal
Bold
Choose how product content is aligned:
Left
Center
Right
Choose how the product title is formatted: Default = no transformation (use actual title case)
Set the size of the product title (in pixels).
Example: 16
Adjust the price text size.
Example: 17
Set the color for the compare-at price (the original price shown when a product is on sale).
Example: #939393
Adjust how large the compare price appears.
Example: 15
Customize the color of the vendor name shown on product cards.
Example: #7B7B7B
That’s everything for Product Display Settings. This level of control allows you to keep your storefront sharp, optimized, and always aligned with your brand.
