Probiotic supplements brand · United Kingdom · Private client

Figma to Shopify: custom homepage, sliders, product page and mega menu

Role: Frontend Developer (Figma to Shopify) · Completed Oct 2024

Store builds & redesigns

In short

  • Turned a Figma mockup into a fully branded Shopify homepage with custom sliders, a product page matched to the mockup, and a mega menu with a sliding hover effect, all fully responsive.
  • Client: Probiotic supplements brand (private client).
  • Client location: United Kingdom
  • What I built: Transformed the Figma mockup into a fully branded Shopify homepage.
  • Main tech: Figma, Shopify Liquid, JavaScript, CSS.
The brief

What the store needed

  • The brand had a Figma mockup and needed it built faithfully in Shopify, on desktop and mobile.
The work

What I did

  1. Transformed the Figma mockup into a fully branded Shopify homepage.
  2. Developed a custom slider for several sections, optimized for desktop and mobile.
  3. Tailored the product page to match the mockup.
  4. Customized the mega menu with a sliding effect on hover over collection links, fully responsive.

Want more details about this project?

Client details are private, but I'm happy to walk you through how I built this and how a similar solution could work for your store. Message me on Upwork to arrange a free 30-minute call and mention this project.

Free 30-Minute Call

Project reference: Figma to Shopify: custom homepage, sliders, product page and mega menu

Tech & keywords

Tech & keywords

FigmaShopify LiquidJavaScriptCSSGit
Client review

Client review

5.0Oct 2024

Upwork project: Ongoing shopify work

Great freelancer to work with

Collaborative
Verified client review on Upwork
See this review on the reviews page →
Let's get started

Need something similar?

Message me on Upwork to arrange a free 30-minute call. Tell me what you want to build or fix, and I'll reply with a timeline and estimate.

  1. 1 Your store URL, or just your product if you're starting fresh
  2. 2 Your budget
  3. 3 What's not working, or what you want to build

Privacy

This site uses Google Analytics to understand how visitors use the page, such as which sections are viewed and which links are clicked. Google Analytics uses cookies and collects data like your approximate location, device and browser. I don't run ads on this site, I don't sell your data, and I don't collect your name or email here.

You'll be asked for your choice when you first visit. If you close the banner without choosing, analytics cookies stay off and you'll be asked again in 30 days. Your choice is saved in a small cookie for 6 months.

Learn how Google uses this data: policies.google.com/technologies/partner-sites

Philip DiazAvailable for new projects 4.9·Top Rated on Upwork Free 30-Minute CallFree 30-Min Call

Cookie settings

Strictly necessary

Remembers your cookie choice. Always on.

Analytics

Google Analytics, to see which sections are viewed and which links are clicked.