Products are at the heart of every Shopify ecommerce website. If you are familiar with the Shopify content management system (‘the dashboard’) and want to learn a little more about how to enter your products so they look good on your website, are easy to find and do well in the search rankings, this article is for you.
Note: In December 2014, since the writing of this article, Shopify has changed the layout of their dashboard, therefore some of the images in this article are outdated. However, I believe that the main thrust of this article is still valid. Proceed with care.
I will go through the process of product entry by discussing each segment: how product information is stored in the Shopify product file (.csv file) and how ‘product type’ and ‘tags’ can be used to help with site navigation and product discovery. Lastly I will discuss what search engines like to know about your product and how you can check if your product page is giving them what they need.
But let’s start by imagining you are a web developer and you’ve been asked to make a Shopify ecommerce website for Merrell, the footwear manufacturer. We’re going to enter the first product, a shoe called ‘Azura Carex Mid Waterproof’ for women.
Start by typing: ‘Azura Carex Mid Waterproof’ in Google and find this shoe on the Merrell US website and while you’re at it also find it on Zappos.com, or any other website that ranks high.
Now log into the Shopify admin dashboard and click on ‘Products’. On the top right click: ‘Add a Product’.
Type the product title in upper and lower case. It’s best if the product title starts with either ‘Womens’ or ‘Mens’, followed by the name of the product. When you’re selling shoes or clothes, having the gender in the product name is a good way for a customer to identify whether this product is for a man or a woman.
Later on we’ll see how Shopify uses tags at the navigation level to filter products based on gender, sending people quickly to the relevant product and making product categorization a logical process.
As a title we enter: “Womens Azura Carex Mid Waterproof”. (I decided to leave off the apostrophe of ‘women’s’ and ‘men’s’ — grammatically incorrect, but functionally better.)
The product description text can be formatted with html tags, using them wisely can increase the readability of your description. Remember that ecommerce is a bit like having a bricks and mortar shop with a rather dumb robot as a shop attendant. Having intelligent, easily readable descriptions of your products is important — html formatting helps with that.
Glean the product description from Merrell.com by going to the source code (view source) of the page and by copying the text including the html tags. (For the sake of this article I assume that Merrell has asked you to make this website and that they have given permission to use their proprietary product descriptions. In general you would write your own product descriptions. Unique product descriptions are important from an SEO point of view.)
Back at the Shopify dash board, click the ‘show HTML’ button on the right of the content box, and paste.
Out of the product description condense two lines of text that best sum up this product in an attractive, marketing-like way. A small piece of ‘lead-in text’, something about the product that will entice people to read more and engage further. These two lines are there so people can quickly grasp whether the product is something for them or not. This text should be economical, to the point and not repetitive. It’s the product’s ‘elevator pitch’.
While in ‘view source’, put this piece at the top and put at the beginning an ‘h3 opening tag’, like this:
<h3>
and at the end an ‘h3 closing tag’:
</h3>
Depending on which Shopify theme you are using, the text will be formatted slightly bigger than the main text (body text).
If there is a relevant video of this product, put it under the product description. To make the video look good on all mobile devices (responsive web design), put the Youtube video link in the following code:
It will work depending on the Shopify theme you are using, if the theme caters for ‘responsive video’ or not. (Check with your theme provider.)
If there is a lot of product text it might be useful to hide some of the less relevant content under two or more tabs. (see below)
Depending on your theme, tab formatting might have already been set up. I use the excellent ‘Retina’ theme made by OutOfTheSandbox. This short page explains how to use tabs in the product description, if you use the Retina theme.
Tabs in Shopify are a great way to present information without clutter.
Product type is important for people to find the product they are looking for once they are on your website. It is also important for site navigation.
For instance, Merrell makes many types of shoes. The website’s navigation needs to reflect the various product categories (or ‘product types’ as Shopify calls them) so that customers can quickly find the product they are interested in, be that ‘a life style shoe’, ‘hiking boots’ or ‘sandals’. By choosing the right product type for each shoe, building an easy to understand site navigation will be possible. More about that at the end of this article.
Product Type and Vendor in the Shopify dashboard
Choose Merrell. This attribute will be useful if you website carries products from other manufacturers. People will easily be able to search by vendor.
Now is a good moment to save the page by going to the top of the page and click ‘Save product’.
Variants are versions of the same product, in shoe retail they are ‘shoe size’ and ‘shoe color’.
Under ‘Inventory & variants’ click ‘edit options’ — a dialog box opens. Click: ‘Add another option’ and choose ‘Size’. Fill in the smallest size for that product (for instance for size 5 enter ‘5’).
Click: ‘Add another option’ again, but this time choose ‘Color’ instead. Fill in the color that is going to be this product’s lead image (flagship image) ie the best selling color of this particular product.
Delete ‘title’.
Click: ‘Save changes’.
Voila, you have entered the first variant ie one size of one color.
The Shopify dashboard: Inventory & Variants.
Still in the ‘Inventory & variants’ section, click ‘edit’ on the right. Enter price, SKU (stock keeping unit) and barcode. Under ‘Inventory policy’ choose: ‘Shopify tracks this product’s inventory’ and enter the number of shoes of this variant that are in your warehouse. Click ‘save and close’.
SKU, price and inventory added.
Tick the box to the left of the first product you have entered and then click on ‘Bulk actions’. Choose ‘DUPLICATE VARIANTS… in another Size’. Add the next size. Continue until all the available sizes have been entered.
Add available sizes by hand. (tedious I know…)
Note: once the sizes have been entered, color variants can be added in bulk using the ‘Bulk actions’ feature.
Entering your shoe sizes and color variants this way is the slow way. There is a faster way, but that involves getting in the ring with a spreadsheet program like Excel or Google Sheets. The file that Shopify uses to store all product information is called a ‘.csv file’. ‘csv’ stands for: comma separated value, a spreadsheet format where each bit of information is separated by a comma.
All the product information that you enter into Shopify using the dashboard, can be downloaded as one single .csv file and opened in a program like Excel or Google Sheets. Adding product variants in this way is quicker than using the Shopify dashboard, particularly once you know how the spreadsheet handles product variants.
To learn more I recommend entering one product (including its variants) by hand and then downloading the product .csv file. Open it in Excel or Google Sheets to get a feeling for how the information that was entered translates into the spreadsheet file. (Read what Shopify has to say about the product CSV file.)
Variant images can be added from your local hard drive or they can be ‘fetched’ from the web. When fetching an image from the web, right clicking it will give you a drop-down menu where you can choose ‘Copy image URL’.
Go back to the Shopify dashboard, under ‘Images’, click ‘add images from the web’. Paste the image url and click ‘Fetch’.
Or if the originals are on your computer use ‘Choose images’.
Make sure to upload an image that is biggish, at least 2048 pixels high or 2048 pixels wide. To avoid data bloat Shopify translates images during upload into 11 predefined sizes. Depending on the device width, the appropriate size is always served, so that someone viewing the website on a desktop computer will get bigger images than someone viewing the website on an iPhone.
Shopify will not scale images up ie if you upload a small image, suitable for iPhone, when that product is viewed on a desktop computer, that product image will look and feel small, because people viewing your site on a desktop computer expect to see big images.
Take away: always upload the biggest image you have, but not bigger than 2048 pixels width or height and Shopify will do the rest.
Click on ‘Alt’ and enter the name of the color. This needs to be the same name as was given above. If the color names don’t exactly match, the color drop-down menu on the website will not work properly.
The Color drop-down menu
At this point it might be a good idea to save and test the page. Click ‘save’ at the top right of the page, then under ‘Product details (at the top) click ‘View on your website’. A new tab will open with the page showing. Does everything look ok so far? Something will be broken and that’s what we’re going to fix now.
Under Inventory & variants, continue by selecting all variants of the first color and choose ‘Bulk actions’ — ‘update images’. In the dialog box that opens highlight the corresponding image and click ‘save’.
Select all variants of the next color and repeat the above step.
Click save and test the page again. You will see that whenever a customer clicks on a variant image, the color drop-down menu will change accordingly and visa versa.
Leave this section as it is. Products are best automatically added to collections based on vendor, product type and tags. Creating collections by hand is sensible if you only have a handful of products otherwise it’s best to give relevant attributes to your products using product type, vendor and tags and then creating collections using ‘conditions’. Read about Collections in the Shopify manual.
Tags can be used in three ways:
1/ Defining whether a product is for men or women (important for navigation) — add either a ‘Men’ or ‘Woman’ tag.
2/ Tagging the product with attributes that the customer is likely to know about and search for once they are on the website. (this has nothing to do with search engine optimization, about that later)
To give an example, if a shoe has a ‘Vibram’ sole, then adding the tag ‘Vibram’ will make it easy for people to find other Merrell shoes that use that type of sole.
3/ Marking a product ‘for sale’ or making a product a ‘featured product’ that will appear on the home page for instance.
Add only tags that people know about and would use when talking about a product, not technical terms that only industry insiders are familiar with. A good place to find relevant tags would be the review section of zappos.com or Yelp. Read there what people are saying about a product to get tag ideas.
Tags take away: Only add tags made of words that are actively being used by customers. (relevance). Only add a tag when your website is carrying more than one product worthy of that tag. (too many tags will result in ‘tag soup’ — avoid.)
Page title
The page title has been pre-filled based on the product title that was filled in at the top. From a search engine optimization point of view, it will be good to add the vendor name (‘Merrell’) and the country where you are based.
For instance if your shop is based in Australia and you don’t ship world-wide,
‘Womens Azura Carex Mid Waterproof’
would become
‘Merrell Womens Azura Carex Mid Waterproof — Australia’
Like the page title, the meta description is pre-filled, based on the ‘product description’ above. This description might be suitable to describe the product once people are on the website, but might not be suitable when they eyeball their Google search results. It’s important to write the most effective elevator pitch about your product here.
Here’s a secret weapon to get your SEO ducks in a row — the ‘Google Structured Data Testing Tool’.
Start using it by doing a search in Google for our product’s name and by choosing the Zappos.com search result for instance. Copy the url of the Zappos page and paste it in the ‘structured data testing tool’.
You will see what zappos.com has used as the SEO title for the product and their SEO product description. Don’t copy Zappos material, but rather use it to gather inspiration. Write your own SEO title and product description. It’s obviously not legal to infringe on another company’s copyright, but it is perfectly legal to draw inspiration from their writing…
Also remember Google’s 160 character limit, you might need to shorten the description.
Now we’re going to see how your product page is doing compared to Zappos’ page of the same product. To do that you save the page and at the top of the page click on‘View on your website’. Paste the url of your page into the ‘Google Structured Data Testing Tool’. You can now see how Google will display this product when people search for it. Make adjustments in the dashboard if need be.
For the shoe we’re entering, we can compare the SEO efforts of Merrell with Zappos’ for instance. You will see that at the time of writing (December 2014), Merrell has some catching up to do when it comes to offering a rich menu of meta data to Google Search.
When people love your product they might like to talk about it to their friends on Facebook. There is a tool that helps you to see how your product will display on Facebook. It’s called the Facebook Debugger Tool.
I did the same comparison as above, but now on Facebook: Merrell vs Zappos. Again Merrell (as of the time of writing) can do better, especially when you see how the product image plays out on Facebook. (go to the Merrell link above and click on “See this in the share dialog.”)
Much of how your product page will display in Google’s search results and on Facebook depends on what Shopify theme you are using. The Retina theme that I have used for my recent project informs search engines of the product’s price, in what currency it is available, whether the product is in stock, in which country it is available, people’s reviews of the product etc.
The product handle (on the Wordpress platform called ‘slug’) is the name by which Shopify identifies a product. It is also the last part of the product url, the bit after the last forward slash. You can also find the product handle in the first column of the Shopify product .csv file. (see screenshots below)
The Shopify product handle…
…And the resulting Shopify URL
The Shopify products spreadsheet. Here you see the first three columns: column A is the product handle, followed by the product title and the product description columns.
By the way, there can not be two products with the same handle.
The handle is auto filled based on the product title at the top of the page. No spaces are allowed, words are lower case separated by dashes for clarity. For instance:
womens-azura-carex-mid-waterproof
Here you can control whether a product can be seen on the website or not. Handy if your business carries products that are season-based like apparel. While you are selling your summer range you can be working on entering the product details of your winter range. When winter comes around products can be turned on (made available on your website) at a push of a button.
Leave this setting as is.
Save the product and view on the website.
One way that people will discover your website is when they search on Google for one of the products you are carrying. Let’s say someone finds your page for the Merrell shoe ‘Azura Carex Mid Waterproof’ and they like it, but they want to see what other shoes are available on your site. It would be handy to have some catagories at the top of the page, so people an navigate to other types of shoes. This is where your website’s navigation comes in. The better you arrange your products in categories the more people will engage with them.
Taking cues from Merrell.com it makes sense to split your products into ‘products for women’ and ‘products for men’. But how to do this so that product entry becomes a logical process?
Here’s how in Shopify your product details (the main topic of this article) determine how your website’s navigation functions.
1/ Divide your products into product types, in this case I use Merrell’s categories: Lifestyle Boots, Hiking Shoes & Boots, Athletic Shoes, Lifestyle Shoes and Sandals.
2/ Create the website’s navigation using above product types. (read about how to do that in Shopify’s excellent manual)
3/ Once you have the navigation set up, create a collection for each product type. (read this article how to do that.)
4/ Link each collection to each navigation item, ie link the ‘Athletic Shoes’ navigation item to the ‘Athletic Shoes’ collection so that when the customer clicks on ‘Athletic Shoes’ the ‘Athletic Shoes’ collection is displayed.
5/ At the Navigation section of the Shopify dashboard, after you have linked a collection, you can filter that collection with a tag. (see screen shot below)
Since ‘Athletic Shoes’ can be a shoe type for men or for women ‘Filter with tags’ enables you to either return a collection of ‘Athletic Shoes for Men’ or a collection of ‘Athletic Shoes for Women’. This is possible because, when you were entering your products, you have given each shoe a tag of either ‘women’ or ‘men’. In this way, with any product type, you’ll be able to separate the boys from the girls.
Screen shot from the Shopify Navigation dashboard. Navigation items can be linked to collections and then filtered using tags.
Why would you want to do this you might ask? In online shoe and apparel retail on the homepage the first choice that people are usually given in the navigation bar at the top of the page, is the choice between ‘men’ or ‘women’. Most shoe types are for both sexes, as is the case with ‘Athletic shoes’. By applying a product category plus a tag to each shoe, you can create a relevant collection depending on whether the customer has clicked on ‘Athletic Shoes’ under the ‘Women’ or the ‘Men’ section of the navigation bar. Working this way simplifies the product entry process.
A product that can’t be found, does not exist.
Wow, you managed to read to the end of this article, congratulations!
To recap: in this article I’ve tried to give an overview of how the product details that you can enter in the Shopify dashboard have repercussions beyond your product’s page. The product details are like a spider in a web, they are important for your website’s navigation and your SEO efforts as well as how your website interacts with your warehouse. (but that’s another story…)
The Shopify product spreadsheet is the centerpiece of your website, many threads are brought together to make the tapestry of your ecommerce efforts.
Happy Shopify-ing!
