Updated: 10/05/2023

Drew's Youtube Merch

Project: Drew's Youtube Merch

A Shopify store for selling T-Shirts and other branded merchandise.

Shopify HTML TailwindCSS Javascript Liquid
Store Password:

Drew’s Youtube Merch

Homepage | Collection Page | Product Page | Cart Page

Visit Drew’s YouTube Merch =>

Store Password:

 devdrew

Drew’s Youtube Merch is a Shopify store specialized in showcasing Youtube Content Creator and Streamer branded merchandise. The intention is to cater to customers that want to buy merchandise that makes them feel like they are identifying with their favorite content creators. This is accomplished by the placement of many kinds of quirky cartoons and images that feel like they are straight from their respective Youtube Channels. Not only that but the website is optimized to be able to navigate quickly and easily through products so that customers can see all of the funny item descriptions and images.

This website is based off the website: merch.gamegrumps.com

Store Preview

Home page

The home page contains an assortment of featured collections. The home page is also fully responsive just like the entire website is.

screenshot-header-10

On large screens the header features a menu that opens on hover and a fixed cart button on the bottom right corner.

On mobile it becomes an accordion menu and the header contains the cart button.

screenshot-header-10

Collection Page

The collections page features sorting without reloading the page. Page data from the Shopify Section Rendering API is cached to improve performance when the page is sorted.

On large screens links to other collections are shown on the left column.

Product Page

The product page is simple and concise showing the product’s image gallery as well as a zoom in button that opens a large version of the current image in a new window. Some products that have variant information also feature variant selector buttons.

Cart Page

The cart page has all the things you would expect to find like prices and images of your cart items as well as any associated details like variant information. A unique featured implemented in this cart page however is the addition of a clear cart button that makes a call to the Cart Update API and removes all of the cart items and then reloads the page.