About ProductCatalog
The Product Catalog component is built for designers, stores, creators, and brands that want a more interactive way to display products inside Framer.
Instead of showing products in a plain static card layout, this component gives you two flexible presentation styles: a structured grid view for clean product browsing, and a randomized scattered view that places products irregularly across the screen for a more editorial, playful, or high-fashion feel.
Each product can include a title, description, price, external link, sub-images, variants, and optional price changes based on the selected variant. Visitors can click on any product to open a detailed product view, where they can explore more images, read the full description, compare variants, and continue through the product link.
It is ideal for product showcases, fashion collections, digital products, portfolios, product drops, lookbooks, creative stores, and Framer commerce-style landing pages.
How It Works
1. Add Product Items
You can create multiple product items directly inside the component settings. Each product can include:
Product title
Product description
Base price
Product link
Main image
Sub-images
Variants
Variant-specific price changes
This gives each product enough depth to work as a full showcase, not just a basic thumbnail card.
2. Choose Your Catalog Layout
The component supports two display modes:
Grid StyleA clean, organized product layout for stores, galleries, product listings, and professional showcases.
Randomized / Scattered StyleA more expressive layout where products appear irregularly across the screen. This works well for fashion drops, creative campaigns, art stores, experimental portfolios, and visually-driven product pages.
3. Click to View Full Product Details
When a visitor clicks a product, the component opens a full product detail view. This can show:
Larger product image
Additional sub-images
Full title and description
Price
Available variants
Updated price based on selected variant
CTA/product link
This keeps the browsing experience interactive without forcing users to leave the page immediately.
4. Add Product Variants
Variants allow you to show different product options such as:
Size
Color
Finish
Material
Each variant can also have its own price change, making the component useful for products with different pricing tiers.
5. Connect Product Links
Each product can include a custom link, allowing you to send users to:
Checkout pages
Product pages
External stores
Gumroad
Lemon Squeezy
Shopify
Polar
Framer pages
Contact forms
Best Used For
Fashion collections
Product drops
Digital product stores
Creative portfolios
Framer product pages
Mini ecommerce experiences
Lookbooks
Shoe, clothing, or accessory showcases
Template and component stores
Art and collectible catalogs
SaaS pricing-style product showcases
How to Use
Drag the Product Catalog component into your Framer page.
Add your product items from the component settings.
Upload the main product image and optional sub-images.
Add the product title, description, price, and link.
Add variants if your product has multiple options.
Set price changes for variants where needed.
Choose between grid layout or randomized scattered layout.
Customize the visual style to match your website.
Publish your Framer site.
Support
If you need help setting up the component, customizing the layout, or understanding how to structure your products, support is available after purchase.
Refund Policy
Due to the digital nature of this component, all sales are final. Please review the component description and features carefully before purchasing.
License
This component is licensed for use on one Framer project or website per purchase. Redistribution, resale, or repackaging of the component is not allowed.
