ELEFFECT TAN || Convert Figma Into Custom Shopify Theme

Eleffect is a skincare brand offering products formulated with various active ingredients and unique benefits.

Challenge
Products contained multiple active ingredients, each with specific benefits and usage information.

• Standard Shopify product pages were not sufficient to clearly and visually represent this information.

• The client wanted to ensure customers could easily read and understand ingredient breakdowns to build trust and transparency before purchasing.

Solution
Leveraged Shopify Metafields to store structured data for each product’s ingredients.

• Created a custom section on the product page that dynamically displays:

  • Ingredient name

  • Description

  • Benefits

  • Icons/visual elements (if included)

• Designed a tabbed interface labeled “Ingredients” that displays ingredient details clearly and accessibly.

• Built the logic so customers are more likely to read and understand each ingredient — improving clarity and trust.

• Ensured every layout, component, and interaction matched the design specifications.

• Used modern Liquid, CSS, and JavaScript for clean structure, modularity, and maintainability.

Results

Improved Product Page Clarity
Customers can now easily understand what goes into each product, building trust and supporting purchase decisions.

Scalable Ingredient Framework
Metafields allow the client to add new products and ingredients without theme changes.

Design Integrity & Performance
The custom theme fully reflects the Figma design with responsive layout, smooth UI elements, and fast loading.