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.
To build this type of carousel in Replo, we can leverage two features: the carousel component, and Relative To Container positioning.
- 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.
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.
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.
About Replo
Today there are millions of ecommerce businesses built on platforms like Shopify, but developing websites for them is still a terrible experience. Marketing, design, and engineering teams all have to collaborate together to create content, but complex code and 15+ year old tech on platforms like Shopify create huge headaches for teams.
Replo is a new visual web development platform for high-performance, brand-driven teams on Shopify. Replo empowers brands and agencies to create beautiful pixel-perfect landing pages on Shopify - without developers. The product is an easy to use drag-and-drop editor that allows you to visually build React applications, starting with ecommerce. It’s backed by our super-flexible content management system and commerce APIs which integrate with 3rd-party platforms, including product, subscription, and user-defined data.
Replo is light years ahead of other page builders for customizability and page speed, and used by a ton of Shopify Plus brands and agencies. Replo’s template library has hundreds of proven landing pages and sections that anyone can use, as well as certified Experts that help build brand new landing pages in just a few days.
Get started with Replo today at https://replo.app