Acer Electric is an Indian electric mobility brand with a catalogue spanning e-cycles, e-scooters, and e-bikes. Their core requirement was clear: custom product pages for every vehicle in their lineup, each with its own layout, spec presentation, and visual identity, while running a fully functional e-commerce backend.

I handled the entire project end-to-end, from initial design in Figma through to a fully developed, animated Framer site with Shopify integration. Delivered in 35 days.

Shopify's templating system doesn't give you the design control needed to build truly unique product pages per vehicle. Acer Electric had 8 products across 3 categories, and each one needed its own hero treatment, spec grid, gallery layout, and visual storytelling. A shared template with swapped content wasn't going to cut it.

They also needed the full e-commerce stack: real-time inventory, pricing, cart, checkout, and order management. The site had to look custom-built but function like a production storefront.

The project started in Figma. I designed the full site architecture: homepage, 8 individual product pages, dealership page, contact, and supporting pages.

Each product page was designed as a standalone layout. The TC Max page doesn't look like the Skypher Pro page. Different hero compositions, different spec arrangements, different gallery treatments, all tailored to how each vehicle should be presented.

The Figma phase also established the interaction language: scroll-triggered animations, hover states, page transitions, and the carousel behavior that would carry into the Framer build.

Once the designs were locked, I built everything in Framer.

Custom product pages: All 8 product pages were built with full creative control. No shared templates. Each page has its own layout, imagery, and interaction design.

Framer Ship integration: Framer Ship bridges Framer's design layer with Shopify's commerce backend. Product data (pricing, inventory, variants) syncs from Shopify directly into the Framer components through a CMS setup. When Acer Electric updates a price or stock level in Shopify, it reflects on the site automatically.

On-site checkout: "Buy Now" buttons trigger Shopify's checkout without redirecting users off the Framer site. Cart, payment, and order confirmation all happen within the branded experience. No external redirects, no broken brand continuity.

CMS for product sync: I set up Framer's CMS to sync product data from Shopify, keeping the catalogue manageable for the client. They can update products from Shopify's admin and the site stays in sync without touching Framer.

The site is built with layered animations throughout:

Hero carousel with 3 rotating slides, smooth crossfade transitions with lifestyle-first messaging

Scroll-triggered reveals on spec highlights, gallery sections, and content blocks

Hover interactions on product cards and CTAs

A scrolling dealership ticker spanning 19+ Indian cities, running as a continuous loop

Page transitions between product pages keeping the experience fluid

The animation layer gives the site a premium feel that matches the brand's positioning in the electric vehicle space.

Homepage: Hero carousel, product cards with live checkout, dealership ticker, spec highlights, lifestyle photo gallery

8 custom product pages: Each with unique layout, specs, gallery, and Shopify-powered purchase flow

Dealership page: Presence across 19+ Indian cities

Supporting pages: Contact, about, blog, warranty, policies

Figma — Design, wireframes, interaction planning

Framer — Development, animations, CMS

Framer Ship — Shopify-to-Framer commerce bridge

Shopify — E-commerce backend, inventory, payments, order management

A fully custom e-vehicle brand site delivered in 35 days. 8 bespoke product pages, a seamless Shopify-powered checkout that never leaves the site, and an animation layer that makes the whole thing feel like a premium brand experience. The client manages their catalogue from Shopify's admin, and the site stays in sync through the CMS.