Who is the designer at Shopify com

An Introduction to Web Designer for Shopify

In three articles here on Tuts +, we're going to explore how to create a design for the Shopify hosted ecommerce platform. My goal is to equip you with all the skills you need to get started and to show you a range of creative options to make your topics flexible and powerful.

That series

Shopify - a design-centric, hosted, designer-based ecommerce platform

Here's what we'll cover in the next few articles:

  • The Shopify Affiliate Program
  • Excellent e-commerce design
  • The key concepts you need to get started with your first store design
  • How a Shopify theme is structured
  • Liquid: The Shopify template language
  • Advanced techniques to make your topics flexible and powerful
  • Resources to develop your topic further

The Shopify Affiliate Program

Before we get started, we strongly recommend that you sign up for a free Shopify partner account. Creating themes is 100% free for designers (subscriptions don't start until your client goes live).


Affiliate - A free program that designers can use to start creating themes

With a partner account, you can create as many fully functional development stores as you need. These have no time limit and can be used and tested 100%. You can even make bogus payments to test the entire flow of purchases - which is very useful when showing your customers your work.

Outstanding e-commerce design

You may have used Shopify without realizing it. If you've ever bought a title from A Book Apart, a United Pixel Workers t-shirt, a temporary tattoo from Tattly, a coffee from Has Bean, or (if I can be that brave) a copy of a book bought me participated -authorized, then you experienced Shopify.

As you will see in these stores, they all look very different. There are no restrictions on what your business can look like. It's 100% up to you and your imagination. In 2013, Shopify decided to highlight the great ecommerce design and launched the first Shopify Design Awards. Over 150 topics were submitted and judged by three highly respected people from the world of web design - Jeffrey Zeldman (founder of A List Apart and Happy Cog), Tina Roth-Eisenberg (founder of swissmiss and Tattly) and Daniel Weinand (co-founder and chief Shopify's Design Officer).

The three main themes were:

  1. Whipping post
  2. Grand Brand
  3. Goodwin and Goodwin
Greats Brand - A perfect example of the flexibility of Shopify themes

Another personal favorite of mine and an Honorable Mention at the Awards is the Pure Fix Cycles Store. Not only do they introduce some great ways to filter products, they add fun to your design too - a great case is their Glow Wheel product page.

All of these topics not only show great design skills, but also underline the flexibility of Shopify topics. There are no mandatory HTML, classes, or IDs, and no layout restrictions. While many people choose premium themes for their stores, many designers start from scratch. It's your decision.

Key concepts

As with all systems, Shopify has a number of important concepts that need to be understood before we dive into a text editor. Let's start organizing our store.

Products

Every online store needs products and Shopify is no different. Products are our basic unit in Shopify and central to the building theme.

In essence, a product is anything that you want to sell. Every product in a store has a number of attributes - the most common four are title, description, price, and a picture. Other properties a product can have are weight, color, and size. All of these can be accessed, created and updated through the online administrator.


The Dashboard - Easy access to products, collections and settings

Within Shopify, each product can have a number of variants. By default, every product you create has a variant. You can just add more if you want. Using our T-shirt example, we can say again that there are three color variants (black, white and green) and three size variants (small, medium and large). This in turn means that you can sell:

  • Small black t-shirt
  • Medium black t-shirt
  • Big black t-shirt
  • Small white t-shirt
  • Medium white t-shirt
  • Great white t-shirt
  • Small green t-shirt
  • Medium green t-shirt
  • Great green t-shirt

You can also set specific details for each combination. For example, you could set a different price for the small green t-shirt than the large green t-shirt.

Editing of variants is done via the product administration window

Variants are a very powerful feature of Shopify and allow you to display your products in your templates in different ways.

Collections

After you've added products to your store, you may want to categorize them into collections. I call a collection a "logical grouping of products". Other platforms may use the term category.

Collections aren't required, but they are very useful. Each product can be in one or more collections so you can effectively categorize your products. As I said, products don't have to belong to a collection, they are purely optional.

Collections - A logical grouping of products

Taking Best Made Co. as an example, we can see that they use the following collections to categorize their products:

  • dress
  • Accessories & badges
  • Bags & cases
  • Books & Maps
  • Housewares
  • Storage requirements

It is quite possible that a bag sits in the "Bags & Cases" and "Camp Supplies" collections.

In addition to the manual definition of collections, Shopify offers a number of other options for automatically adding products. An example of this could be including all products priced below $ 10. There are many more attributes that we can use:

  • Product name
  • Product Type
  • Product seller
  • Product price
  • Product tag
  • Compare at the price
  • Weight
  • Stock
  • Variant title

For comparisons we can use:

  • corresponds to
  • is bigger than
  • is less than
  • begins with
  • ends with
  • contains

These are referred to as "intelligent collections" in the administration interface. You can order collections in the following ways:

  • Manually
  • By bestseller
  • Alphabetically (A-Z)
  • Alphabetically (Z-A)
  • By price (highest to lowest)
  • By price (lowest to highest)
  • By date (newest to oldest)
  • By date (oldest to newest)

Finally, like products, collections have attributes that we can edit from the Shopify admin, including title, description and image.

Product tags

In addition to collections, we can also use tags to add more metadata to our products. Tags are often used to filter a collection. Let's demonstrate this with an example using the Pure Fix Cycles store:


Filtering via tags as shown in the Pure Fix Cycles Store

As you can see from the above image, we are in the XXX collection and we can filter it using the drop down list with tags.

Tags are also a very useful way of relating products to one another. We'll look at related products later in the series.

Themes

With the basics of products, collections, and tags, it's time to see how we create themes. The good news is that if you've ever created a website (and I assume most of you are reading this, in some form or another), creating a Shopify theme doesn't create any unpleasant surprises.

Every Shopify theme is made up of four key elements:

  1. HTML files (with an extension)
  2. CSS
  3. JavaScript (optional)
  4. images

These files are clearly arranged in five folders. As you'll see below, all you need is a handful of files. Here is the basic folder structure of a Shopify topic:

I added my own bare bones starter theme to GitHub. You are welcome to get a copy for your own projects.

Note that Shopify themes do not allow nested folder structures. Something else you might notice is that all of the bars of one of the HTML files don't have the usual extension. In Shopify themes, pretty much all HTML files have an extension - e.g. and .

The fluid in is the Shopify template language. It was developed by the original creators of Shopify and is now available as an open source project on GitHub. You may have already encountered this problem as it can be found in many projects including Mixture and SiteLeaf.

Let's take a closer look at the folders and their role in a topic.

financial assets

The Assets folder contains all of your images, JavaScript, and CSS files.

Many people, including myself, often separate files into subfolders by type; H. One for CSS, one for images, and one for JavaScript. Note that you can't do this in a Shopify theme. All of your files must be in the root directory of financial assets Folder. Also any files you upload Subject settings via the Shopify admin (which we will look at later) are added to this folder.

Config

If you're working on your first topic, you may not need to get into that Config Folder. However, as you progress with your topic structure, you will find it incredibly useful. The File folder is located in this folder. You will find that this is the one file does end in an extension.

If you open it in a text editor, you will see the typical file contains form elements such as file upload fields, check boxes, pick lists and text entries. This file allows design designers to create input fields in which dealers can edit data related to their design.

To explain this in more detail, we would like to say that we want to change the background color of the store. We could do this by inserting a text entry into our file like this:

The entered value or the default value as specified in the value attribute is now available in our templates via the global setting (available in every template). variable as follows:

settings.text_color

Don't worry if this feels a little strange now. It'll make perfect sense at the end of the series.

Topics can be edited using the online editor

Layouts

The layout folder usually has a file called it, but it can contain more than we'll discuss later.

Layouts are very powerful because we can define all the common elements of our website in a single file. When a page is requested, Shopify wraps that file around the template in question to render a single page.

One of the main advantages of layouts is that they allow us to keep our code well and DRY (Don't Repeat Yourself), make global changes very easy, and make working with our inner micro-stencils less complicated in dealing with us smaller ones Sections of Code.

There are two important Liquid tags that you need to include in a Shopify layout file. The first is. This variable needs to be added to the section of your layout file. This tag allows Shopify to put the required code in the document header, e.g. B. a script for statistics tracking and CSS files for the "logged in" administration bar

The second day is. This is usually in the middle of your template where you want your micro-template to appear.

Snippets

Snippets are files that contain sections of reusable code. These also contain the file extension.

I often find design designers to use snippets in a number of different ways. I personally do the following:

  • The code will appear on every page of the website - place the code in a layout file
  • The code is only displayed once on a given page. Place the code in the appropriate micro-template
  • The code will appear on multiple pages, but not on every page. Place the code in a snippet file

Examples of good uses for snippets are social links and pagination blocks. Cutouts can easily be inserted into our templates with the help of the liquid tag. Note that you don't need to add the extension when referencing the file.

templates

Finally, we come to the folder where you will spend most of your time. I often refer to the files in the templates Folder as Micro templates Simply because they are small pieces of code that are inserted into our layout file.

If the majority of your websites are contained in a markup layout file then these micro-templates are often very small.

Here is a list of the micro-templates that make up a theme and how to use them:

  • - Used when a page is not found.
  • - The article page for a blog post
  • - The archive list page for a blog
  • - A list page of all the items in your shopping cart
  • - A listing page of all the products in a specified collection
  • - The "Home Page", which you can customize to display one or more products, blog items, and collections
  • - One listing page for all of your product collections
  • - A basic page for content, ideal for conditions, across pages, etc.
  • - Used to display a specific product
  • - The template for displaying the search results

Mapping templates to URLs in Shopify

As you will see, there are ten micro-templates in total templates Folder. Fortunately, they have a good name, so when working with them it should be clear what they are doing.

The final piece of the puzzle is knowing when these templates will be rendered in a store. It's actually pretty straight forward.

Shopify uses the requested URL to determine which template to display. If you've ever used any of the popular development frameworks, you may be familiar with the concept of Routing. Shopify has its own internal routing system that determines which template is sent to the browser.

Here is an overview of which template is determined according to the URL:

  • → 404. liquid
  • → article.liquid
  • → blog.liquid
  • → cart.liquid
  • → list collections.liquid
  • → Collection
  • → Collection
  • → index.liquid
  • → page.Liquid
  • → list collections.liquid
  • → product.liquid
  • → such.liquid

The elements in denote a variable that affects the data loaded into a template. For example, if we were to take a URL pattern would represent a different record if we had it compared to.

As you can see, several different url patterns use the same template file, z and both will render the template.

Likewise, and everyone takes advantage of it.

Next…

Now that we have a thorough understanding of the key concepts behind Shopify, it is time to dig deeper into some more code-related questions.

In the next part of this series, I'll introduce you to Liquid, the Shopify template language, and show you how to easily fill your micro-templates with data from your online store. In the meantime, if you want to learn more, shopify.com/fordesigners is a good place to start.