Belong Designs

Website Design & Shopify Build

Belong Designs

HTML 5 // CSS // .liquid // Photoshop // Illustrator

Belong Designs is a Colorado outdoor clothing company. I had the opportunity to re-design their Shopify eCommerce website. I came up with a killer design, rebranded the company, and modified an existing theme. I worked with the liquid code that Shopify uses to create custom dynamic sections. This offeres clients the ability to manipulate and edit almost everything without having to go into the code. This was my first Shopify website, and I am stoked with the results! I was hired by FlowState Marketing on a contract basis for this project.

Visit Website

Note - The hero image and all lifestyle/product photos were taken by Josh Block.

responsive mockup
Belong Designs Website

Website Sketches

I started this project off by doing some research on exisitng eCommerce Websites. After research I started sketching up a rough layout for the site. I came up with a couple options for the homepage layout, and a couple options for the dropdown navigation treatment.

Website Sketches


The next step in my design process is to create wireframes. Below are the homepage and dropdown navigation wireframes. These are created to show the structure and the layout of a website and navigation without including actual branding details.

Homepage Wireframe Homepage Wireframe

Final Design

These are the final designs for the belong website. It features a fullsize hero slider, featured products, a section to promote other areas of the website, a shop-able instagram feed, and a featured video section.

Homepage Mockup Collection Page Mockup

Here are the product page as well as homepage mobile view

Product Page Mockup Homepage Mobile Page Mockup

Final Product

The website turned out way better than I could have imagined. This was my first Shopify website, and it went really well! I learned a ton working on this project. I was able to create custom dynamic sections offering the client the ability to customize without going into the code. This was a huge accomplishment for me. This allows the ability to have very custom pages that can be customized by the non-coder.

View the new website Here.

responsive mockup