Shopify Theme Review: Prestige
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.
|Created by||Maestrooo, a French design and development studio|
View on Shopify Theme Store
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!
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.
“Vogue” demonstrates how you can be a little more daring with your color palette with its light gold buttons.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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!
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.
Prestige has a built-in “pop-up” functionality that allows merchants to display text and/or a newsletter sign-up form.
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.
With each version of Prestige, the Maestrooo team have made leaps and bounds in terms of technical excellence and performance.
Shopify sites can be slowed down by all manner of things, from apps to Facebook pixels and everything in between.
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.
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.
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.
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!
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.
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.