UI Kits are resources that allow you to quickly iterate over design ideas. They also save you time from reconstructing commonly used design elements, like icons.
To help, we built an ecommerce UI Kit, which we have named City. City is a fictional fashion apparel store that provides you with all of the main elements you need to quickly start prototyping Shopify store designs for your clients.
The UI Kit contains several navigation layouts, color themes, and mobile layouts for smartphones and tablets. This article will be the first of a three part series in which I will demonstrate how we can take our static designs using UI from City, and implement them into a beautiful and fully functional Shopify store. Part 1 will tackle the homepage, part 2 will cover product layout, and in part 3 we will work on the cart page.
Designing the perfect ecommerce homepage
The homepage can be one of the most important pages for your client’s store. In many cases, it’s the first point of contact for most customers; this means that you will want to make a good impression instantly. It’s a perfect place to highlight your client’s product, whether there’s a new product line, promotion, or sales initiative. For this article, our homepage design will look like this:
The homepage consists of a large graphic with a slogan announcing that the new spring collection has arrived, and features a clear call-to-action to view the product line. Below the hero image, the design highlights two product collections: sunglasses and jackets. That’s followed by a list of featured products that we have manually selected.
You might also like: How to Take a Design from Concept to Production — Part 2: Product Pages
Resources to help your design flow
When you’re ready to start implementing your design concepts, there are a couple of resources you should be aware off, to make things easier. Shopify’s theming language uses the Liquid templating framework. If you’re new to Liquid, we have several resources to get you started, including:
- Liquid for Shopify Cheat Sheet
- Comprehensive video tutorials
- Theme development webinars
- Theme documentation
We also have the Timber Framework, which is a front-end framework that makes building Shopify Themes quick and easy. The resource I will be using in this 3-part series is the Shopify Theme Store.
Taking your design from concept to production
Step 1: Find a theme on the Shopify Theme Store
Many of the themes on Shopify Theme Store are free and are made in-house by Shopify’s Theme Design team. I already have my design finalized using the ecommerce UI kit, which means that I can browse through the existing themes to see if there is something that’s already close to what I’ve designed that I can modify and use as a starting point. I’m also looking for a theme that provides me with the functionality I’m looking to incorporate into my client’s theme. All of this will give me a jump-start on the design implementation.As it turns out, there are two themes on the Shopify theme store that have the layout and functionality I’m looking for. I will be using the Brooklyn theme as the base foundation for my theme, and I will also use Simple’s theme code snippet for my product listing page’s left hand side navigation in part 2 of this series. Remember that the starting theme doesn’t have to be exactly what you need, and we encourage you to take code from other themes and implement them into your own.
Step 2: Set up development store
Now that we have our design and theme, we can start taking our design from concept to reality. The first thing we will want to do is set up a Development Store in our Partner dashboard. Development stores are one of the best resources that Shopify provides to our partners. They are not limited by a trial period, and you can get all the features of a paid Shopify store while you work on your client’s Shopify store. If you haven’t signed up to be a partner, you can sign up here for free.
Step 3: Publish your theme
With our development store set up, we will navigate the themes section of the Shopify admin: Online store > Themes > and click on visit theme store. Browse to the Brooklyn theme, click “Install theme”, and click “Publish as my shop’s theme”. In a few moments, your theme will be installed on your development store. Now, let’s go to the Theme Manager and start implementing our theme.
Step 4: Start customizing
In the theme manager page, click on “Customize theme” and look for “Home page - hero slideshow”. Let’s start by uploading our hero image from our concept, changing the text colour to white, and uploading our logo. Just like that, with a few clicks our homepage is already looking like our concept and looks great on mobile.
I also want to change the order of the headline; the layout is being set in the hero.liquid snippet, and it’s just a matter of cutting and pasting after the h1.
Step 5: Set up collections
As we move on to the collections, we will first want to remove the featured title in the order of content on our homepage which can be done through the customize section of the site.
Back in the Shopify admin, we need to create 2 collections — sunglasses and jackets — and add our featured image. Once that’s done, we will go back to our theme’s customize panel and set our featured collections.We don’t need the featured collections headline, so we will delete this in our featured-collections.liquid file snippet.
Step 6: Set up featured products
Now we need some products for our theme so we can get the homepage looking just the way we want with a set of featured products. Instead of hunting the web for a quality set of product images and descriptions we recently published a set of product CSVs that can be imported into your store. To download and learn how to use the CSVs you can read the post here. We also have a set of products images that you can download and use in your UI kit.We will want to create a Featured collection and then select the products we want to be featured from the dropdown menu available on the product admin page. Finally we will set the collection on the customize panel and the products will dynamically display on the homepage because of the functionality built into theme.
Step 7: Final touches
With our hero image, content, collections, and products set up, we have made a lot of headway in getting our Shopify store set up. Now we can add our final touches to make sure our Shopify store matches our design concept. We will start by changing our site’s Typography to set the global font to Helvetica Neue and change the font size to 14px. Back to the hero panel text we will find the div that positions the text to move it down and change the h1’s font size.
If you’re new to the theme, use the web inspector in your browser to find the elements and styles that are implementing the layout of the element you’re looking to modify.
You might also like: How to Take a Design from Concept to Production – Part 3: The Cart Page and Footer
Being resourceful with design
When you start a new project, it’s always smart to look at the resources available to you to make things easier on yourself. This is the first article of our three-part series designed to show how to take a static design concept and turn it into a functional Shopify store with just a few clicks, code snippets, and a few lines of CSS. In part two, we will look at setting up the product layout and product details page.