How to Take a Design from Concept to Production — Part 2: Product Pages

How to Take a Design from Concept to Production — Part 2: Product Pages

Product PageIn Part one of this three part blog series, we talked about how UI Kits can be a resource that allow you to quickly iterate over design ideas. UI Kits can also save you from reconstructing commonly used design elements, like icons.

Download the UI kit

To help you take a design from concept to production, we built a free ecommerce UI Kit called City – a fictional fashion apparel store. City provides you with all of the main elements you need to quickly start prototyping Shopify store designs for your clients.

In Part 1, we implemented our homepage. In Part 2, we will implement the product list page and product detail page. We will learn how to use custom Liquid templates, and continue to leverage the Brooklyn and Simple themes to take our design concept to a fully working Shopify store.Product Page: City Theme Product Page Example

You might also like: 4 Theme Features Every Client Will Ask For

Step 1: Setting up our navigation

In Part one we had a very minimal navigation for our homepage in order to highlight our hero image and our headline slogan announcing the new spring product collection. On our product listing and product detail page, we will want a new desktop navigation layout to highlight product categories like: women, men, accessories, about, FAQ, and contact.Product Page: Setting up NavigationBecause we have two navigation layouts, one for our homepage and another for the rest of the site, we will want to create a new theme.liquid template. That way, we can set a unique layout for the homepage, which will include the minimal navigation layout.Product Page: Creating a Custom Liquid ThemeWe will now start reorganizing the layout of the menu. The first thing I did was move the cart button from the main navigation to be inline with the div, which contains the logo, and then added my social links. That sets the top level of the navigation with our logo, and now I can set the menu links, which are wrapped in the <ul> tag, to be placed below the logo div container with a top light 1 pixel border, to create a clear structure division in content.

Step 2: Creating a custom Liquid template

If we open up the collection.liquid, we’ll see that’s there isn’t much in the file but a reference to a Liquid snippet:Product Page: Liquid Snippet

Snippets are a powerful tool that allow you to reuse code on different Liquid pages. If you’ve worked with PHP before, this will be very familiar to you because Liquid snippets work a lot like PHP includes.

Opening up the collection-template.liquid page, we see how our collections page is structured. But for our product page, we will want a custom collection template and a new Liquid snippet to create our desired layout. To create a custom template navigate to the online editor, click on ‘Add a new template’ under the ‘Templates’ folder. You should now see a modal window, select ‘Collection’ from the drop down and provide a name. I have gone ahead and named the new collection page ‘Product-layout’.

For my Shopify store, I want a custom layout for the products, which is why I’m creating a new product layout. You can also create custom product.liquid, theme.liquid, page.liquid pages, plus others if you’re looking to do something unique for each page. That’s why I have created a custom collection.liquid template, because I want to create a unique page with a custom navigation.

You might also like: The Essential List of Resources for Shopify Theme Development

Step 3: Implementing the product browse menu

Product Page: Product Browse MenuFor our product browse menu we will use code from the Simple theme. To get access to Simple theme’s code, we will want to install it on our Shopify store but won’t publish it as our theme. Instead, we will click on “Install as an unpublished theme”. Once you’re done that, navigate to the theme.liquid template and search for the div with class ‘Sidebar’. Copy the <ul> code and paste into the collection-template.liquid snippet above <div class="grid grid-collage">. Then with some CSS, we can align the accordion product menu to the left with the products on the right. Once again, the nice thing with using an existing theme is that our pagination is set up for the page, leaving us to only worry about the layout we want to create.

In our concept we had a banner image and we can add it to our product list Template as well. Browse to the asset folder and click on ‘Add a new asset’. Browse to your image and upload it to your theme. Now with our image uploaded, we’ll open collection.liquid file and add the image above the reference to the snippet with the following Liquid tag:

{{ 'product-list-hero.jpg' | asset_url | img_tag }}

This is all we need to add an image to our page, we don’t need to know the image’s relative path because Shopify does the hard work and figures that out for us. Shopify will render that Liquid tag in semantic html:

<img src="//cdn.shopify.com/s/files/1/1241/3000/t/2/assets/product-list-hero.jpg?14744922103279601345" />


All images and assets are also delivered through a CDN network, which means that your Shopify store will be fast for your client’s customers. You can also find more Liquid tags on our Shopify Liquid Cheat Sheet.

Step 4: Styling the product page

Product Page: Styling the Product PageThe product detail page is very similar to the concept we designed with the City UI Kit, but we will want to move a couple of items around. We want the price and add to cart button below the product description. The Brooklyn theme also has social sharing icons already on the page, which is something I didn’t have in the concept, but will want to keep. This is another valuable reason why it’s nice to work with published themes, because you can build on some of the ideas already developed by the theme developer.

To change the content layout order, we will navigate to the product.liquid template and find the {{ product.description }}. Moving the price and add to cart button after the product description gives me the following result, which is exactly what I was looking for:Product Page: Result

Step 5: Create a snippet to show related products

Product Page: Related Product SnippetNow I want to show related products before our product description and product thumbnails. To do that we will use the following code:

We will start by creating a Liquid snippet that we can reuse on other pages. Navigate to the theme files, in the snippets folder click on ‘Add a new snippet’ and give your snippet a name. I have called this snippet: related-products.

Back in the product.liquid page, I will include my snippet after the product image and content layout, like so:

{% include ‘related-products’ %}

 

You’ll also need this product-card.liquid snippet in the snippets folder to create the related products layout:

We now have a list of related products on our product page, which creates a better buying experience for our client’s customer.

Customize and reuse code

Whether it’s a product or collection page, Shopify makes it easy for you to build the unique ecommerce page layouts your clients desire.

You can use and reuse Liquid snippets on several pages, and if you need to make a change to the code in a snippet, you only need to update it in one place; there’s no need to make changes on multiple pages, which can be time consuming and make you vulnerable to errors.

Custom pages allow you to create dynamic ecommerce stores, while Liquid snippets will save you time and provide you with a smart way to manage your code. It’s a win-win!

Download the UI kit

How are you building custom ecommerce pages? Tell us in the comments section below!

About the Author

Levin is a self-taught designer and front-end developer whose passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC, and now works for Trello.

Grow your business with the Shopify Partner Program

Learn more