Apple debuts redesigned online store with dedicated 'Store' tab

AppleInsider

Apple on Tuesday introduced a new online Apple Store experience for the web with fresh design cues borrowed from iOS, including product cards, curated selections, informational sections and more.

Among the most prominent changes is a "Store" tab that sits next to Mac, iPad, iPhone, Watch, TV, Music and Support categories on Apple.com's navigation bar. Apple's website previously featured a "Store" tab that directed users to the online Apple Store, but that mechanism was replaced by "Buy" links buried in each category.

The top of Apple's Store page now reads, "Store. The best way to buy the products you love."

Sitting at the top are links to contact a retail specialist and find a nearby retail store. Like the "Store" tab, Apple had for years buried an interactive list of brick-and-mortar stores within its main site's search feature.

Below the welcome text is a row featuring Apple's major product lines. Clicking on a product like Mac directs to a page of browsable devices arranged neatly into a row of cards that can be navigated scrolling horizontally. Each card links to configuration and purchasing options for specific models, while other rows on the page direct to shopping guides, accessories, trade-in options and discounts, setup and support, and informational user guides. These sections can be quickly accessed through a scrolling navigation bar at the top of the page.

Back to the main page, a "What's New" section highlights new products, current deals, carrier discounts and more. Below that is a help section where users can request to shop with a specialist, get device assistance or schedule a Genius support appointment.

Apple touts the "Apple difference" in a set of cards promoting services like free delivery or courier delivery, in-store pickup, device trade-in, Apple Card, Mac and Apple Watch customization, and emoji engraving.

It appears Apple will regularly cycle new curated content into the Store page. For now, a row of "extracurricular accessories" shows off first-party products that are "perfect for the college-bound," while another row throws a spotlight on AirTag and related accessories.

Overall, the online store feels like it belongs on iOS or, more specifically, iPadOS, with a gesture-focused interface and copious use of cards. The clean design owes much to the Apple Store app and while the new horizontal scroll-based navigation is a bit clunky with mouse or trackpad, Apple offers directional arrow buttons at each row to compensate.

Read on AppleInsider

randominternetperson

A work in progress.  I just went to apple.com and clicked on the Store link and got

The page you’re looking for can’t be found.

eightzero

randominternetperson said:

A work in progress.  I just went to apple.com and clicked on the Store link and got

The page you’re looking for can’t be found.

yup. me too. must be all those orders for that new keyboard crashed the site.

gregoriusm

From realitck on macrumors:

Beware of the bad link https://www.apple.com/us/shop/goto/store on Apple main URL hierarchy

s/b https://www.apple.com/store

elijahg

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

9secondkox2

Looks a bit wonky in iPhone pro Max in landscape. 

Also, funny how history repeats itself. 

There used to be a dedicated tab for Store at Apple.com. Then it went away and mixed with the rest of the site. 

And in the words of Steve Jobs: “boom” it’s back after nearly 7 years. Guess the original idea was pretty solid. 

Nothing is ever actually new it seems. 

edited August 2021

jfc_pa

Looks okay. Though tbh I mostly use the app in my iPhone. 

edited August 2021

entropys

Big improvement IMHO. Never liked the previous arrangement. Seven years!

mplsp

entropys said:

Big improvement IMHO. Never liked the previous arrangement. Seven years!

Agreed - I learned how to get around, but removing the store page never made sense to me. Why make it more difficult for people to figure out how to buy stuff?

strangedays

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

edited August 2021

crowley

StrangeDays said:

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

You'd think they'd have tried looking tab their own website on their own Pro Display XDR, in which case they'd have seen how weird it looks.

libertykrs

Seems like a lot of wasted screen space while viewing on a widescreen monitor.  Can't say I like it.

9secondkox2

Just know that the designers, the developers,  and the marketers argued about these. aesthetics for a month. In the end, an executives child walked in and that this design was the most "epic" and that sealed the deal. 

strangedays

crowley said:

StrangeDays said:

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

You'd think they'd have tried looking tab their own website on their own Pro Display XDR, in which case they'd have seen how weird it looks.

How do you mean weird? Countless websites have a centered content column. Like AI's homepage. 

And Yahoo:



And Amazon:



And CNN:



And MacRumors:




...it's not weird. It's an extremely common design pattern that's over a decade old. 

Have you never maximized your browser on any popular website before? Very confused how you folks think this is new or unique to Apple. The only difference is Apple's Store page has "cards" that scroll horizontally across the width...but it's the same centered column:

edited August 2021

entropys

A centred column is desirable for when you have a narrow window or a small screen.  It is particularly handy if you are working  on multiple Windows.

edited August 2021

elijahg

StrangeDays said:

crowley said:

StrangeDays said:

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

You'd think they'd have tried looking tab their own website on their own Pro Display XDR, in which case they'd have seen how weird it looks.

How do you mean weird? Countless websites have a centered content column. Like AI's homepage. 

And Yahoo:



And Amazon:



And CNN:



And MacRumors:




...it's not weird. It's an extremely common design pattern that's over a decade old. 

Have you never maximized your browser on any popular website before? Very confused how you folks think this is new or unique to Apple. The only difference is Apple's Store page has "cards" that scroll horizontally across the width...but it's the same centered column:

You're missing the point, there are parts that extend outside that central column which makes the whole design unbalanced. The red box you drew to highlight the Apple column isn't even in the centre, so you just proved my point. The central column doesn't have enough visual cues on the right for it to look like a column, and your mistake only highlights that. I didn't realise it was a column until I scrolled down.

The site is fine once horizontally scrolled, but weird until that point. The rest of the site isn't like it save for the occasional arm or something extending right. Centrally positioned horizontal <divs> would be fine, like in the iPhone page you showed - because it's balanced, it is extended left and right. Exactly none of the sites you posted a picture of is the same as Apple's design. Nothing extends further right outside the centre column. It'd be like having "juiciest Apple rumors" in the AI screenshot having several more columns extending off to the right. Doesn't look right because it's unbalanced.

It in fact gets worse the more you vertically scroll because all of a sudden all of the horizontal scrolls start 1/3 the way across the page and extend off the right side. Looks stupid like you're zoomed into a portion of the page. Please do point out another website that does this.

edited August 2021

crowley

StrangeDays said:

crowley said:

StrangeDays said:

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

You'd think they'd have tried looking tab their own website on their own Pro Display XDR, in which case they'd have seen how weird it looks.

How do you mean weird? Countless websites have a centered content column. Like AI's homepage. 

And Yahoo:



And Amazon:



And CNN:



And MacRumors:




...it's not weird. It's an extremely common design pattern that's over a decade old. 

Have you never maximized your browser on any popular website before? Very confused how you folks think this is new or unique to Apple. The only difference is Apple's Store page has "cards" that scroll horizontally across the width...but it's the same centered column:

You're asking me what's weird and then highlighting exactly what's weird?  The horizontal scrolling sections sticking out of the sides of a central focus is precisely what's weird.  

Apple should gradient those carousels out, or balance them with a background in some way.  Looks silly otherwise, like someone forgot to finish the job.

citpeks

I've always thought removing the Store tab from the top banner was one of the more questionable moves during the Ahrendts era, and disliked having to scroll to the bottom of the page to find the store link amongst the others when I simply wanted to seek a specific item, and skip the sales stuff.

I get that it was an attempt to make it more similar to shopping in a boutique, where one browses the items first, and them deals with the sales part later, but, like the lack of dedicated cashiers in the physical stores, it punished those who simply wanted to quickly buy something and skip the shopping part.

Apple is a higher end brand, but never like that, so the pretense was more of a hindrance than a help.

And with the company now firmly mainstream and more worried about the filthy lucre, with wide distribution channels, discounting with no MAP, and other mass market sales tactics, those sort of attempted distinctions have faded even more.

strangedays

elijahg said:

StrangeDays said:

crowley said:

StrangeDays said:

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

You'd think they'd have tried looking tab their own website on their own Pro Display XDR, in which case they'd have seen how weird it looks.

How do you mean weird? Countless websites have a centered content column. Like AI's homepage. 

And Yahoo:



And Amazon:



And CNN:



And MacRumors:




...it's not weird. It's an extremely common design pattern that's over a decade old. 

Have you never maximized your browser on any popular website before? Very confused how you folks think this is new or unique to Apple. The only difference is Apple's Store page has "cards" that scroll horizontally across the width...but it's the same centered column:

You're missing the point, there are parts that extend outside that central column which makes the whole design unbalanced. The red box you drew to highlight the Apple column isn't even in the centre, so you just proved my point. The central column doesn't have enough visual cues on the right for it to look like a column, and your mistake only highlights that. I didn't realise it was a column until I scrolled down.

The site is fine once horizontally scrolled, but weird until that point. The rest of the site isn't like it save for the occasional arm or something extending right. Centrally positioned horizontal <divs> would be fine, like in the iPhone page you showed - because it's balanced, it is extended left and right. Exactly none of the sites you posted a picture of is the same as Apple's design. Nothing extends further right outside the centre column. It'd be like having "juiciest Apple rumors" in the AI screenshot having several more columns extending off to the right. Doesn't look right because it's unbalanced.

It in fact gets worse the more you vertically scroll because all of a sudden all of the horizontal scrolls start 1/3 the way across the page and extend off the right side. Looks stupid like you're zoomed into a portion of the page. Please do point out another website that does this.

Incorrect. While I made the screen capture from my free-sized browser window, not a maximized window, all you have to do is open it in your own window maximize it to see that it’s centered — using the top header as the guide. It’s 1700px on either side. Very similar to AI, which is about 1500px on either side. 

Apple:



Apple Insider:




You are grasping at straws very, very hard. But I understand - you are upset. Outraged. Apple didn’t run their horizontally-scrolling cards by you first!

strangedays

crowley said:

StrangeDays said:

crowley said:

StrangeDays said:

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

You'd think they'd have tried looking tab their own website on their own Pro Display XDR, in which case they'd have seen how weird it looks.

How do you mean weird? Countless websites have a centered content column. Like AI's homepage. 

And Yahoo:



And Amazon:



And CNN:



And MacRumors:




...it's not weird. It's an extremely common design pattern that's over a decade old. 

Have you never maximized your browser on any popular website before? Very confused how you folks think this is new or unique to Apple. The only difference is Apple's Store page has "cards" that scroll horizontally across the width...but it's the same centered column:

You're asking me what's weird and then highlighting exactly what's weird?  The horizontal scrolling sections sticking out of the sides of a central focus is precisely what's weird.  

Apple should gradient those carousels out, or balance them with a background in some way.  Looks silly otherwise, like someone forgot to finish the job.

It isn’t. Once you start scrolling them they move all the way to the edge of the browser. 

I’ve really never seen such shrieking violets butthurt about web design.

crowley

StrangeDays said:

crowley said:

StrangeDays said:

crowley said:

StrangeDays said:

elijahg said:

Why does the content always align with the left side of the top menu? Looks pretty stupid at anything wider than 1024 pixels...

 
What you're seeing is a very common design pattern -- a centered content column. But in this case the "cards" scroll horizontally, so they continue to the right. Or the left:




You can find this design pattern everywhere. Like on this very website:

You'd think they'd have tried looking tab their own website on their own Pro Display XDR, in which case they'd have seen how weird it looks.

How do you mean weird? Countless websites have a centered content column. Like AI's homepage. 

And Yahoo:



And Amazon:



And CNN:



And MacRumors:




...it's not weird. It's an extremely common design pattern that's over a decade old. 

Have you never maximized your browser on any popular website before? Very confused how you folks think this is new or unique to Apple. The only difference is Apple's Store page has "cards" that scroll horizontally across the width...but it's the same centered column:

You're asking me what's weird and then highlighting exactly what's weird?  The horizontal scrolling sections sticking out of the sides of a central focus is precisely what's weird.  

Apple should gradient those carousels out, or balance them with a background in some way.  Looks silly otherwise, like someone forgot to finish the job.

It isn’t. Once you start scrolling them they move all the way to the edge of the browser. 

I’ve really never seen such shrieking violets butthurt about web design.

I disagree.  Not butthurt, just disagree, and think it looks weird and incomplete.  Descending to insults so quickly?