Skip to content

Gulrugar/Game-Grumps-Merch-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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-homepage

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.