Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Collection Tiles — Free Website Section Template
Menus & listings · v1.0.0 · Updated 2026-11-15 · Responsive · GSAP animation · HTML, React & Vue
Extend with AI
Take This Section Further With AI
Ask an AI assistant to build on the tiles: load collections from your own API, show the live item count for each, or highlight a "new" collection with a badge.
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 "shop by collection" section in HTML and CSS.
- A heading, then a responsive grid of 4 tall tiles (aspect-ratio 4/5, auto-fit with a 220px minimum, two across on phones).
- Each tile is one link containing a cover photo, a dark gradient from the bottom, the collection name in a serif font, a small count line ("120 pieces") and a white round arrow button at the bottom right.
- On hover or keyboard focus the photo scales to 1.07 over 0.7s and the arrow moves 4px right; disable both under prefers-reduced-motion.
- Show a 3px focus outline on keyboard focus.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
Collection Tiles — Free Shop by Category Section
Collection Tiles is the row of tall photo tiles that sends shoppers into the right part of your shop: Women, Men, Shoes, Accessories. Each tile is a photograph with the collection name over a soft gradient, a short line such as "44 pairs" and an arrow, and the whole tile is a single link, which makes it easy to hit on a phone.
Two to six tiles, any layout
Add between two and six tiles. On a wide screen they sit side by side at a 4 by 5 ratio, and as the screen narrows they wrap, ending as two across on a phone. The photos are cropped to fit, so you can use any portrait picture; use the focus point if a face or product is cut off.
Calm motion
On hover or keyboard focus the photograph zooms slowly and the arrow slides a few pixels. Visitors who prefer reduced motion see no movement at all, and every tile has a visible focus outline.
Links that work with the shop
Point each tile at a filtered shop view, for example the Shop page with a category in the address, or at a collection page. In the Fashion Boutique website template the tiles link to filtered shop pages in the multi-page version.
Export it
Download HTML, a ZIP, React or Vue, or fork into My Code. Pair it with the Product Strip for best sellers and the Shop the Look section for outfits.
Getting the most from it
Use photographs with the same lighting and background so the row feels like a set, keep names to one or two words, and show real item counts that you update. Lead with the collection most visitors want.
Why use it
Why Use the Collection Tiles
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 tiles 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 Collection Tiles Section
The Collection Tiles section is part of 1 complete website template in the free Website Builder, so you can see it in a full page before you use it on its own: Fashion Boutique Website (Online Store). Open any of them in the builder to edit the whole page, or keep customising this section by itself.
Got questions?
Frequently Asked Questions
Between two and six. Four tiles look best on a desktop in a single row, and the grid wraps neatly to two across on phones.
Portrait photos around 800 by 1000 pixels (4 by 5) work best. They are cropped to fit, and you can set a focus point if something important is cut off.
Yes. Each tile has its own link, so point it at a collection page or a shop page that filters by category in the address.
Yes. Visitors who ask their device for reduced motion see no zoom or arrow movement. The tiles still show a clear outline when focused by keyboard.
It saves an editable copy of your Collection Tiles 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.