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.
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.
- 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.
- 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.
- 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.
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.
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:
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.