# Commerce and Product Templates > Animated templates built around selling: product launches, limited drops, and small shops with working baskets. Static HTML with no build step. Canonical: https://gsapvault.com/templates/category/commerce-product Templates built around selling a thing rather than describing one: launches, limited drops, and shops with a short curated range where every product deserves its own moment. ## Selling a product on a page that moves Product pages fail in two predictable ways. Either the product is a flat photograph on a white ground and nothing happens, or the page is so busy that the thing being sold is lost in it. The templates here put the product at the centre and give it exactly one behaviour that makes it feel handleable. A can spins under your finger and retokens the entire page to its label colours when you pick a different beer. A flavour switcher stays pinned while the whole section retints as each panel scrolls past. A shelf of book spines tips one out in 3D and opens it on the table below, cover and staff blurb on facing pages. A basket accepts an item with a fly-to-basket arc, a grind selection and a live subtotal. Urgency gets the same treatment where it belongs. The drop template runs a live countdown in both the hero and a sticky bar, throws its lookbook deck with real momentum, and closes on a first-access waitlist, because a limited release lives or dies on whether the visitor believes the deadline. None of these ship a payment backend, and that is the honest trade. What you get is the storefront: the layout, the art direction, the interaction and the state management, all of it static files you can point at Stripe, Shopify, Gumroad or a plain form. ## How to put your own products into a commerce template Product data sits in markup or a small array near the top of the script, so adding your range does not mean touching the animation. 1. **List your products in the markup:** Each product is a block of semantic HTML carrying its own data attributes for price and options. Duplicate one, change the values, and the grid, filters and basket pick it up. 2. **Set the colour per product where the template uses it:** Templates that retint the page per product read a custom property off the selected item. Give each product its colour there and the whole page follows. 3. **Point the checkout at your processor:** The basket is complete front-end state. Replace the submit handler with a call to Stripe Checkout, a Shopify cart permalink, or whatever you already use. 4. **Photograph or draw, then bake the grade:** Several templates use authored SVG rather than photography specifically so there is nothing to license. If you swap in photos, apply one consistent grade across all of them before exporting. ```css

Harbour Pale

4.2% · Citra and Mosaic, soft bitterness.

``` ## Commerce & product at a Glance | Template | What it does | Built with | Tone | | --- | --- | --- | --- | | [Fine Jewellery Template](https://gsapvault.com/templates/fine-jewellery-template) | A cold-luxury two page site for an independent jewellery house: a raking light you sweep across a single piece to move its exposure, its specular streak, its cast shadow and its colour temperature at once, plus a twelve piece shop page with a Flip-powered category filter, add to cart on every piece and a front-end selection drawer shared across both pages. | ScrollTrigger, Flip | mixed | | [Product Launch Template](https://gsapvault.com/templates/product-launch-template) | A complete one-page product launch site built from GSAP Vault effects: bouncy word-pop hero with rising fizz, rotating badge, ink ticker, elastic sticker cards, and a pinned flavour switcher that retints the whole section as you scroll. | ScrollTrigger | light | | [Fashion Drop Template](https://gsapvault.com/templates/fashion-drop-template) | A stark one-page drop site for a limited clothing release: live countdown in the hero and sticky bar, a draggable lookbook card deck, a scarcity-driven product grid, and a first-access waitlist built for conversion. | Draggable, InertiaPlugin, ScrollTrigger | dark | | [Coffee Roaster Template](https://gsapvault.com/templates/coffee-roaster-template) | A complete one-page shop for a small coffee roaster, built on an espresso ground with one acid-green accent, and a working demo basket with a fly-to-basket arc, grind selection and a live subtotal as its signature. | ScrollTrigger | dark | | [Bookshop Template](https://gsapvault.com/templates/bookshop-template) | A complete one-page site for an independent bookshop, built around a spine wall: a shelf of art-directed CSS book spines where pulling one tips the book out in 3D and opens it on the table below, cover and staff blurb on facing pages. | ScrollTrigger | mixed | | [Online Course Template](https://gsapvault.com/templates/online-course-template) | A complete one-page site for selling a single online course, built around a draggable pace planner: set your hours per week and watch the curriculum re-pack itself into real weeks with a live finish date. | ScrollTrigger, Draggable | mixed | | [Craft Brewery Template](https://gsapvault.com/templates/craft-brewery-template) | A one-page brewery and taproom site where a draggable spinning can is the hero: the only saturated object on an industrial gunmetal shell, and picking a beer retokens the whole page. | ScrollTrigger | dark | | [Record Label Template](https://gsapvault.com/templates/record-label-template) | A complete independent record label site on a saturated magenta ground, with a rack of designed vinyl sleeves whose records slide out and become genuinely drag-spinnable turntables with inertia, motion smear and an elastic settle. | ScrollTrigger, Draggable, InertiaPlugin | dark | ## Templates in This Category ### Fine Jewellery Template A cold-luxury two page site for an independent jewellery house: a raking light you sweep across a single piece to move its exposure, its specular streak, its cast shadow and its colour temperature at once, plus a twelve piece shop page with a Flip-powered category filter, add to cart on every piece and a front-end selection drawer shared across both pages. - Tier: premium · Difficulty: advanced - [View template](https://gsapvault.com/templates/fine-jewellery-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/fine-jewellery-template.md) ### Product Launch Template A complete one-page product launch site built from GSAP Vault effects: bouncy word-pop hero with rising fizz, rotating badge, ink ticker, elastic sticker cards, and a pinned flavour switcher that retints the whole section as you scroll. - Tier: premium · Difficulty: beginner - [View template](https://gsapvault.com/templates/product-launch-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/product-launch-template.md) ### Fashion Drop Template A stark one-page drop site for a limited clothing release: live countdown in the hero and sticky bar, a draggable lookbook card deck, a scarcity-driven product grid, and a first-access waitlist built for conversion. - Tier: premium · Difficulty: beginner - [View template](https://gsapvault.com/templates/fashion-drop-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/fashion-drop-template.md) ### Coffee Roaster Template A complete one-page shop for a small coffee roaster, built on an espresso ground with one acid-green accent, and a working demo basket with a fly-to-basket arc, grind selection and a live subtotal as its signature. - Tier: premium · Difficulty: advanced - [View template](https://gsapvault.com/templates/coffee-roaster-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/coffee-roaster-template.md) ### Bookshop Template A complete one-page site for an independent bookshop, built around a spine wall: a shelf of art-directed CSS book spines where pulling one tips the book out in 3D and opens it on the table below, cover and staff blurb on facing pages. - Tier: premium · Difficulty: intermediate - [View template](https://gsapvault.com/templates/bookshop-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/bookshop-template.md) ### Online Course Template A complete one-page site for selling a single online course, built around a draggable pace planner: set your hours per week and watch the curriculum re-pack itself into real weeks with a live finish date. - Tier: premium · Difficulty: intermediate - [View template](https://gsapvault.com/templates/online-course-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/online-course-template.md) ### Craft Brewery Template A one-page brewery and taproom site where a draggable spinning can is the hero: the only saturated object on an industrial gunmetal shell, and picking a beer retokens the whole page. - Tier: premium · Difficulty: advanced - [View template](https://gsapvault.com/templates/craft-brewery-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/craft-brewery-template.md) ### Record Label Template A complete independent record label site on a saturated magenta ground, with a rack of designed vinyl sleeves whose records slide out and become genuinely drag-spinnable turntables with inertia, motion smear and an elastic settle. - Tier: premium · Difficulty: advanced - [View template](https://gsapvault.com/templates/record-label-template) - [Clean Markdown for AI agents](https://gsapvault.com/templates/record-label-template.md) ## Related Guides - [54 animated website templates built with GSAP (2026)](https://gsapvault.com/blog/interactive-website-templates) ([Markdown](https://gsapvault.com/blog/interactive-website-templates.md)): 54 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download. - [Shopify custom animations with GSAP](https://gsapvault.com/blog/shopify-custom-animations-gsap) ([Markdown](https://gsapvault.com/blog/shopify-custom-animations-gsap.md)): Add GSAP animations to a Shopify theme: where the code goes, how to survive theme editor section reloads, and a scroll-reveal collection grid. - [66 GSAP animation examples with code (2026)](https://gsapvault.com/blog/gsap-animation-examples) ([Markdown](https://gsapvault.com/blog/gsap-animation-examples.md)): 66 production-ready GSAP animation examples with code: scroll, text, cursor, and canvas effects. Eight are completely free with copy-paste snippets below. ## Frequently Asked Questions ### Do these templates include a shopping cart that takes payment? They include a working front-end basket with add, remove, options and a live subtotal, but no payment processing. Connect the checkout step to Stripe, Shopify, Gumroad, Paddle or any provider that accepts a redirect or an API call. ### How many products can I add? These are built for a short curated range rather than a catalogue of hundreds. A handful of products up to a few dozen is comfortable. Past that you want a real ecommerce platform, and these templates are the wrong tool. ### Can I use a commerce template as a single product landing page? Yes, and the product launch template is designed for exactly that. Delete the sections you do not need; the layout does not depend on any one of them being present. ### Will the countdown keep working after the launch date? The countdown reads a date you set and degrades sensibly when it passes rather than showing negative numbers. Change the date, or remove the block entirely, and nothing else on the page breaks. ## Related Categories - [Landing Page Templates](https://gsapvault.com/templates/category/landing-marketing) - [Events and Hospitality Templates](https://gsapvault.com/templates/category/events-hospitality) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt