Product Card Settings
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.
Product Card Hover Effects
Enable Secondary Image on Hover
When enabled, the second image from your product gallery appears on hover — ideal for showing alternate angles or variants.
Enable Zoom on Secondary Image
Activates zoom functionality on the hover image, letting users inspect more detail before clicking.
Enable Fade Effect on Hover
Applies a smooth fade transition between the first and second product image when hovered.
Enable Fade-In-Up Effect on Hover
Adds a subtle upward motion + fade-in effect when users hover over a product card.
Show 'Select Options' on Hover
Displays the “Select Options” button on hover. Great for stores with variable products (sizes, colors, etc.).
Product Info Settings
Show Vendor Name
Displays the vendor/brand name underneath the product title.
Show Product Ratings
Enable this to show star ratings (requires integration with a reviews app like Judge.me).
Cart & Catalog Mode Options
Enable Cart General
Toggle to show or hide the cart functionality entirely. Useful for portfolio-style stores or early-stage catalogs.
Enable Catalog Mode
Disables all purchase functionality and hides the “Add to Cart” or “Select Options” button. Turns your store into a browse-only mode.
Hide Product Prices
When catalog mode is active, you can also choose to hide product prices for a clean, no-pressure browsing experience.
🧱 Product Card Layout
Product Card Style
Choose from layout presets like:
Classic Card Style – Standard image-top, text-bottom design (More styles may be available in future updates.)
📐 Product Image Settings
Product Image Ratio
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
Custom Image Ratio
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.
Add to Cart Button Styling
Add to Cart Button Text
Customize the button label.
Example: Select Options, Quick Add, Shop Now
Button Border Radius
Adjust how rounded the corners are.
Example: 5 = slightly rounded
Background Color
Set the default background color.
Example: #2D2D2D
Hover Background Color
Color of the button when hovered.
Example: #FFFFFF
Text Color
Set the button text color.
Example: #F5F5F5
Hover Text Color
Text color when hovered.
Example: #151515
Button Size (Mobile)
Adjust font size in pixels for mobile displays.
Example: 13
Font Weight
Choose between:
Normal
Bold
Product Text Styling
Text Alignment
Choose how product content is aligned:
Left
Center
Right
Product Name Formatting
Choose how the product title is formatted: Default = no transformation (use actual title case)
Product Title Font Size
Set the size of the product title (in pixels).
Example: 16
Product Price Font Size
Adjust the price text size.
Example: 17
Price & Vendor Styling
Compare Price Text Color
Set the color for the compare-at price (the original price shown when a product is on sale).
Example: #939393
Compare Price Font Size
Adjust how large the compare price appears.
Example: 15
Vendor Name Text Color
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.
Last updated