![[Reopening Plan] What’s common between Macy’s, Gap and Tobi Online Stores](https://amasty.com/blog/wp-content/uploads/2020/05/reopening-clothis-stores.jpg)
Reopening after the pandemic, many clothing retailers get their business back on track with the updated shopping experience.
We took Macy’s, Gap, and Tobi e-shops and analyzed:
- how these stores market their brand and products on the homepage, category and product pages,
- how coronavirus influenced their offer,
- what they have in common when presenting their products,
- and how to add the desired elements to your Magento 2 store.
Article summary
#1. Gap
Founded in 1969, the brand has become globally recognized and now offers casual clothes for people of all ages and nationalities.
Homepage
value proposition
In times of social distancing, at Gap, they focus on their teams’ and customers’ health. However, you won’t find any acid-colored shouting banners, but a simple white bar with a thin line of text saying users that the store has put interim limits on some shipping options. At the same time, here you also see all the offers available exceptionally for you.
Magento2: How to add promo banners? How to limit promotions based on the total sales amount?
images quality
All images are in a high resolution, banners are non-zoomable leading to the targeted pages. Gap uses interactive elements on their banners navigating you directly to the products you need, like this shop-it-now button.
They adapted the production to the current marketing situation and launched non-medical cotton masks manufacturing.
All the images are taken in the same place and stylistics. This makes the page look clear and minimalistic.
Magento2: Why use images in WebP? When to use lazy loading?
call-to-action
Every banner expresses the main idea in 3 to 8 power words like:
- shop
- get on our list
- shop the collection
- earn
- start
- go, cash out
navigation
The upper horizontal navigation menu allows users to filter products by their favorite brands, whereas the lower one clusters products by categories of interests. Mainly, the clothes are sorted by different age groups.
Magento2: What’s the difference between the Lite, Shop-by-Brand, Pro navigation, and what’s your ideal match?
contact information
Scrolled down, you’ll see the Customer Support menu with Store Locator. The map shows the nearest location of brick-and-mortar shops by your ID. If you need to see shops at another location, simply fill in the information into the search bar.
Magento2: How to add store locator? How to add a Google map?
loading speed
The results showed a few points for mobile speed improvement, though the desktop performance is above the average.
Magento2: How to speed up your mobile pages’ loading?
Catalog pages
navigation and filtering
The homepage goes with a rich horizontal navigation menu leading users to the pages of interest. Say, choosing Men → Jeans category you get to a page where at the header you see a gallery of jeans’ models.
You can filter the products by model, and then decide on the size, color, and pricing, then go to the product page.
Magento2: How to create virtual categories?
Product page
product title
product description
Magento2: How to add custom product labels? How to display prices and colors of simple products?
high-quality images
Gap gives zoom-in images from all product angles, shows how the fabric behaves under tension.
And presents a loop video for a better understanding of how the product will look in life.
Magento2: Why use lazy loading?
cross-selling blocks
The page has embedded blocks with wear-it-with, customers-also-viewed, and customers-also-liked clothing.
Magento2: How to relate products automatically?
product reviews
Magento2: How to add a star rating? How to display users’ questions on products?
Run-through
This shop has a laconic design, which you can’t help but notice from the first visit. The home page isn’t overloaded with massive %-discount-attacking banners and at the same time, navigates users to categories of interest at seconds.
Having reviewed the categories, we can say that at Gap, they know their targeted audience and their preferences.
The product page is substantial and helps users make their ideal choice faster. The video content and high-quality zoom-in help shoppers virtually ‘feel’ the fabric. The additional cross-selling blocks don’t distract attention but help users build a new wardrobe based on the basic product they’ve just chosen.
#2. Tobi
Based in LA, the retailer sells party looks and athleisure for women and delivers it to 100+ countries.
Homepage
value proposition
At Tobi, you won’t see anything related to anti-COVID marketing, except a few banners’ call-to-actions saying about happy hours in Zoom.
Once you get to the homepage, you understand the brand’s value proposition – this is a fast-fashion, West Coast style clothing shop for young women all over the world.
images quality
The brand uses high-resolution image banners and galleries of simple design. And what’s interesting is that they embedded an Instagram widget with user-generated content and their account approved for shopping. Obviously, their target audience prefers this social network to others and wants to be featured in the block on the main page.
Magento2: How to add an Instagram widget to your store?
call-to-action
- show,
- dive in (the new stuff is here), etc.
navigation
Magento2: How to add a hamburger menu to the category tree?
contact information
Magento2: How to create a multi-functional contact-us page?
loading speed
The desktop loading speed is close to perfect, whereas the mobile needs for improvements. Though, surfing the pages from both mobile and desktop, no glitches occurred.
Magento2: How to speed up your pages’ loading?
Catalog pages
navigation and filtering
Navigating to Shoes → Sneakers, you turn up on the category page with standard color-size-price filters and sort-by drop-down options.
Product page
product title
product description
Magento2: How to attach pdf or mp3 manuals to products?
product images
The high-quality images from all product angles are arranged into a zoom-in gallery under which you can find social sharing buttons.
Magento2: How to reduce image size without affecting the quality?
cross-selling blocks
At the bottom of the product page, you’ll see blocks with recently viewed products, new arrivals, and related categories.
Magento2: How to relate products automatically?
product reviews
There’re no reviews for the products.
Magento2: How to add rich ratings to products? How to let users ask questions on product pages?
Run-through
The website looks as laconic as the Gap’s. Its design is fresh and incorporated with trendy elements like the Insta widget for generating users’ content. The homepage has a clear top navigation menu with categories of interest.
The catalog page is easy to filter and find the desired product in seconds. The product page isn’t overwhelmed with odd discount offers and options distracting users’ attention from the product. Basic filters and additional product information are in place for completing a purchase.
As well as Macy’s, the website is equipped with accessibility adjustments, which broadens the target audience.
#3. Macy’s
Founded in 1858, the holding company was renamed and known as Macy’s only since 2007. This is one of the US-based largest department stores that, despite the competitors, offers more affordable brands.
Homepage
value proposition
However, as you can see the propositions don’t yell at you and are created in a restrained design.
Magento2: How to add a free-shipping bar to your store pages?
images quality
Macy’s uses high-resolution banner pictures in WebP with a zoom-in option leading to a target URL.
Magento2: Why stores with a wide range of products choose WebP?
call-to-action
- make
- enjoy
- get together
- earn
- and repeated phrases with N% Off
Magento2: How to create mobile-friendly banners?
navigation
The home page goes with a horizontal category menu, a drop-down menu with a shop-by-department including categories, and a search bar.
Magento2: What navigation to choose: Lite, Shop-by-Brand or Pro?
contact information
At the bottom of the page, you see Our Stores where you can find Locations & Hours information. Like many other stores with offline spots, Macy’s added a safe way of product delivery – Contact-Free Curbside Pickup.
Magento2: How to add store locator? How to add a Google map?
loading speed
The results showed a few points for mobile speed improvement, though the desktop performance is above the average.
Magento2: How to minify your code without developer’s help?
Catalog pages
navigation and filtering
Clicking on Shoes from the main drop-down homepage menu, you get to the Women’s Shoes category at once. Obviously, Macy’s conducted customer segmentation study and got to know their ICP (ideal customer profile) is a woman.
Whereas Men’s Shoes and Kids’ Shoes, as well as cross-selling sub-categories like Women’s Socks and Hosiery, lie below.
From the Women’s Shoes sub-category, you can choose to filter the products by their types: mules, sandals, or look through all shoes. After the choice, you can further filter shoes by color, size, price, shoe type, heel height, and brand.
Also, you can apply Offers, Customer Ratings, and Discount Range filters.
Magento2: How to add price slider and multi-purpose filters?
Product page
product title
product description
product images
Images in the product gallery are in JPEG, zoomable and non-pixelated. You can see the product from all angles, though there’s no 360 view or videos.
cross-selling blocks
Scrolling to the right and down, you see vertical сustomers-also-shopped and horizontal customers-also-loved blocks respectively.
Product availability and links to email clients and Pinterest where you can pin the product to one of your special boards are also here.
Magento2: How to relate products automatically?
product reviews
The section goes right after the customers-also-loved block.
Also, here a visitor can ask anything about the desired product.
Magento2: How to add a star rating?
Run-through
Though it’s one of the largest department stores with a huge number of SKUs in the catalog, its navigation is intuitive. Knowing what you came for, you can find it in seconds. Coming to the shop by chance, the banners on the homepage will lead you to products of interest.
This store has pleasantly surprised us with special options for visually impaired users and the general Shoe category that directs you to Women’s Shoes.
A clear product page with all the purchase-motivating information looks a little overwhelmed if compared to other clothing stores. Though, two additional blocks with cross-sells located to the right and below the product description don’t draw attention away from the targeted product. The high-quality non-pixelated images show the product from all angles. However, the 360-view or video defile would be useful as well.
Useful links
- How to create mobile-friendly banners?
- How to limit promotions based on the total sales amount?
- How to add an Instagram widget to your store?
- How to add a free-shipping bar to your store pages?
- What’s the difference between the Lite, Shop-by-Brand, Pro navigation, and what’s your ideal match?
- How to add store locator?
- How to add a Google map?
- How to create a multi-functional contact-us page?
- How to add a hamburger menu to the category tree?
- How to create virtual categories?
- How to add custom product labels?
- How to display prices and colors of simple products?
