In Part 1 and Part 2 of this blog series, we discussed how UI kits can be a valuable resource that can help you quickly iterate over design ideas. UI kits come bundled with commonly used design elements, like navigation styles and icons, so you can quickly copy and paste what you need into your design concepts. This will save you time and expedite the process of getting your ideas down on paper, or in this case, into Sketch.
City is our free ecommerce UI kit based on a fictional fashion apparel shop. The UI kit includes all of the main elements you need to quickly start prototyping Shopify store designs for your clients.
In Part 1 we implemented our homepage, and in Part 2 we implemented the product list page and product detail page. In the final article of this series, we will implement our cart page and add our global footer for the shop’s site.
If this is your first time trying out Shopify, or if you’re just getting started, check out Part 1 for a complete list of resources. This includes our recently released Liquid Cheat Sheet, which you will find a powerful resource for building Shopify stores.
Every single page on your client’s store is important, but some need more attention than others — one of these pages if your cart. The cart page is the final obstacle before your client makes a sale. The customer has already fallen in love with the product and is ready to buy. The last thing you want to do is put unnecessary obstacles between them and the checkout button.
To ensure our cart page converts, we want to make sure there are no distractions. Just display the important stuff: the products about to be purchased, their quantity, the product subtotal, and the transaction subtotal. The key is not to get in the way and remove user friction where we can.
You might also like: How to Take a Design From Concept to Production — Part 1: The Homepage
The cart layout
In this three part series, we have been working with the free Venture theme from Shopify as the foundation for implementing our UI kit. We used this theme because it provided us with the features we wanted for the shop, and it gave us a jump-start on the design implementation.
Out of the box, the cart page built into Venture is very similar to our cart page design concept. There isn’t much work to do here but to align the header to the left, update copy, and update the typography styles.
With a couple of changes to the cart.liquid template and a few lines of CSS, our cart page now represents our design mockup quite nicely, and we’re done here. Here’s the code sample:
Again, this is the advantage of being resourceful with the tools available to you. You’re not wasting hours recreating something that may already be out there, ready for you to modify, and make your own.
If you’re looking for a greater challenge, check out Part 1 of this blog series for other free Shopify resources that provide skeleton frameworks you can use as a starting point.
Our cart page setup was easy, and that’s great because we can now dedicate more of our time to customizing the footer. There is constant debate about the value of a footer, but I personally think that it can be a place where we can place high value links and provide additional information, plus it gives us the opportunity to foster a stronger relationship between our clients and their customers.
Let’s look at the footer we will be building.
The very first thing we will see on our footer is a slogan that reads, “We love speaking to our customers. Got a question?”. As I mentioned above, this invites the customer to have a relationship with us. We could have simply listed the contact information, but instead your client’s brand is now welcoming. Buyers can feel at ease knowing that if they do need to make a call, they will be greeted with a warm hello. In one single line, we were able to create a welcoming persona for our client’s shop.
Below, our friendly greeting and contact information is our core menu. It’s limited to a few links because we only want to bring attention to the pages we want customers to visit and browse.
Next to our menu, we have an excerpt from the about page. Once again, this is an opportunity to build on the persona of the top headline in our footer. The more comfortable the shopper feels on the website, the more likely they are to buy from that website and become a repeat customer – all the things your client wants to accomplish with their online store.
Finally, we have our social links. These are rather easy to implement, and we can build the functionality so that your client can update their social profiles through the theme customization settings. If your client has a new social channel to add, all they need to do is add the username for the service, and a link will automatically be created in the backend of the site, to show the respective social channel icon.
Here’s a code sample of the footer with social links, configured so they can be edited through the Customize Theme panel:
And here’s the JSON code sample that creates the social icon functionality in the settings_schema.json file:
To learn more about the settings_schema.json file check out the documentation.
You might also like: How to Take a Design from Concept to Production — Part 2: Product Pages
Setting a foundation for easy wins
In this three part series, we have gone through the steps of implementing our design concepts using the City ecommerce UI kit in order to create a fully functional Shopify store. We explored different methods and resources to get us to the final product. Shopify provides you with countless resources to help you jump-start your ecommerce projects.
We do this so you don’t have to reinvent the wheel each time. In turn, this provides you with a solid foundation to start your projects and generate easy wins along the way.