SHOPIFY CASE STUDY

Uppeel: A Custom Shopify Storefront for a Premium Beauty and Fragrance Brand

How key sections of the storefront were redesigned and rebuilt, featuring two custom product templates, a metafield-driven content system, a dedicated Cocoa Caramel landing page, and a technical SEO refit that lifted product visibility across search and Google Merchant Center.

Shopify

Platform
Custom Theme Build

2

Product Templates
Category-Specific

Metafield

Driven Sections
Reusable Content

SEO

Technical Refit
Robots · GMC · Schema

Project Context

Client
Uppeel

Niche
Shopify E-Commerce · Beauty & Fragrance

The Tech Stack

  • Shopify
  • Liquid
  • HTML5
  • CSS3 / SCSS
  • JavaScript
  • Shopify Metafields
  • Google Merchant Center
  • Customer Events & Analytics

"We wanted a Shopify storefront that felt as premium as our fragrances, ran cleanly on technical SEO, and let our team update content without waiting on a developer."

The brief was pragmatic. Uppeel needed a storefront that matched the brand’s premium positioning, cleared the technical SEO issues that were slowing search and Google Merchant Center visibility, and made every product and content page editable from the Shopify admin without a code change.

Uppeel Team
Premium Beauty & Fragrance

THE STOREFRONT

Uppeel: A Premium Shopify Storefront Built Around the Product Journey

Uppeel is a beauty and fragrance brand offering premium perfumes and body mists for women. WebSpero rebuilt key parts of the Uppeel Shopify storefront to enhance the shopping experience, resolve technical SEO issues, and hand the team a metafield-driven content architecture they could manage on their own. Two custom product templates now serve the fragrance and body ranges, a dedicated Cocoa Caramel landing page anchors the flagship product story, and reusable metafield-powered sections keep every page fast to update.

For Uppeel Shoppers

  • Two distinct product page experiences designed for fragrances and body-care ranges
  • Redesigned variant selection UI that is cleaner and easier to browse
  • Product FAQs answered inline on every product page
  • Before & After comparisons and Why It Works sections that build trust
  • Product badges surfacing offers, best sellers, and promotional highlights
  • UGC videos embedded on product pages for real-customer social proof
  • A dedicated Cocoa Caramel landing page for the flagship product story
  • A redesigned homepage that leads with the brand and moves visitors to the right range fast

HOW WE BUILT IT

A Structured, Section-First Build Process

Uppeel needed changes across product templates, homepage sections, a landing page, technical SEO, and analytics. We treated each area as its own workstream, agreed the design and content model up front, and shipped in section-sized increments so the team could review as we went.

DISCOVERY

A working session with the Uppeel team to understand the brand positioning, the two product ranges, the SEO pain points, and how the team wanted to manage content going forward.

REQUIREMENT ANALYSIS

Broke the brief into workstreams: two product templates, homepage sections, Cocoa Caramel landing page,

metafield content model, technical SEO refit, and Customer Events analytics.

DESIGN DIRECTION

Defined the visual system for two distinct product ranges: a fragrance template with immersive imagery,and a revised template built for body-care storytelling and

comparison content.

METAFIELD ARCHITECTURE

Designed reusable Shopify sections powered by metafields: Product FAQ, Before & After, Why It Works, and product-specific content,

all editable from Shopify admin without code changes.

TEMPLATE DEVELOPMENT

Built the two custom product templates in Liquid, redesigned the variant selection UI, integrated product badges, the offer

section, and the UGC video block into the product journey.

HOMEPAGE & LANDING PAGE

Redesigned multiple sections of the homepage for stronger visual appeal and clearer conversion paths.Built the dedicated Cocoa Caramel

landing page with custom layouts and branding.

SEO & ANALYTICS

Updated robots.txt, resolved Google Merchant Center issues, added FAQ Schema for rich results, and implemented Customer Events for reliable interaction tracking.

QA & LAUNCH

Cross-browser and cross-device QA across product templates, homepage sections, and the landing page.Verified metafield-driven sections, offer logic,

and analytics events before deploying to the live store.

WHAT WE BUILT

Nine Building Blocks of a Premium Shopify Storefront

The Uppeel rebuild ships as a set of connected surfaces: two custom product templates, a redesigned homepage, a dedicated landing page, and a content and analytics layer that keeps the whole storefront easy to run.

Two Custom Product Templates

Fragrance and body-care are shopped on different logic. The fragrance template leans into immersive imagery and scent storytelling, while the body-care template is built around comparison content, ingredient callouts, and step-by-step use. Two distinct shopping experiences running on one clean theme.

Redesigned Homepage

Multiple homepage sections were rebuilt for visual appeal and conversion. The result is a homepage that leads with the brand, surfaces bestsellers, and moves a first-time visitor toward the right product range with fewer clicks.

Cocoa Caramel: Dedicated Landing Page

A dedicated landing page for the Cocoa Caramel flagship. Custom layouts, brand-forward typography, and a narrative built around the fragrance story. The landing page anchors campaigns and gives paid traffic a purpose-built destination.

Dynamic Product FAQ Section

A dedicated Product FAQ section appears on every product page, and every FAQ block runs on the same reusable section code. The Uppeel team writes and updates questions and answers straight from the Shopify admin, so a new product launches with its FAQs already in place, requiring no separate build per product.

Metafield-Powered Dynamic Sections

Before & After comparisons, Why It Works, and other product-specific content blocks all run on the same underlying content system. One flexible structure serves multiple content types, so adding a new kind of product story doesn’t mean building a new section from scratch.

Advanced Product Variant Selection

The variant selection UI was redesigned for clarity: cleaner controls, faster switching, and correct product state at every step. Shoppers see the right price, image, and stock the moment they pick a size or scent.

Product Badges, Offer Section & UGC Videos

Product badges highlight offers, best sellers, and promotional products at a glance. A configurable offer section on product pages showcases active promotions. UGC video blocks embed real customers using the product, adding trust to the buying decision.

Technical SEO Refit

The robots.txt configuration was refit for cleaner crawling. Google Merchant Center issues were resolved, restoring product approvals and visibility. FAQ Schema went live on relevant pages to compete for rich results in search.

Customer Events for Accurate Analytics

Shopify Customer Events now track the full shopping journey, so interactions land cleanly in analytics and marketing platforms. Marketing gets accurate attribution, and the Uppeel team gets a real read on which campaigns and pages convert.

THE CHALLENGES WE SOLVED

Building a Premium Storefront on Shopify Without Bloat

Shopify handles commerce infrastructure well. What it does not do out of the box is give a brand two distinct product experiences, a content layer the team can run itself, technical SEO built into the theme, and analytics the marketing team can trust. Five problems shaped the build:

Two Product Categories, One Theme

Fragrance and body-care are bought on different logic: one sells on scent and imagery, the other on proof and routine. Forcing both into one generic template would have flattened that difference and served neither range well. The challenge was giving each range its own shopping experience without splitting the theme into two products to maintain going forward.

Content the Team Actually Owns

Every content change that waits on a developer is a change that waits, period. A brand that can only update its FAQs, proof points, or offers on a sprint cycle can’t respond to what its customers are actually asking. The real problem to solve wasn’t the FAQ section itself; it was removing the developer from the loop entirely, so the team could act on what they learn the moment they learn it.

Technical SEO That Actually Ranks

A storefront can look finished and still be invisible where it matters. Merchant Center rejections and crawl issues meant products weren’t reliably reaching search and shopping surfaces, a quiet tax on every other improvement, since none of it counts if the product can’t be found. The fix had to restore that channel as something the team could rely on, not just patch the symptom.

Analytics That the Marketing Team Trusts

Marketing decisions are only as good as the data behind them. When tracking is inconsistent, every attribution report carries an asterisk, and budget ends up allocated on instinct instead of evidence. The goal wasn’t just to install tracking; it was to make the data trustworthy enough that the team could actually act on it.

Interactive Content Without Bloat

Trust-building features like UGC and offer callouts usually cost something: another app, another script, a slower page. Uppeel needed those features without inheriting that trade-off: engagement that lives natively in the theme instead of stacking dependencies on top of it.

WHAT WAS DELIVERED

A Brand-First Shopify Store the Team Can Run

Uppeel now has a Shopify storefront that matches the premium positioning of its products, two custom product templates that fit each range, a metafield-driven content system, and the technical SEO and analytics foundation the team needed to grow.

VISION DELIVERED
User Experience “Improve user experience across product and collection pages” Two custom product templates, redesigned variant selection UI, inline FAQs, Before & After, and Why It Works content
Performance & SEO “Enhance store performance and SEO” Robots.txt refit, Google Merchant Center issues resolved, FAQ Schema for rich results, Customer Events wired
Content Flexibility “Create flexible, reusable Shopify sections” Metafield-powered sections for FAQ, Before & After, Why It Works, and product-specific blocks, all editable from admin
Engagement “Increase customer engagement with interactive content” UGC videos, product badges, configurable offer section, dedicated Cocoa Caramel landing page
Conversion “Optimize product presentation and conversion” Redesigned variant components, product badges, offer callouts, and category-specific product templates

WHAT TO EXPECT FROM US

Transparent Build Process and Clean Delivery for Shopify Projects

If you are building or rebuilding a Shopify store and weighing agencies, here is what working with our team actually looks like.

A plan before a proposal.

We start with a working session to understand what your store needs to do, who it serves, and where the gaps are. For a brand store, that means understanding the brand identity, not just the feature list. You leave with a delivery plan, not a sales pitch.

Brand-first, not feature-first.

Every section of your homepage and product pages exists for a reason. We agree on the purpose of each section before we design it. The end product reflects your brand’s actual logic, not a template someone built for a different business.

Clean theme code from the start.

We write Shopify Liquid that any competent developer can read and maintain. No third-party app dependency for functionality that belongs in the theme. No workarounds that break on the next Shopify update.

Content the team owns.

If a product FAQ needs updating or a headline needs a rewrite, that’s a same-day change for your team, not a ticket in a developer’s queue. We build the content layer so ownership sits with you by default, not as an afterthought.

A milestone review at every stage.

You review the actual work at each stage: design direction, theme in staging, integrations live, final QA. You always know what has been built and what is left. No month-long silences followed by a reveal.

Quality that does not depend on one person.

Every change is tested before it reaches you. Every section is reviewed across browsers and devices, not just on one screen. Nothing ships because one developer said it looked fine on their machine.

You own what we build.

At handover you get the full theme: Shopify Liquid source files, all custom CSS and JavaScript, metafield definitions, and documentation. Your team can take it forward independently or keep us on; that is your choice.

A founder-friendly working rhythm.

You review every milestone. The brief you gave us, the thing that makes your store feel like your brand and not a template, is what we build to. You are not a ticket number.

TECHNICAL NOTES

The Architecture and Tooling Powering the Uppeel Storefront

Theme Architecture

Custom Shopify theme built in Liquid using Shopify’s section and block system. Each homepage section and product template is a standalone Liquid file, configurable from the theme editor without touching code.

Two Product Templates

Two Liquid product templates, one for fragrance and one for body-care, extend the same base theme rather than forking it. Category-specific sections layer on top of shared theme logic, so both templates inherit fixes and updates together.

Metafield Architecture

Reusable Liquid sections read their content, FAQ, Before & After, and Why It Works from product-level metafields rather than hardcoded markup. Adding a new content block to a product means populating a metafield, not writing a new section.

Product Variant System

Redesigned variant selection built with vanilla Liquid and JavaScript. Faster switching, cleaner UI, and correct price / image / stock state on every selection.

Technical SEO

Robots.txt reconfigured for cleaner crawl paths. FAQ Schema markup added to relevant templates for rich-result eligibility. Google Merchant Center feed issues diagnosed and resolved to restore product approvals.

Customer Events & Analytics

Shopify Customer Events wired across the funnel so page views, product views, add-to-cart, and checkout events land in the analytics stack with the data the marketing team actually needs.

Performance

Section-level lazy loading for imagery and UGC videos, SCSS optimized for delivery, and no third-party app on the critical path. The store stays fast on mobile where most Uppeel shoppers arrive.

Landing Page System

Custom Cocoa Caramel landing page built as a reusable template so future flagship products can drop into the same layout system without a fresh design cycle.

Building on Shopify? Let’s engineer a storefront that matches your brand’s positioning and hands your team the controls.

Book a 30-minute call with our team. We will walk your brief, flag the gaps between your current store and your brand, and give you a clear delivery plan.

Book a call

webspero.com/contact
hello@webspero.com