2022-07-07

Build a D2C skincare homepage like Sunnies Faces with Replo

Noah Gilmore

Noah Gilmore

Sunnies Face In Replo

Sunnies Face is a lipstick brand that aims to thread the needle between an elevated, elegant lip look and an affordable price point. Developed in the Philippines and eventually expanded to serve a global audience, Sunnies Face lipsticks are cruelty free, fragrance free, and sustainably produced - they even donate 1% of all sales back to 1% For The Planet, which distributes it to environmental causes.

Today we’ll go through a few different components of the Sunnies Face homepage, and how they can be built in Replo.

Carousel Hero

The Sunnies Face homepage features big, bold imagery that puts the striking color of their product front and center. The carousel at the top of the page serves a double purpose: the first four slides highlight featured products, and the last slide has a call to action to learn more about Sunnies Face’s mission and story.

Sunnies Face Homepage Carousel

To build this type of carousel in Replo, we can leverage two features: the carousel component, and Relative To Container positioning.

  1. To create a carousel component, we can start with a template and make sure the images inside are full width, to achieve the big, bold effect.
  2. Each product will have a title, subtitle, and a button which links to the product page - these can be grouped in a container with Relative To Container positioning, and positioned relative to the lower left corner of the carousel.
  3. Then, each slide can be copy/pasted and the component can be changed to highlight a different product.

Learn more about carousels in the Replo documentation.

Scrolling Ribbon

There’s one other feature of the page we wanted to zoom in on while recreating it - the scrolling “Best Lip Ever” bar.

Many D2C brands nowadays feature a scrolling ribbon like this - it’s subtle, but it catches the eye and makes the experience more interactive and interesting than a static page.

Sunnies Face Scrolling Ribbon

To create this in Replo, we can use the Ticker component. After dragging in the default ticker ribbon from the component library, we actually almost have exactly what we want - after some text styling, we have great-looking, understated ribbon that brings the page to life. Learn how to create the ticker component in this video:

Conclusion

We’ve recreated these parts of the amazing Sunnies Face homepage and made them available in Replo. If you want to start with a similar page for your brand, get started at replo.app/install.

Get the Latest

E-commerce interviews and tips delivered weekly

We will never send you spam. Read ourPrivacy Policy.