As part of our series on the best Shopify themes for luxury brands, we're kicking off with French design and development studio Maestrooo's stunning Shopify theme, Prestige.

Design

Prestige is clean and minimal in design. It places product and editorial imagery front and center and features subtle animations that give it a polished feel.

It’s a minimalist design system that just works and requires minimum effort to look good.

The color palettes are very simple – for buttons, you only have to choose a background color and text color for your primary button, and then your light text color is used for the secondary “ghost” button. It’s a minimalist design system that just works and requires minimum effort to look good.

The theme’s typography settings are equally simple. For headings, you can select the font family, relative size and whether headings should be uppercase. In terms of body text, you can select the font family and the base size in pixels.

In future versions we would love to see font sizing set in units relative to the browser font size (a unit called rem) so the font size adapts to each user's browser preferences. We're always surprised at how many people change their default font size!

Three presets

The theme comes with three presets which all add a different twist to the Prestige design system and shows what you can achieve for different types of aesthetics.

“Allure” is the more traditional of the three with its light gray background and uppercase headings.

“Couture” has a slightly more modern and airy feel.

Couture preset

“Vogue” demonstrates how you can be a little more daring with your color palette with its light gold buttons.

Vogue preset

Features we love

As well as the usual components and sections that you expect on a premium Shopify theme (announcement bar, slideshow, featured product, etc.) there are also a number of sections that make Prestige perfect for luxury brands in particular.

Mega menu

A mega menu is an expandable menu that lays out all the options in a given category instead of the user having to drill down into a more traditional tiered dropdown menu.

They are especially effective for larger sites with lots of categories as they allow users to quickly scan text and imagery.

An expanded mega menu on the Vogue preset

In the above example, we see a three-tier menu that would require the following set-up in the Shopify Dashboard:

• Tier 1: Skincare is the top-level link
• Tier 2: "Shop" is nested inside Skincare
• Tier 3: The links below “Shop” are nested inside “Shop”

Prestige allows you to create as many mega menus as you like; you simply specify to which top-level navigation link it should be tied in the Customizer and it replaces the default dropdown format.

Prestige also allows you to add up to two "Image push" blocks, where you can feature any image and text you like. These are great to draw attention to new products, collections or another feature.

Another feature is that the theme allows you to select a mobile-only menu (“Sidebar menu” in the Customizer), which is handy if you're using mega menus since those may not look as good on compact screens.

A well-designed product slideshow

The product page’s sleek vertical image slideshow that reveals itself as you scroll means that customers can discover additional images effortlessly. This is important because research has shown that users often scroll right past slideshows, missing any content other than what’s shown in the first slide.

Vertical product slideshow on the Couture preset

On mobile the slideshow does become a traditional horizontal swipe experience, but with fewer elements on-screen and the pagination dots and chevrons clearly indicating that it’s interactive and which way to swipe, we feel that it’s a strong approach for mobile users.

Shop the look

The “Shop the look” section allows you to make editorial-style images shoppable.

This can be a single section or a slideshow of up to four shoppable looks. For each look, upload the image, then add up to three product hotspots.

“Shop the look” on the Allure preset

Timeline

The “Timeline” section is great for telling the brand’s story. Luxury brands are built on their heritage, the stories of the women and men behind them, the inspiration and muses they found along the way. This section provides a neat structure to tell those stories.

“Timeline” on the Couture preset

Recently viewed products

The “Recently viewed products” is a powerful feature that’s commonly seen on larger e-commerce websites. It keeps customers’ attention on the products they have looked at (and therefore shown an interest in), and also removes any friction once they do decide to go ahead and purchase it since it’s just a click away.

Color swatches

When enabled, this functionality converts the default variant selector to color swatches instead. This is really useful for products with multiple colors, textures or finishes.

Example product with solid color swatches (photo credit: Creative headline)

To enable swatches on the product page:

• For relevant products, ensure that the color option name is “Color”
• In the Customizer, on the Product page under Variant selector, check “Show color swatch”

Prestige allows merchants to display either solid colors or small images that are representative of the texture or finish.

How to add custom swatch colors

By default, Prestige looks at the color name of the variant and then displays the corresponding CSS color, so if the variant is "Green" then it will be this green.

If these default colors don't match the product color IRL, you can add custom colors for each color name. Open “Theme settings”, look for the “Color swatch” setting and add each custom color on a separate line.

The syntax for each color name is as follows:

Pink: #7A7CBA

How to add custom swatch images

Alternatively, if a solid color doesn't represent the product accurately, you can upload small PNG images to your theme.

The file name should be lowercase, match the exact option name and spaces should be converted to dashes. Here are the full instructions.

When it comes to colors, don't hesitate to ask for input from different eyes – we’re always amazed at how differently we perceive colors!

Buy it with

Also on the product page, the “Buy it with” block.

“Buy it with” on the Couture preset

This functionality allows you to display a cross-sell product directly on the product page – and with the new “dynamic source” functionality introduced with Online Store 2.0 which allows merchants to pull in data from metafields, that means you can hand-pick related products instead of just displaying the same product for all products.

Which might sound obvious to some but this is something long-time Shopify merchants and developers have been wishing for!

Product inventory

The “Product inventory” block available on the product page is also great for high-end products, since they are usually produced in lower volumes and that sense of scarcity can really add to the desirability of the product.

Pop-up

Prestige has a built-in “pop-up” functionality that allows merchants to display text and/or a newsletter sign-up form.

“Pop-up” on the Allure preset

Note that this newsletter form by default creates the customer in your Shopify Dashboard with the relevant Accepts Marketing attributes (it also adds a newsletter tag to those customers). You can then sync your subscriber list to your e-mail marketing platform. Here are the instructions for Klaviyo.

What’s great about this pop-up is that it’s unobtrusive – especially on desktop – and it’s quite obvious how you can dismiss it, which is great for customer experience.

That being said, it’s important to note that search engines can penalize intrusive pop-ups on mobile, especially when the pop-up is displayed permanently and/or displayed to all visitors. Here’s a Q&A video of Google’s John Mueller on the topic.

Luckily Prestige offers settings to choose where and when to display the pop-up, but we always advise merchants to tread carefully with pop-ups and make sure that they’re actually enhancing the customer experience.

A luxury product speaks for itself through its beauty and craftsmanship – there is no need to talk over it.

On a related note, luxury sales are all about the “soft sell” approach. A luxury product speaks for itself through its beauty and craftsmanship – there is no need to talk over it. Pop-ups and shouty headlines can erode the image of a brand, so we recommend extra caution for brands that serve high-end customers.

Technical

With each version of Prestige, the Maestrooo team have made leaps and bounds in terms of technical excellence and performance.

Performance

Shopify sites can be slowed down by all manner of things, from apps to Facebook pixels and everything in between.

Thankfully, Shopify takes care of some big-hitters for us: they leverage browser caching, provide a world-class Content Delivery Network and enable automatic CSS and JavaScript minification, Gzip compression and JPG compression for all their merchants.

But there's so much more that impacts a website's performance. How do we evaluate Prestige itself among all these moving parts?

Let's start with the Liquid

Liquid is the templating language used in Shopify themes. It creates a bridge between the theme templates and the Shopify store data, allowing for dynamic content to be inserted on-page.

Poorly-written Liquid such as excessive loops and conditions can impact the time it takes to render the Liquid. A good tool to evaluate code quality is the Shopify Theme Inspector tool, which allows us to measure a given page’s total time to render Liquid.

Example profile on Shopify Theme Inspector tool

We compared Dawn, Shopify’s own Online Store 2.0 theme, to Prestige’s Allure preset, with no content added except for default sections and blocks, and found that the average total time to render Liquid was actually faster on Prestige: the average load time was 155ms compared to 177ms on Dawn.

Of course this metric is heavily reliant on the type of sections and blocks that are in use, and also varies slightly each time a page is profiled since the rendering depends on Shopify’s servers. To get as close to a fair test as possible (and because we fancy ourselves as armchair scientists), we did carry out three measurements per key page and averaged those out.

Handling images

When it comes to poor performance, images are often the biggest culprit. While Prestige can't prevent us from uploading a huge, oversized image (though Shopify will protest at 20MB), it does have some solid precautions in place to optimize for performance.

For example, it uses resolution switching, which allows the browser to choose different image sizes dependent on the screen width.

The theme also provides recommended image sizes in the Customizer to gently remind us to upload a large enough image, but not so large that it slows everything down.

Example of Prestige's recommendations for image sizes

Render-blocking resources

By default, resources such as stylesheets and scripts (specifically, those loaded in the head of the document) delay the rendering of a page while they are being downloaded. However, many resources aren't actually critical and can be downloaded asynchronously instead.

Prestige does a good job of loading non-critical scripts asynchronously. In future versions we'd love to see Prestige loading the main stylesheet asynchronously and potentially adding above-the-fold styles inline.

Ongoing performance measures

Prestige provides a solid base performance-wise, but the rest really is up to each individual merchant. Here are a few tips for maintaining your Shopify store's performance post-launch:

• Take great care when adding new apps as these can often have a big impact on performance. Consider partnering with a developer to build a custom solution instead, or ask the developer to assess the app before installing it.
• Systematically resize and compress images before uploading them (Squoosh is our new favorite image compression tool).
• Think through new content to avoid unnecessary slideshows, large images, videos or worse – GIFs. Every element you add weighs down the website, so choose carefully!

Accessibility

The Maestrooo team has made great efforts to ensure that key content can be comfortably navigated by screen reader or keyboard alone.

For example, it’s possible to access all the content in dropdowns and mega-menus in the header, and focus is both visible and logical. The product page can be navigated and interacted with by keyboard alone. They have also added screen reader-only labels when additional context is needed, such as in the language dropdowns.

In future versions, we would love to see the theme adapt animations to users' system-level motion preferences. This setting is for users who get motion sickness or discomfort from animations on the web and who wish to indicate that they prefer reduced motion.

Progressive enhancement

Progressive enhancement is the practice of ensuring that a website is usable without JavaScript, and then using JavaScript to further enhance the experience.

Why is this a thing? Because according to past research by Yahoo (archived link) and the UK’s Government Digital Service, between 1% and 2% of users could be navigating the web without JavaScript.

Here’s a neat little visual of all the reasons why users might not have JavaScript, besides users voluntarily disabling it in their browser in the first place.

Progressive enhancement is especially important for e-commerce websites, and Maestrooo have clearly worked hard to ensure that the majority of Prestige’s functionality is available to users who have disabled JavaScript.

In summary

Prestige is a high-quality theme that allows luxury brands to quickly and easily showcase their products and tell their story.

It’s particularly effective for brands that have stunning high-resolution images, providing an elegant and solidly-built stage for the products to speak for themselves.

It is a popular theme so give it your own twist to stand out, or use it as a solid base for your own custom design.

Feedback or questions? We'd love to hear from you! Email us at hello@ultrafine.co.