Deck of Scarlet

The client came to us with an already polished design for both desktop and mobile. In theme development, just implementing a layout is simple – one of the major parts of the work is thinking through the logic behind each element, and how theme design and functionality should work together. Here are some of the most interesting custom elements we implemented in the Deck of Scarlet theme.

This block on the main page provides the possibility to see what was used to create these particular makeups, thus helping customers to make a purchase. On mouse hover, a photo becomes colorized and some points appear on the faces of the models, featuring a specific product. The points are clickable, and by clicking on them a small popup appears with the name of the product, its price, and the “Shop Now” button. Also, if the product is currently out of stock, the expected resupply date will be indicated.

This element, like the rest of the theme, is fully customizable from the corresponding theme setting. The store admin can change any element, from the background photos to the popup details. The points themselves can be attached to any product from the store, and moved anywhere on the photo by setting the coordinates on the X- and Y-axes.

This functionality is also accessible for people with disabilities both from the keyboard and with a screen reader.

Throughout the whole website, there are places with highlighted text. This text is not hardcoded into the theme; it can be changed on any page of the website via the theme settings. It’s possible to highlight any text and choose any color for the background. The same is true for the main banners, where each element can be set up as well: all colors, fonts, text highlights, and backgrounds can be customized to fit any photo shoot or product.

In an ordinary theme, these banner images would be static, with the need to create new banners for even minor changes. With custom development, anything can be done through the theme settings with just several clicks.

This element is an example of a unique interface design and user experience that comes with a custom theme. In a typical store, the “Shop” menu tab takes customers to a page with all collections from a store in one place, which often looks messy. In the Deck of Scarlet theme, “Shop” leads to another submenu that is simple, elegant, and easy to navigate.

The background color of the menu changes depending on the page where the customer is at the given moment. If the page is white, the menu would be white as well, with the same for the black backgrounds. This is all configurable by the store admin through the theme settings, with the possibility to set any color scheme. The font color is changed accordingly, making the menu always stylish and easy to read.

In a typical store, the Instagram feed is the same throughout the whole website. In the Deck of Scarlet theme, it is different on every page: for the “Lips” collection, the posts with the focus on lipstick are shown, while photos with highlighter would be uploaded to a corresponding page. This functionality is implemented via tags that are added to each photo, and it allows customers to get the most out of every product page by seeing everything that can be done with the presented products.

Another thing worth mentioning is how securely the feed is embedded into the theme. Usually a feed is added to a website with the help of special API services. As these services are free, it often happens that they stop working at times, making the feed on a website just white squares instead of posts. To prevent this, we connected the feed with two additional API services. If the first service is disabled, the second one does the job, and if it for some reason also stops working, there is the third service, and so on. This way it’s impossible for the feed to be disabled because there is always a backup plan.