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:

  1. how these stores market their brand and products on the homepage, category and product pages,
  2. how coronavirus influenced their offer,
  3. what they have in common when presenting their products,
  4. and how to add the desired elements to your Magento 2 store.

Article summary

Useful Links

#1. Gap

Founded in 1969, the brand has become globally recognized and now offers casual clothes for people of all ages and nationalities.

Homepage

gap homepage blog

 

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.

gap value proposition blog

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.

gap homepage images blogThey adapted the production to the current marketing situation and launched non-medical cotton masks manufacturing.

masks blogAll 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.

gap navigation blog

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.

store locator gap

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.

jeans models blog

You can filter the products by model, and then decide on the size, color, and pricing, then go to the product page.

size color price blog

Magento2: How to create virtual categories?

 

Product page

gap product pageproduct title

To the right of the images gallery, you see a clear product title with pricing and star rating.

product title gap

 

product description

Right under the product title, you can change the product color, set the length and size, learn what’s your size, and add the product to bag.
In case you look for more details, click the product details, fabric, and care, fit, and sizing dropdowns respectively.

product details gap

gap product details blog

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.

additional blocks on product page blog

Magento2: How to relate products automatically?

 

product reviews

At the bottom of the page, you see a reviews section with a star rating, which is duplicated under the product title at the top of the page.

reviews gap

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

tobi homepage blog

 

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.

tobi value proposition blog

tobi value proposition2 blog

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.

tobi instagram widget1 blog
tobi instagram widget2 blog

Magento2: How to add an Instagram widget to your store?

 

call-to-action

Tobi resort to using few-word call-to-actions with percent discounts and strong verbs like:

  • show,
  • dive in (the new stuff is here), etc.
tobi homepage cta blog

 

navigation

The upper navigation menu offers you to shop by most popular product attributes, namely summer and cheap dresses. Below you see 6 major categories and search options in case you know what you’ve come for.
tobi homepage navigation blog

Magento2: How to add a hamburger menu to the category tree?

 

contact information

tobi contact information blog
If you want to see contact information, scroll down the page, and click Contact Us. Here you’ll find the comfiest way of getting in contact with the store reps.

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.
tobi category page blog

 

 

Product page

tobi product page blog

product title

To the right of the images gallery, you see a clear product title with pricing.
tobi product title blog

 

 

product description

Under the product title, you see quick color and size filters with a size guide and the add-to-bag, add-to-like buttons.
If you look for more information about the fabric, shipping, and return policy, expand the dropdowns under the add-to-bag button.

tobi product description blog

 

tobi product details blog

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.

tobi product images blog

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.

tobi new arrivals block blog

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

macys homepage blog

 

value proposition

During these times, Macy’s emphasizes the importance of customer care. They aim to protect their employees’ and shoppers’ health.

macys value proposition blog

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

Each banner comes with a unique call-to-action of 3-7 words. They include power verbs like:

  • make
  • enjoy
  • get together
  • earn
  • and repeated phrases with N% Off
macys call-to-action

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.

macys homepage navigation blog

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.

macys contactless pickup blog

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.

macys catalog blog

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.mules catalog 2 blog

Also, you can apply Offers, Customer Ratings, and Discount Range filters.

Magento2: How to add price slider and multi-purpose filters?

 

Product page

macys product page blog

product title

Once you get to a product page, you see a product title to the right of the image gallery, as well as the pricing options, and active offers.

macys product title blog

 

product description

Right below the brief list of offers with links, you can make the last-minute edits before clicking the add-to-bag button.
In case the information is insufficient for making a purchase decision, you scroll down to the product details, pricing, special offers, shipping & returns.

macys product details blog

product details macys blog

 

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.

macys customers also shopped macys blog
macys customers also loved macys blog

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.

macys reviews blog

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