Multipurpose theme documentation
Multipurpose Fashion Theme
Theme Settings Product Tiles
Multipurpose Fashion Theme
Product Tiles control how products appear inside collection pages, homepage grids, and recently viewed sections. These settings affect layout, image behavior, hover effects, and product interaction.
Shopify Admin → Online Store → Themes → Customize → Theme settings → Product Tiles
1. Enable Quick View
Setting ID: enable_quick_view
Adds a popup modal that shows product details without leaving the collection page.
Use this to reduce navigation friction and increase conversion.
2. Enable Quick Add
Setting ID: enable_quick_add
Adds an "Add to Cart" button directly inside the product card.
Best for simple products without many variants.
3. Product Image Ratio
Setting ID: product_image_ratio
- Natural
- Landscape (4:3)
- Portrait (2:3)
- Square (1:1)
This forces consistent image proportions across the grid.
Portrait works best for fashion. Square works best for electronics or accessories.
4. Zoom Image to Fill Space
Setting ID: zoom_image_to_fill_space
If enabled, images crop slightly to fill full container.
Disable if product images contain important edge details.
5. Hover to Reveal Second Image
Setting ID: hover_to_reveal_second_image
When user hovers over product, second product image appears.
Improves product engagement and browsing experience.
6. Enable Color Swatches
Setting ID: enable_color_swatches
Displays color options directly inside product tile.
7. Swatch Style
- Round
- Square
Match swatch style to overall edge design.
8. Product Tile Style
Setting ID: product_tile_style
Controls overall card design layout:
- Simple
- Grey round
- White square
- Thick grid
- Minimal
- Thin grid
Choose minimal for modern brands. Choose thick grid for bold stores.
9. Image Breathing Room
Setting ID: image_breathing_room
Adds spacing inside image container. Higher value = more white space.
Use moderate values (5–15%) for balanced design.
10. Recently Viewed Layout
Desktop Products Per Row
Controls number of products per row on desktop. Range: 2 to 6.
Maximum Products to Show
Controls how many recently viewed products appear. Range: 2 to 20.
Avoid overcrowding by limiting to 4–8 products.
Common Mistakes
| Problem | Cause | Solution |
|---|---|---|
| Images look inconsistent | Using Natural ratio | Use fixed ratio like Square or Portrait |
| Grid looks crowded | Too many products per row | Reduce desktop_products_per_row |
| Important image parts cropped | Zoom enabled | Disable zoom |
| Too many features enabled | Quick view + quick add + hover + swatches | Keep UI clean and focused |
FAQs
Allows customers to preview product details in a modal without leaving the collection page.
Adds products directly to the cart from the product grid.
Overrides product image ratios to maintain a consistent grid layout.
Displays a secondary product image when hovering over a product tile.
Adds spacing around images inside product cards.