top of page

ART OF SPORT · E-COMMERCE WEBSITE (UNOFFICIAL BUILD)

A direct-to-shopper storefront for a sport care brand, built on Shopify.

A solo practice build. Unofficial and not affiliated with Art of Sport. The brand name and imagery belong to them.

Platform

Shopify

Collections built

4

Layouts

Desktop & Mobile

What?

A Shopify rebuild of a sport care brand’s homepage and collection pages, keeping its black-and-white, high-contrast look.

For Who?

Shoppers who want to find face, body and fuel products quickly, on any screen.

My Role

Solo designer and builder: layout, typography, theme customization, content structure and responsive design.

The problem

On the original site, products sent shoppers to a third-party marketplace to buy. That made specific products harder to find and meant the brand didn’t own the buying experience.

The approach

I rebuilt the storefront on Shopify with its own collections and product pages, keeping the brand’s look and tone, with a more direct path from the homepage to each product.

THE SOLUTION

Design decisions

DECISION 01 — COLLECTIONS AS NAVIGATION

Face, Deodorant, Wash and Fuel and Recovery appear as large image cards on the homepage, and as the same four links in the header and footer.

DECISION 02 — A VIDEO HERO

A looping video with the brand mark centered gives the landing screen one clear focal point.

DECISION 03 — TYPOGRAPHY

Bebas Neue for headlines and Montserrat for body text keep the tone bold and athletic while staying readable.

DECISION 04 — A STACKED MOBILE LAYOUT

Cards run one per row on phones so images and text stay legible.

REFLECTION

  • Shopify’s theme editor controls most of the layout through section settings, and where it can’t, custom Liquid sections fill the gap.

  • Some settings apply to both desktop and mobile. Fixing the card sizes on phones changed the desktop layout, so I’d plan device-specific styles from the start.

  • Collection text should come from the collection itself, so each card can have its own copy without editing the template.

​

If I were to take this further

  • Add an Our Favorites row of featured products, which I held back to finish the core pages on time.

  • Fill every collection and product page with real photography and copy.

  • Test accessibility, including text contrast over the full-bleed images, and page speed.

Want to see the full prototype?

Click below for a full view of the Art of Sport Shopify page 

Password: bustao

“Unofficial practice build. Brand name and imagery belong to Art of Sport. Not affiliated or client work.”

bottom of page