Case Study: Converting Complex Figma Designs to Shopify for a Premium Beauty Brand

Industry: Clean Beauty & Skincare Approach: Full Custom Theme Development Timeline: 9 weeks Investment: $38,000 Design Complexity: High (unique layouts, custom animations, ingredient spotlight features)

The Client

Let's call them "Pure Essence" (anonymized for confidentiality).

They're a direct-to-consumer clean beauty brand selling premium skincare products made with plant-based ingredients. Think Drunk Elephant meets The Ordinary—science-backed formulations with minimalist, elevated branding.

Price range: $28-180 per product Product catalog: 45 SKUs across serums, moisturizers, cleansers, and treatments Target customer: Women 28-45, ingredient-conscious, willing to invest in quality skincare

The Challenge: Ambitious Figma Designs

Pure Essence hired a top-tier branding agency that created stunning Figma designs—but they were unlike any Shopify theme on the market.

What made the designs challenging:

1. Unique Homepage Layout

Not your typical "hero + product grid + testimonials" homepage.

Their design featured:

• Full-screen ingredient showcase (scroll-triggered animations showing key ingredients)
• Diagonal section transitions (angled dividers between sections)
• Floating product cards with hover depth effects
• Custom cursor that changed based on section
• Ingredient molecules as background animations

2. Ingredient-First Product Pages

Most beauty brands show product first, ingredients second.

Pure Essence's design flipped this:

• Ingredient spotlight hero section (before product images)
• Interactive ingredient breakdown (click each ingredient to see benefits)
• Scientific research citations (expandable with study links)
• Skin concern tags (acne, aging, sensitivity) with filtering
• Before/after gallery from real customers

3. Educational Content Throughout

The brand positioned itself as educators, not just sellers.

Design included:

• Inline ingredient glossary (hover any ingredient name for definition)
• "Why this works" expandable sections on every product
• Routine builder (customers build multi-step routines)
• Ingredient interaction warnings (some ingredients don't mix)

4. Custom Collection Experience

Not standard Shopify collection pages.

Design showed:

• Filter by skin concern, not just product type
• "Shop by ingredient" (show all products with hyaluronic acid)
• "Shop by routine step" (cleansers, serums, moisturizers)
• Visual ingredient badges on product cards
• Compare products side-by-side

5. Mobile-Specific Innovations

Desktop designs were complex. Mobile was even more ambitious:

• Swipeable ingredient cards
• Bottom sheet modals (iOS-style)
• Sticky routine builder bar
• Collapsible product info (accordion everything)

The designer's comment when handing off:

"We pushed the boundaries here. I know Shopify has limitations, but this brand deserves something special. Make it work."

No pressure.

Initial Assessment: What's Possible, What's Not

Before writing any code, we spent 3 days auditing the Figma files.

What we identified:

Achievable (with effort)

• Unique homepage layouts
• Custom product page structure
• Ingredient interaction features
• Educational content system
• Most animations (CSS-based)
• Mobile swipe interactions

Achievable (with compromises)

• Diagonal section transitions (possible but performance-heavy)
• Custom cursor (works desktop only, removed on mobile)
• Ingredient molecules animation (simplified version)
• Compare products side-by-side (built as popup, not inline)

Not feasible (had to redesign)

• Full 3D ingredient visualizations (Figma prototype showed WebGL 3D)
• Auto-generated routine recommendations (would need AI/ML, out of scope)
• Real-time inventory sync from multiple warehouses (backend limitation)

Our recommendation:

Build custom theme development (Approach #3 from our Figma to Shopify conversion guide).

Why not headless? Pure Essence didn't need checkout customization or extreme performance. Custom theme could achieve 90% of design vision at half the cost of headless.

Budget approved: $38,000 Timeline agreed: 9 weeks

The Conversion Process: Week by Week

Week 1: Foundation & Design System

Tasks:

• Set up local development environment
• Create style system from Figma
• Build component library
• Establish responsive breakpoints

What we extracted from Figma:

Color System:

[object Object], {
  ,[object Object],
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;

  ,[object Object],
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;

  ,[object Object],
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
}

Typography Scale:

[object Object], {
  ,[object Object],
  ,[object Object],: ,[object Object],, serif;
  ,[object Object],: ,[object Object],, sans-serif;
  ,[object Object],: ,[object Object],, sans-serif;

  ,[object Object],
  ,[object Object],: ,[object Object],;    ,[object Object],
  ,[object Object],: ,[object Object],;   ,[object Object],
  ,[object Object],: ,[object Object],;     ,[object Object],
  ,[object Object],: ,[object Object],;   ,[object Object],
  ,[object Object],: ,[object Object],;     ,[object Object],
  ,[object Object],: ,[object Object],;      ,[object Object],
  ,[object Object],: ,[object Object],;    ,[object Object],
  ,[object Object],: ,[object Object],;      ,[object Object],
}

Spacing System:

[object Object], {
  ,[object Object],: ,[object Object],;    ,[object Object],
  ,[object Object],: ,[object Object],;      ,[object Object],
  ,[object Object],: ,[object Object],;    ,[object Object],
  ,[object Object],: ,[object Object],;      ,[object Object],
  ,[object Object],: ,[object Object],;      ,[object Object],
  ,[object Object],: ,[object Object],;     ,[object Object],
  ,[object Object],: ,[object Object],;     ,[object Object],
}

Challenge #1: Figma used custom serif font not available as web font

Solution: Found similar Google Font (Cormorant Garamond) and adjusted letter-spacing to match feel. Got designer approval before proceeding.

Week 2-3: Homepage Development

The most complex page. 8 unique sections, all custom-built.

Section 1: Hero with Ingredient Molecules

Figma showed: Animated ingredient molecules floating in background.

What we built:

<!-- sections/hero.liquid -->
<div class="hero" style="background-color: {{ section.settings.background_color }}">
  <!-- Animated molecules -->
  <div class="molecules-container">
    {% for i in (1..12) %}
      <div class="molecule molecule-{{ i }}"
           style="
             top: {{ i | times: 7 | plus: 5 }}%;
             left: {{ i | times: 8 }}%;
             animation-delay: {{ i | times: 0.5 }}s;
           ">
      </div>
    {% endfor %}
  </div>

  <div class="hero-content">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.subheading }}</p>
    <a href="{{ section.settings.cta_link }}" class="btn-primary">
      {{ section.settings.cta_text }}
    </a>
  </div>
</div>

CSS for molecules:

[object Object], {
  ,[object Object],: absolute;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
  ,[object Object],: hidden;
  ,[object Object],: ,[object Object],;
}

,[object Object], {
  ,[object Object],: absolute;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],(circle, ,[object Object],(--color-sage) ,[object Object],, transparent ,[object Object],);
  ,[object Object],: ,[object Object],;
  ,[object Object],: float ,[object Object], infinite ease-in-out;
}

,[object Object], float {
  ,[object Object],, ,[object Object], { ,[object Object],: ,[object Object],(,[object Object],, ,[object Object],) ,[object Object],(,[object Object],); }
  ,[object Object], { ,[object Object],: ,[object Object],(,[object Object],, -,[object Object],) ,[object Object],(,[object Object],); }
}

,[object Object],
,[object Object], (,[object Object],: ,[object Object],) {
  ,[object Object], {
    ,[object Object],: none;
  }
}

Challenge #2: Diagonal section transitions

Figma showed: Each section had angled bottom edge, creating diagonal transitions.

What we tried first: CSS clip-path

[object Object], {
  ,[object Object],: ,[object Object],(,[object Object], ,[object Object],, ,[object Object], ,[object Object],, ,[object Object], ,[object Object],, ,[object Object], ,[object Object],);
}

Problem: Inconsistent rendering across browsers, weird gaps on mobile.

Final solution: SVG dividers

<svg class="section-divider" viewBox="0 0 1440 60">
  <path d="M0,0 L1440,60 L1440,0 Z" fill="{{ section.settings.background_color }}"/>
</svg>

Cleaner, more consistent.

Section 2: Featured Ingredients Carousel

Figma showed: Horizontal scroll of ingredient cards with parallax effect.

Built with:

• Swiper.js for carousel (lightweight, 30kb)
• Intersection Observer for scroll effects
• Custom Liquid loop for ingredient metafields

<div class="ingredients-carousel swiper">
  <div class="swiper-wrapper">
    {% for product in collections['hero-ingredients'].products %}
      <div class="swiper-slide">
        <div class="ingredient-card">
          <img src="{{ product.featured_image | img_url: '400x' }}"
               alt="{{ product.title }}"
               loading="lazy">
          <h3>{{ product.title }}</h3>
          <p>{{ product.metafields.custom.benefit }}</p>
          <a href="{{ product.url }}">Learn More</a>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

Challenge #3: Making sections editable in Shopify admin

Every custom section needed Schema settings so merchants could edit content without code.

Example schema for ingredient carousel:

{% schema %}
{
  "name": "Featured Ingredients",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section heading",
      "default": "Powered by Nature"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Ingredient collection"
    },
    {
      "type": "range",
      "id": "slides_per_view",
      "label": "Slides visible (desktop)",
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Featured Ingredients"
    }
  ]
}
{% endschema %}

This made sections merchant-editable while maintaining design integrity.

Week 4-5: Product Page Development

The most important page for conversion.

Challenge #4: Ingredient-first layout without confusing customers

Figma showed: Ingredients hero BEFORE product images.

Our concern: Customers might not understand they're looking at a product page.

Solution: Hybrid layout

Desktop:

• Left: Product images (sticky)
• Right: Ingredients spotlight + product info
• Scrolls ingredients while images stay visible

Mobile:

• Product images first (familiar pattern)
• Collapsible ingredient section
• Tab navigation: Overview | Ingredients | Reviews

Key feature: Interactive ingredient breakdown

<div class="ingredient-spotlight">
  <h2>Key Ingredients</h2>

  <div class="ingredients-grid">
    {% assign ingredients = product.metafields.custom.ingredients.value %}
    {% for ingredient in ingredients %}
      <div class="ingredient-card" data-ingredient="{{ ingredient.name }}">
        <div class="ingredient-icon">
          {{ ingredient.icon }}
        </div>
        <h3>{{ ingredient.name }}</h3>
        <p class="ingredient-percentage">{{ ingredient.percentage }}%</p>
        <button class="learn-more-btn" data-modal-trigger="{{ ingredient.name }}">
          Learn More
        </button>
      </div>
    {% endfor %}
  </div>
</div>

<!-- Modal template -->
<div class="ingredient-modal" data-modal="{{ ingredient.name }}">
  <div class="modal-content">
    <h3>{{ ingredient.name }}</h3>
    <p>{{ ingredient.full_description }}</p>

    {% if ingredient.research_link %}
      <a href="{{ ingredient.research_link }}" target="_blank" class="research-link">
        View Clinical Research →
      </a>
    {% endif %}

    <button class="modal-close">Close</button>
  </div>
</div>

JavaScript for modal interaction:

[object Object],
,[object Object],.,[object Object],(,[object Object],).,[object Object],(,[object Object], {
  trigger.,[object Object],(,[object Object],, ,[object Object], {
    ,[object Object], ingredientName = trigger.,[object Object],.,[object Object],;
    ,[object Object], modal = ,[object Object],.,[object Object],(,[object Object],);
    modal.,[object Object],.,[object Object],(,[object Object],);
    ,[object Object],.,[object Object],.,[object Object],.,[object Object], = ,[object Object],;
  });
});

,[object Object],
,[object Object],.,[object Object],(,[object Object],).,[object Object],(,[object Object], {
  closeBtn.,[object Object],(,[object Object],, ,[object Object], {
    ,[object Object],.,[object Object],(,[object Object],).,[object Object],(,[object Object], {
      modal.,[object Object],.,[object Object],(,[object Object],);
    });
    ,[object Object],.,[object Object],.,[object Object],.,[object Object], = ,[object Object],;
  });
});

Challenge #5: Handling products with 2 ingredients vs 12 ingredients

Problem: Figma showed perfect 6-ingredient grid. Some products had 2 ingredients, others had 12.

Solution: Responsive grid with CSS

[object Object], {
  ,[object Object],: grid;
  ,[object Object],: ,[object Object],(auto-fit, ,[object Object],(,[object Object],, ,[object Object],fr));
  ,[object Object],: ,[object Object],(--space-lg);
}

,[object Object],
,[object Object], (,[object Object],: ,[object Object],) {
  ,[object Object], {
    ,[object Object],: ,[object Object],(auto-fit, ,[object Object],(,[object Object],, ,[object Object],fr));
  }
}

,[object Object], (,[object Object],: ,[object Object],) {
  ,[object Object], {
    ,[object Object],: ,[object Object],(auto-fit, ,[object Object],(,[object Object],, ,[object Object],fr));
    ,[object Object],: ,[object Object],; ,[object Object],
  }
}

Grid adapts to any number of ingredients gracefully.

Challenge #6: Skin concern tagging system

Figma showed: Products tagged with skin concerns (Acne, Aging, Sensitivity, Dryness).

Implementation:

• Used Shopify product tags
• Built filter system on collections
• Added visual badges to product cards

{% if product.tags contains 'concern-acne' %}
  <span class="concern-badge concern-acne">Acne-Fighting</span>
{% endif %}
{% if product.tags contains 'concern-aging' %}
  <span class="concern-badge concern-aging">Anti-Aging</span>
{% endif %}
{% if product.tags contains 'concern-sensitivity' %}
  <span class="concern-badge concern-sensitive">Gentle Formula</span>
{% endif %}

Merchants can tag products in Shopify admin, badges appear automatically.

Week 6: Collection Pages & Filtering

Challenge #7: "Shop by Ingredient" collection

Figma showed: Click "Hyaluronic Acid" and see all products containing it.

Problem: Shopify collections can't dynamically filter by metafield values.

Solution: JavaScript-powered filtering

[object Object],
,[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], products = ,[object Object],.,[object Object],(,[object Object],);

  products.,[object Object],(,[object Object], {
    ,[object Object], ingredients = ,[object Object],.,[object Object],(product.,[object Object],.,[object Object], || ,[object Object],);
    ,[object Object], hasIngredient = ingredients.,[object Object],(,[object Object],
      ing.,[object Object],.,[object Object],() === ingredientName.,[object Object],()
    );

    ,[object Object], (hasIngredient) {
      product.,[object Object],.,[object Object], = ,[object Object],;
    } ,[object Object], {
      product.,[object Object],.,[object Object], = ,[object Object],;
    }
  });

  ,[object Object],();
}

Challenge #8: Compare products side-by-side

Figma showed: Click "Compare" on 2-3 products, see inline comparison.

What we built: Comparison modal (more practical for small screens)

<div class="product-comparison-modal">
  <table class="comparison-table">
    <thead>
      <tr>
        <th>Feature</th>
        {% for product in comparison_products %}
          <th>
            <img src="{{ product.image }}" alt="{{ product.title }}">
            {{ product.title }}
          </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Price</td>
        {% for product in comparison_products %}
          <td>{{ product.price | money }}</td>
        {% endfor %}
      </tr>
      <tr>
        <td>Key Ingredients</td>
        {% for product in comparison_products %}
          <td>{{ product.key_ingredients }}</td>
        {% endfor %}
      </tr>
      <tr>
        <td>Skin Concerns</td>
        {% for product in comparison_products %}
          <td>{{ product.concerns }}</td>
        {% endfor %}
      </tr>
    </tbody>
  </table>
</div>

Week 7: Mobile Optimization

Challenge #9: Mobile designs were too ambitious

Figma showed:

• Bottom sheets (iOS-style)
• Swipe gestures everywhere
• Collapsible everything

Reality:

• Bottom sheets require complex JavaScript
• Too many swipe areas confuse users
• Over-collapsed content hides important info

Compromises we made:

1. Simplified bottom sheets Used standard modals with slide-up animation instead of true bottom sheets.

2. Reduced swipe interactions Only used swipe for:

• Product image galleries
• Ingredient carousels
• Horizontal product scrollers

Removed swipe-to-reveal, swipe-to-delete patterns.

3. Smart collapsing Kept visible by default:

• Product price
• First 2 ingredients
• Add-to-cart button

Collapsed:

• Full ingredient list
• Research citations
• Shipping details

Mobile-specific CSS:

[object Object], (,[object Object],: ,[object Object],) {
  ,[object Object],
  ,[object Object], {
    ,[object Object],: ,[object Object],;
    ,[object Object],: ,[object Object],;
    ,[object Object],: ,[object Object],;
  }

  ,[object Object],
  ,[object Object], {
    ,[object Object],: block;
  }

  ,[object Object],
  ,[object Object], {
    ,[object Object],: sticky;
    ,[object Object],: ,[object Object],;
    ,[object Object],: white;
    ,[object Object],: ,[object Object],;
    ,[object Object],: ,[object Object], -,[object Object], ,[object Object], ,[object Object],(,[object Object],,,[object Object],,,[object Object],,,[object Object],);
    ,[object Object],: ,[object Object],;
  }

  ,[object Object],
  ,[object Object], { ,[object Object],: none; }
  ,[object Object], { ,[object Object],: block; }
}

Week 8: Testing & Refinement

What we tested:

1. Visual QA

• Side-by-side comparison with Figma on 3 screen sizes
• Typography size and spacing verification
• Color accuracy (hex values matched)
• Animation smoothness

2. Cross-browser Testing

• Chrome (95% of traffic)
• Safari (both iOS and macOS)
• Firefox
• Samsung Internet (Android)

Found issues:

• Safari: Sticky elements had rendering bugs
• Firefox: SVG dividers had 1px gaps
• Mobile Chrome: Ingredient modals flickered on open

Fixed all before launch.

3. Performance Testing

Initial results:

• Desktop: 2.8s load time
• Mobile: 4.1s load time (too slow)

Optimizations:

• Lazy loaded images below fold
• Deferred non-critical JavaScript
• Minified and combined CSS
• Optimized hero images (WebP format)
• Removed unused Swiper.js modules

Final results:

• Desktop: 1.4s load time
• Mobile: 2.2s load time

4. Content Testing

Added real products with edge cases:

• Product with 2 ingredients ✓
• Product with 14 ingredients ✓
• Product with 40-word title ✓
• Product with empty description ✗ (broke layout - fixed)
• Product with 1 image ✓
• Product with 12 images ✓

5. User Testing

Brought in 5 target customers to test:

Feedback:

• "Ingredient info is amazing, so helpful"
• "Love the clean design"
• "Took me a second to realize ingredients section scrolled"
• "Wish I could see product price without scrolling" (on mobile)

Fixed:

• Made sticky header on product page show price
• Added visual hint that ingredients section is scrollable

Week 9: Launch & Training

Pre-launch checklist:

• All pages built and tested
• Responsive verified on 10+ devices
• Performance optimized
• SEO tags configured
• GA4 installed
• Product metafields documented
• Admin training video recorded

Merchant training:

Created 30-minute video showing:

• How to add products with ingredient data
• How to use custom sections
• How to edit homepage
• Where settings are located
• Common troubleshooting

Launch day:

• Went live Friday 10am PST (lowest traffic day/time)
• Monitored for 4 hours
• No critical issues
• Mobile traffic 68% (as expected)

The Results

Design Achievement

Match to Figma designs:

• Homepage: 95% (removed 3D molecules, simplified some animations)
• Product page: 90% (hybrid layout instead of pure ingredients-first)
• Collections: 85% (comparison as modal instead of inline)
• Mobile: 80% (simplified some interactions)

Overall: 90% match to original vision

Areas where we compromised were approved by designer beforehand.

Performance Metrics

Business Impact (First 3 Months)

Revenue impact:

Before: $42K monthly average After: $78K monthly average (+86%)

The ingredient-focused design positioned them as educators, building trust that converted. This aligns with conversion optimization best practices and effective ecommerce funnel strategy.

Qualitative Feedback

From customers (reviews and support tickets):

• "Finally a brand that explains what's actually in their products"
• "The ingredient info helped me choose the right serum"
• "Love how easy it is to find products for my skin concerns"
• "Website loads fast and looks professional"

From Pure Essence team:

• "We get compliments on our website daily"
• "Conversion rate doubled - the design is working"
• "Easy to add new products, even with complex ingredient data"
• "Worth every penny"

Investment Breakdown

ROI:

Monthly revenue increase: $78K - $42K = $36K Investment payback: 38 ÷ 36 = 1.06 months

Paid for itself in 5 weeks.

Ongoing benefit continues as traffic grows.

Key Lessons Learned

1. Design audit before coding is essential

3 days upfront saved weeks of rework. We identified unfeasible features before building, got designer buy-in on compromises. Our design review process is crucial for project success.

2. Mobile requires separate design thinking

Can't just shrink desktop designs. Mobile patterns are different. We should have pushed for mobile mockups earlier.

3. Edge cases break beautiful designs

Products with 2 ingredients vs 12 ingredients, long titles vs short titles—every variation needs handling. Test with worst-case content.

4. Performance matters more than perfect animations

We removed some Figma animations because they hurt performance. Fast site > perfect animation.

5. Merchant editability is critical

Custom theme is useless if merchants can't update content. Every section needed Schema settings and clear documentation.

6. Real user testing reveals issues designers and developers miss

5 user tests found problems we never noticed: "Can't see price," "Didn't realize it scrolled," etc.

7. Compromise is not failure

We achieved 90% match to Figma. The 10% we couldn't build didn't hurt the final product. Perfect is enemy of good.

What We'd Do Differently

1. Request mobile designs upfront

Designer only provided desktop. We designed mobile ourselves. Should have required mobile mockups as part of original design.

2. Prototype complex interactions earlier

Built ingredient modal system twice—first version didn't work on mobile. Should have prototypated in browser before full build.

3. Set clearer animation expectations

Some Figma animations looked amazing but were performance killers. Should have discussed animation feasibility during design phase.

4. Plan for content creation

Ingredient data required significant content work (writing benefits, finding research links). Should have accounted for this in timeline.

Technical Specs

Built with:

• Shopify Liquid
• Custom theme (not based on existing theme)
• Vanilla JavaScript (no jQuery)
• CSS custom properties (variables)
• Swiper.js (carousel library)
• Intersection Observer API (scroll effects)
• Local storage (comparison feature)

Browser support:

• Chrome 90+
• Safari 14+
• Firefox 88+
• Edge 90+

Hosting:

• Shopify's standard hosting (no additional cost)

Maintenance:

• 2 minor bug fixes in first month
• 1 new feature request (subscription module - separate project)
• Theme updates handled by ScaleFront (support retainer)

Final Thoughts

Converting Figma to Shopify is never "just copy the design."

It's:

• Understanding web constraints
• Building flexible systems
• Handling content variability
• Optimizing performance
• Making compromises strategically

Pure Essence's results prove the investment is worth it:

Custom theme cost $38,000. Generic theme would have been $300.

But custom theme:

• Doubled conversion rate
• Increased monthly revenue by $36K
• Paid for itself in 5 weeks
• Continues delivering value

The difference between adequate and exceptional is $38,000.

For Pure Essence, it was a no-brainer.

Need help converting your Figma designs to Shopify? We've converted 50+ designs and know how to bridge the gap between design vision and technical reality.

Schedule a design review or see our Shopify development work.