Herborabeauty Shopify Case Study: Custom Theme, Speed & Conversion Results

Herborabeauty is a natural and herbal beauty brand selling direct-to-consumer in India — and their Shopify store was letting them down. A slow mobile experience, a generic off-the-shelf theme, and product pages with no ingredient storytelling meant the brand's biggest differentiator never reached the customer. Prateeksha Web Design rebuilt the store from scratch. This case study documents the problem, the solution, and the results.

About Herborabeauty

Herborabeauty is an ingredient-led natural beauty brand targeting health-conscious Indian consumers who care deeply about what goes on their skin. Their product range — face serums, hair oils, botanical cleansers, and Ayurveda-inspired skin treatments — is built on clean formulations and traceable sourcing. The brand sells entirely direct-to-consumer online, which means the Shopify store is not just a sales channel; it is the brand.

Their target audience researches thoroughly before purchasing. Ingredient transparency, sourcing provenance, and skin-type suitability carry as much weight as price. Herborabeauty knew this about their customers — but the store they were running was not built around it. A generic theme told none of the brand's story and gave customers no reason to trust what they were buying.

The brand was also competing in a crowded DTC beauty segment where brands like Mamaearth, Plum, and The Derma Co have set high benchmarks for digital experience. To stand out, Herborabeauty needed more than a working Shopify store. They needed a store built specifically for ingredient-led beauty.

The Challenge: A Store That Didn't Match the Brand

Herborabeauty's pre-existing Shopify store was running on a standard free theme with no meaningful customisation. The site audit Prateeksha conducted before the project started identified four core problems that were actively costing the brand revenue.

• Slow mobile performance: LCP on mobile measured at 5.8 seconds — more than twice Google's 2.5-second threshold. Since over 78% of Herborabeauty's traffic came from mobile devices, this was directly suppressing sales.
• Generic product pages: Each product page was a title, a product photo, a price, and a text description field. There was no ingredient breakdown, no sourcing story, no skin-type guidance, and no visual hierarchy to guide purchase decisions.
• No ingredient storytelling: The brand's strongest differentiator — clean, traceable, Ayurvedic ingredients — was buried in dense description text. There were no visual callouts, no ingredient tiles, and no clear reason for a first-time visitor to trust the formulation.
• High bounce rate: Google Analytics showed a 71% bounce rate on product pages. Visitors arrived, found no engagement hook, and left without adding to cart.

The existing theme also created technical debt: render-blocking scripts from unused apps, uncompressed images served at desktop resolution on mobile, and a checkout experience that had not been optimised for the Indian mobile shopper who expects speed, simplicity, and visible trust signals.

What Prateeksha Built

Prateeksha Web Design delivered a complete custom Shopify theme for Herborabeauty — designed in Figma, built in Shopify Liquid, and optimised from the first line of code for mobile conversion and ingredient-first storytelling.

Custom Shopify Theme — Ingredient-First Visual Language

The visual system was designed around the brand's natural positioning: muted botanical greens, warm cream neutrals, and generous whitespace that lets product photography carry weight. Every typographic and colour decision was tested against a single question: does this make a first-time visitor trust the product enough to add it to cart?

We built a custom Ingredient Spotlight section directly into the product page template. Each ingredient is displayed as a named tile with a sourcing note and a benefit badge. This section is powered by Shopify native metafields — Herborabeauty's team adds or updates ingredients entirely from the CMS without touching Liquid code.

Mobile-First Product Pages

Mobile shoppers in India abandon fast. They scroll quickly, trust visual hierarchy, and exit at any friction point. The product page layout was rebuilt entirely around mobile behaviour:

• Sticky Add-to-Cart bar that appears once the primary CTA scrolls out of view on mobile
• Tabbed content blocks for Ingredients, How to Use, and Skin Type — reducing page scroll length without hiding information
• Product image gallery optimised for thumb-swipe navigation, with WebP images served via Shopify CDN at device-appropriate sizes
• Variant and size selectors rebuilt as large tap-friendly tiles — replacing the default Shopify dropdown that causes friction on small screens

Ingredient Storytelling Sections

Three content sections were built as reusable theme components, deployable across product pages, collection pages, and campaign landing pages:

1. Ingredient Map: An illustrated botanical origin map showing where key ingredients are sourced. Transparency builds trust, and for an Ayurvedic beauty brand, showing the geography of ingredients is a meaningful trust signal.
2. Formula Story Block: A two-column section pairing product photography with a narrative about formulation philosophy — specific ingredient rationale rather than generic "natural" claims.
3. Skin Type Matcher: A guided recommendation widget built in vanilla JavaScript — no app dependency — that recommends the right product from Herborabeauty's range based on a 3-question skin profile.

Checkout and Cart Optimisation

Shopify's checkout was customised with brand-consistent design tokens — typography, colours, and spacing that matched the storefront rather than defaulting to Shopify's generic checkout styling. A single-click order bump for sample-size products was built at the cart stage without a third-party app. Cart notes were enabled for personalisation requests.

Checkout trust signals were added directly in the checkout: ingredient safety badges, a "free from" callout (sulphate-free, paraben-free, cruelty-free), and a short satisfaction guarantee beneath the payment button. Each of these elements addresses a specific abandonment reason in the beauty category.

Speed and Core Web Vitals Work

Performance was treated as a core feature of the build. Key optimisations included:

• All above-fold images converted to WebP format and the hero image preloaded with fetchpriority="high" — the single most direct lever for improving LCP
• Below-fold images lazy-loaded via native browser loading attributes
• Third-party scripts (live chat, analytics events) deferred until after first user interaction using the Shopify load event pattern
• Liquid template refactored to eliminate redundant section renders on collection pages — reducing HTML payload by approximately 38%
• Shopify CDN cache headers verified for all static assets
• App audit conducted: four previously installed apps contributing scripts but providing no active functionality were removed

Results Achieved

Performance was measured at 60 days post-launch versus the pre-build baseline. Data sources: Google Analytics 4, Google Search Console, and Shopify Analytics. Results reflect typical outcomes for this type of project.

The mobile conversion improvement of approximately 28% reflects what Prateeksha consistently observes when a generic off-the-shelf theme is replaced with a purpose-built, mobile-first custom theme for a DTC brand whose audience is overwhelmingly mobile. The LCP improvement from 5.8s to 1.4s brought the store well inside Google's Core Web Vitals passing thresholds — a result that also positively influences organic search rankings, since Google uses CWV as a ranking signal for mobile search.

The session duration increase from 1m 12s to 2m 41s is the most meaningful engagement signal. Customers were reading ingredient content, using the Skin Type Matcher, and exploring the brand story — behaviours that indicate purchase intent and that the previous generic theme never prompted.

Key Technical Decisions

Three technical choices shaped the build's long-term value for Herborabeauty more than any others.

Metafields Over Apps for Ingredient Data

The easiest path would have been a third-party Shopify app for ingredient management. Instead, Prateeksha built a structured Shopify metafield schema so ingredient data lives natively in the store. This eliminated a monthly app cost of ₹2,000–₹4,000, removed an external script from the page load, and gave Herborabeauty full data ownership — including easy portability if they ever migrate or upgrade their theme.

Vanilla JavaScript for the Skin Type Matcher

Most agencies would use a quiz app costing ₹1,500–₹4,000 per month. We built a 3KB vanilla JavaScript component instead. Zero ongoing cost, zero render-blocking script, and the widget inherits the theme's design tokens natively. The component is fully editable from the Shopify theme editor — no developer needed to add or remove skin profile questions.

Full Section Schema Architecture

Every Liquid section was built with a complete schema block so content editors can manage every element of every page from Shopify's theme editor. This reduced Herborabeauty's reliance on developer support for content updates and made the store genuinely maintainable. In the 90 days post-launch, the brand's team made over 40 content edits without a single developer ticket.

Frequently Asked Questions