Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Product Grid — Free Website Section Template
Menus & listings · v1.0.0 · Updated 2026-10-24 · Responsive · GSAP animation · HTML, React & Vue
Extend with AI
Take This Section Further With AI
Ask an AI assistant to adapt the Product Grid HTML and CSS: add a quick-view modal, a size or colour selector, a wishlist heart or a React component that renders cards from a products array.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a responsive product grid in plain HTML and CSS.
- A heading row with a title and a "Shop everything" link, then a list of product cards in a four-column grid that becomes 3, 2 and 1 columns as the container narrows.
- Each card: a 4:5 image with hover zoom and an optional badge, a linked product name, a one-line description, a star rating with review count, the price with an optional crossed-out old price, and a full-width button.
- Add Product JSON-LD (name, image, description, offers with price and priceCurrency, aggregateRating) for each card.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
About this section
Product Grid — Free E-commerce Product Cards Template
Product Grid is a free section for showing products on a landing page, a shop front or any site that sells something. A heading with a "shop everything" link sits above a grid of cards; each card has a product photo, an optional badge, the name, a short line, the price, an optional old price crossed out, a star rating and a button.
Cards that sell
The photo is a 4:5 portrait frame that zooms gently on hover, with a badge such as "New", "Best seller" or "-20%" in the corner. Under it the name links to the product page, the price is large and clear, and the old price sits beside it crossed out when an item is on sale. A rating with the number of reviews adds trust, and a button sends people to your product page or checkout.
Built for search
The section writes Product structured data for every card: name, description, image, price, currency, availability and, when you enter a rating and a review count, an aggregate rating. Write prices with a symbol and a number, such as $49 or £35.50, so the currency can be read. The structured data helps search engines understand your catalogue; whether rich results appear is up to them.
A showcase, not a shopping cart
This section displays products and links out. Point each button at a checkout link from Shopify, Stripe, Gumroad or your own store. Add up to twelve products, and the grid goes from four columns to three, two and one as the space gets narrower.
Export it
Copy one HTML file, download a ZIP with your product photos, copy a React or Vue component, or fork into My Code. Pair it with a Pricing Comparison Table for subscription plans, or add proof with Testimonials Grid.
Why use it
Why Use the Product Grid
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and products in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
In real websites
Website Templates That Use the Product Grid Section
The Product Grid section is part of 3 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Photographer Website, Product Landing Page Store, Music Artist & Band Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.
Got questions?
Frequently Asked Questions
No. It displays products and links out. Point each button at a checkout or payment link from a store platform such as Shopify, Stripe or Gumroad, which handles payment securely.
Enter the sale price in the Price field and the original price in Old price. The old price appears crossed out beside it, and you can add a badge such as -20%.
Yes. It writes Product data for each card with the name, image, description, price, currency and availability, plus a rating when you enter one with a review count.
Up to twelve. For a bigger catalogue, show your best sellers here and link to your full shop with the heading link.
It saves an editable copy of your Product Grid in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.