Skip to content
CASE STUDY: WEBSITE DEVELOPMENT

Shriram Industries: A Next.js Website with a 3D Bottle Customiser

A Next.js website for a packaged drinking water manufacturer, with a 3D bottle that buyers can rotate, resize and customise with their own brand.

In short

Shriram Industries makes packaged drinking water in Ahilyanagar, Maharashtra. Quavento Technologies designed and built its website in Next.js with Tailwind CSS and shadcn/ui, added an interactive 3D bottle that buyers can rotate, resize and customise with their own brand, connected the enquiry form and deployed the site on Firebase Hosting.

Home page of the Shriram Industries website on a desktop screen
The home page of shriramindustry.com

Who is Shriram Industries and what did they need?

Shriram Industries manufactures packaged drinking water at its plant in Gundegaon, Ahilyanagar, and sells it in 250 ml, 500 ml and 1 litre bottles. Alongside its own label, the company supplies custom branded bottles to hotels, corporate events and weddings.

They came to us for a website that would do two jobs. It had to explain the product and the purification process to people who have never visited the plant. It also had to help a business buyer picture a bottle carrying their own brand, because that is the part of the business a flat photograph sells badly.

What problems did the website have to solve?

Packaged water is a hard product to present online. Three problems shaped the brief.

  1. 01

    Every bottle photo looks the same

    A picture of a water bottle does not tell a buyer much. Without something more, the site would look like every other water brand's site.

  2. 02

    Custom branding is hard to imagine

    A hotel or an event planner ordering branded bottles wants to see their own label on the bottle before they call. A paragraph of text cannot do that.

  3. 03

    Trust depends on the process

    Buyers of drinking water care about how it is purified, tested and packed. That story needed its own clear place on the site.

  4. 04

    Enquiries must reach the team

    Bulk and custom orders start with a conversation, so the form, phone numbers and email had to be easy to find on every page.

How did Quavento Technologies solve it?

We built the site with our Next.js development stack: Next.js for the pages, Tailwind CSS and shadcn/ui for a consistent interface, and Three.js for the 3D work. The site is deployed on Firebase Hosting.

  1. 01

    A bottle you can pick up

    Instead of one more product photo, the home page has a 3D bottle. A visitor can drag to rotate it and switch between the 250 ml, 500 ml and 1000 ml sizes.

  2. 02

    A customiser for business buyers

    The Customise Your Bottle option lets a buyer apply their own branding to the 3D bottle and see the result before they enquire. It turns a vague request into a specific one.

  3. 03

    The process, step by step

    The purification process is laid out as numbered steps, with a separate section for the plant and the testing lab, so the quality story is easy to follow.

  4. 04

    One clear route to an enquiry

    A Get in Touch button stays in the header, and the contact page carries the form, both phone numbers, email and the plant address.

What does the finished website include?

The site has six main pages plus the policy pages a business site needs.

  1. 01

    Home

    Hero, company introduction, the 3D bottle showcase, purification process, product sizes, facility, sustainability and the industries served.

  2. 02

    About

    Who the company is, its vision and mission, the plant, the lab and the values it works by.

  3. 03

    Products

    The three bottle sizes with the use each one suits, from welcome kits to bulk supply.

  4. 04

    Gallery and Blog

    Photos of the plant and products, and articles on purification, recycling and mineral balance.

  5. 05

    Contact

    Enquiry form connected to the team, with phone, email and address.

  6. 06

    Policies

    Privacy policy, terms and conditions and refund policy.

Screens from the project

Product section of the Shriram Industries website showing three bottle sizes
The three bottle sizes, each with its own use
3D bottle viewer on the Shriram Industries website
The 3D bottle viewer with size buttons and the customise option
Shriram Industries website on a mobile phone
The same pages on a phone

What was the result?

Shriram Industries now has a live website at shriramindustry.com that presents the product, the process and the plant in one place, and gives business buyers a way to see a branded bottle before they pick up the phone.

We have not published traffic or sales figures for this project. What we can show is the work itself: the site is live, and you can open it and try the 3D bottle.

What can other manufacturers take from this project?

If your product looks ordinary in a photograph, show it in a way a photograph cannot. A 3D view or a simple configurator is most useful when buyers need to imagine their own version of the product, as they do with branded bottles, packaging or uniforms.

Keep the interactive part to the one place where it helps the buyer decide, and let the rest of the site stay quick and plain. Our guide to Next.js vs WordPress for a business website explains when a coded site like this one is the better choice.

Frequently asked questions

Which technology was used for the Shriram Industries website?

The website is built with Next.js, Tailwind CSS and shadcn/ui. The 3D bottle uses Three.js, and the site is deployed on Firebase Hosting.

What does the 3D bottle feature do?

It shows a water bottle in 3D that a visitor can rotate by dragging and switch between 250 ml, 500 ml and 1000 ml sizes. Business buyers can also apply their own branding to the bottle to see how a custom order would look.

Can Quavento Technologies build a 3D product viewer for my website?

Yes. We build 3D viewers and simple product customisers for products that are hard to show in photos. Whether it is worth doing depends on the product, so we look at that with you before quoting.

Is a Next.js website right for a manufacturing company?

It suits a manufacturer that wants a fast website with custom features such as a product viewer, and that does not need to edit pages every day. A company that publishes often may be better served by a content management system.

Back to all case studies

Last updated:

MORE WORK

Related case studies

READY TO COLLABORATE

Ready to get started?

Partner with Quavento to turn bold digital concepts into market-defining brands, scalable web platforms, and measurable commercial growth.

Detailed strategy proposal & honest milestone pricing
Direct access to senior strategy & engineering leads
Guaranteed response within 24 business hours

Get in Touch

Share your requirements and we will send a tailored proposal.