The first thing we want to do is visit the theme store.  To do this we should first navigate to the Shopify theme store.

1. Log into the Shopify admin dashboard
2. Under sales channels, click on Online Store
3. Then under Themes section, scroll down and click “Visit Theme Store”
4. You should be on the Shopify Theme Store page now. Click on “All Themes” navigation menu at the top
5. Select the Free filter on the left

6. Then scroll down until you the Brooklyn theme. Click on the link to get to the Brooklyn theme page.
7. You’ll see that there are two styles. We are going to keep it as “Classic” and click the “Install theme” button.

8. Then click the “Publish as my store’s theme”

9. You’ll get a confirmation that the theme was installed, then click “Go to your Theme Manager”

Before adding in products, we are going to add in a few collections that we will be using in our store. You don’t have to do it in this order but, since we are basing this on the Brooklyn theme demo, we already know what we want to add.

Collections are essentially groups of your products within your Shopify store.  Some common uses of collections can be grouping colors or sizes, categories (mens, womans, kids), and things that are on sale.

Let’s add the categories shown on the demo site for the Brooklyn theme.

1. Starting from the Shopify Admin dashboard, go to the Products section on the left menu and click on Collections”

2. Here, I’ll add in my Title “MENS”
3. Then I’ll upload my Collection image: mens-large_1944x.jpg
4. Change the Theme template suffix to ‘collection.image’

5. Click the “Save collection” button to save.
6. Repeat the same steps for the remaining categories (womens, home, outdoor, bags, etc.)

As a side note, you can automatically assign collections to your products by defining Conditions.

You have the option of assigning collections manually, which is what we’ll do in this tutorial, but you can define some rules (e.g. product title contains “men”) and everything will be applied automatically.

This is a great option for stores that have hundreds of products that they are managing.

The first thing we want to do is visit the theme store.  To do this we should first navigate to the Shopify theme store.

1. From the Shopify Admin page, click “Online Store” under SALES CHANNELS.
2. Click on Pages
3. Click on the Add page button

4. Add the Title of the page
5. Next, we are going to add in content for a few pages

1. Click the ‘Add page’ button from the Pages section, under the Online Store in the SALES CHANNEL section of the Shopify admin
2. Add in the page title: About us
3. The About Us page has an image but begin by adding in the text:

4. Once the text is in place, we’ll add the image by clicking on the Insert image

5. After uploading the image (About/page-boot.jpg), update the size to 1024×1024

1. Click the ‘Insert image’ button
2. After inserting the image, click the alignment button and select “Center align”

3. Click the “Save”

1. Click the ‘Add page’ button from the Pages section, under the Online Store in the SALES CHANNEL section of the Shopify admin
2. Add the page title: Return policy
3. Add in the text. You can get this text from the demo page:

This page is a little different and requires us to add some code.  Let’s go through it step-by-step.

1. Click the ‘Add page’ button from the Pages section, under the Online Store in the SALES CHANNEL section of the Shopify admin
2. Add the page title: Contact us
3. Add in the image by clicking on the Insert image

4. After uploading the image (About/page-boot.jpg), update the size to 1024×1024

1. Click the ‘Insert image’ button
2. After inserting the image, click the alignment button and select “Center align”

3. In the top right of the editor you’ll see a Show HTML (<>) button. Click this button

4. Copy and paste this code into the form, after the image code.

5. Change the Template suffix from page to page.contact

6. Click the “Save”

One of the great things about Shopify is that they offer you to add in a blog for your website.  As you might have noticed in my past videos and articles, a blog is a great way add more content so that people can find you on the search engine, not to mention that it’s a great way to keep your customers updated on your business.

1. To begin adding a blog, click the ‘Blog posts’ link from the Pages section, under the Online Store in the SALES CHANNEL section of the Shopify admin

2. Then click the Create blog post button
3. Add in your blog title. In this example, we’ll enter “The Big Launch”
4. Now, let’s add in an image for the blog. Click the insert Image icon.
5. Upload the image
6. Select the image
7. Specify the size (for this example I’ll choose 1024×1024
8. Then we’ll copy in the text for the blog:

9. Let’s format the quote to the text you just added in. First copy the text (“There’s no one way….with us.”)
10. Then from the Formatting drop down, select Blockquote

11. Click the Save button at the bottom right of the page.

Now that we have our post in place, let’s activate comments for our blog.

1. To begin adding a blog, click the ‘Blog posts’ link from the Pages section, under the Online Store in the SALES CHANNEL section of the Shopify admin

2. Once you’re on the Blog posts page, click Manage blogs towards the top of the page (under the heading)

3. Click on the Blog name to edit the Blog.

4. Change the Comment settings to either moderation or automatically published

5. Click the Save button.

1. Starting from the Shopify Admin dashboard, go to the Products section and click on “All products”

2. Then click the “Add product” button

Adding in the product title

Add in a product description

This box is what they call a WYSIWYG (wiz-e-wig), which is short for What You See Is What You Get.  I’m going to add in the description

Adding Product images

Upload your image(s).  NOTE: Shopify is really great with SEO already, but I like to be as descriptive as possible in the file name of images.  So, if you are uploading a specific style of shirt or hat, make sure to include that.  For example, brandname-tshirt-cheetah-print.jpg.

Also, keep in mind that these images are ordered in priority from left to right and down.  You can drag around the images as you please.

For example, the featured image for the example below is the backpack itself, as opposed to the person wearing the backpack

Adding the product pricing

The pricing defined here will trickle down to any of the variants that you create for the products.

You’ll notice that there are two fields: Price and Compare at price.

The Price field is the cost of the item to your customer.

The ‘Compare at price’ is the original price, which can also be left blank if you prefer.  So, if you wanted to show an original price of $100 and the new price of $75, then you would set the ‘Compare at price’ as $100 and the ‘Price’ as $75.

Adding product inventory

Shopify makes it really easy to keep track of your inventory (i.e. the number of products that you have to sell).  You have the option of Shopify either keeping track of this for you or you can track it yourself.

If Shopify is tracking your product inventory, your customers will know immediately if you have a product available to buy.  If there are no more products available to sell, your customers will see that the items are ‘Sold out’.

The steps below show how you can setup your inventory in Shopify, however if you want to keep track of inventory on your own, change the ‘Inventory policy’ drop-down menu to be “Don’t track inventory.”

1. To begin adding the inventory begin my adding in a SKU and a Barcode.
2. Make sure “Shopify tracks this product’s inventory” is selected in the Inventory policy dropdown window.
3. Add in the quantity
4. Optionally, you can allow customers to purchase the product when it’s out of stock. I personally don’t do this with my stores, but if you are keeping a close eye on the inventory then this might be something to consider.

Shipping Calculations

Obviously this only applies to certain products (i.e. not digital downloads), but this is where you can update the shipping information for your product.  We’ll be going through this at a later time, but a few things to consider when setting these settings are:

• Find the average shipping rate for your store. Knowing this will help you pick a shipping courier for your products
• Once you’ve determined the average shipping rate for your store, you can begin offering flat rates to your customers. This sets expectations for people visiting your store and could help you finalize the same.
• Consider offering real-time shipping quotes for your customers. This enables customers to essentially pay what you pay for shipping.  This is a huge benefit because a high shipping cost can often deter your customers from buying a product

Adding product Variants

Product variants can be used when you have different variations of the same product.  For example, if you had a different color shirt and/or a different size, you would create variants accordingly.

In this example, we are adding in shoes, so I will create a variant for each size of shoe according to what’s seen in the demo site.

Note: the prices, SKU’s and barcodes specified in the sections above will auto populate here, so it might be easier to define everything first before creating variants

1. Click the ‘Add variant’ link
2. By default, the Option name is ‘Size’, so I’ll leave that as is.
3. Next I’ll add in the Option values, which are all the variations that fall under size. The shoe sizes in this case are 7, 7.5, 8, 8.5 and so on until size 12.  As you type in one size, use the “,” (comma) to separate it from the size itself.
4. As you add in the variants, you’ll notice that you can ‘Modify the variants to be created’. This is where you can specify the Price, SKU, and Barcode. As mentioned above, this information will be pre-populated for you if you added it in before creating variants
5. Specify the inventory. You’ll need to do this to start with but, if Shopify is managing your inventory for you, Shopify will automatically update this as you start making sells.

Assigning Collections

As mentioned above in the collections section of the tutorial, Shopify can add collections automatically.  However for the purpose of this tutorial and demo, we’ll be adding it manually.  You can assign more than one collection to the product and remove a collection by clicking the ‘x’ link next to the respective collection.

Store Customization page

To get to the customization page

1. From the Shopify Admin page, click the Themes link under the Online Store in the SALES CHANNELS section
2. Click the Customize button

Update the Header

Announcement Bar

By default, the announcement bar is automatically added into your Shopify store.  I personally love the announcement bar and I think it’s a great way to let your customers know what’s going on with your store, like special sales, featured products, and (my favorite) shipping discounts.

That said, I’m going to show you how to remove the announcement bar at the top of the website because it doesn’t exist in the Brooklyn Classic theme demo.

1. To remove the announcement bar, click on the Header section from the customization page

2. From the Header settings page, scroll down until you see the ANNOUNCEMENT BAR section and uncheck “Show announcement” and “Home page only”
3. Click save

Note:  if you wanted to keep the announcement bar, just update the ‘Text’ field and paste in a Link if applicable.  You can also change the Bar and Text of the announcement, by clicking on the color for the corresponding item.

Updating the Logo

There are two logo images we can upload: the regular image and the inverted logo.  The inverted logo is used when the background is dark, otherwise the regular image is normally black/dark.

1. From the customization page, click on the Header section
2. From the Header settings page, click select image.
3. Upload the image (if it’s not already in your image library) by clicking the plus sign. Then select the file named “logo_180x_2x_180x.png”
4. Click select
5. Then we’ll upload the Inverted logo, by clicking Select image.
6. Upload the image with the file named: [email protected]
7. Click save

Update the Main Menu

There are 2 ways you can update the navigation menu.  The first step is through the Customization page

1. From the customization page, click on the Header section

2. Click on Edit menu

The other way to update the navigation menu is from the Shopify Admin page.

1. Under SALES CHANNELS, click Online Store.
2. Then click on the Navigation menu and you should see the Main menu

As you will notice, both ways bring you to the same page.

Great, now let’s do a few house keeping things by deleting the pages that were automatically created with the store.

1. From the Navigation page, click on the Main menu link

2. To delete the pages, click on the trash button next to both pages.

3. You’ll be asked to confirm the removal of the menu item. Click the Replace icon.

4. Once the items have been removed, you should now see a message stating that “This menu doesn’t have any items”

5. Click the “Add menu item” link
6. You should see a pop-up window asking you to enter in the Name. Start by adding in the name: “MENS”
7. Then you’ll search for the Link.  Click into the search box, and select Pages.  Note, you should have already added in Pages for your site in the previous step.  If you have not done so, do that first and come back to edit the navigation menu.

8. Select the page, and then click the “Add” button.
9. Do this for the remaining pages on your site (Womens, Outdoor, etc)
10. Click the “Save” button when you are done

Now go visit your store to check out the header menu, and you should see that the pages were added!

Update the footer

Adding Pages

1. Under SALES CHANNELS, click Online Store.
2. Then click on the Navigation link
3. Once on the Navigation page, click on the Footer menu link

4. Click on the ‘Add menu item’ link

5. Add in the Name of the page (Return policy, Blog, Contact us, About us)
6. Click on the link search box
7. Choose the corresponding link for the page

8. Click Add

Add Social links

To get to the customization page

1. From the Shopify Admin page, click the Themes link under the Online Store in the SALES CHANNELS section
2. Click the Customize button

3. Click on the Footer section
4. Click the General Settings drop down window.

5. Fill in your profile links for your social media accounts
6. Click the “Save” button

Adding Payment Icons

Payment icons seem are a great way to bring trust to your store.  Payment icons are automatically added into your footer when a Payment Processor.

1. To add a Payment processor, start by clicking the Settings icon at the bottom left of the Shopify Admin page

1. From the Settings page, click on Payments

3. Click the Add a provider button in the Accepted credit cards section

1. Make sure that Shopify Payments is selected

5. Then click Continue.

There are a few more steps to complete the process, but take a look at the footer and you should now see the Payment icons

Upload Slider Images

Upload the first image for the slider

1. From the customization page, make sure you are on the Sections tab.  Then click Slideshow

2. From the Slideshow settings, click on the arrow for the first slide.  Then click select Image

3. Upload the image “hero_slide_1_4472x.jpg” (you can find this file in the Shopify Brooklyn Theme Sample file if you haven’t already downloaded it)
4. Once uploaded, click on the image and click the “Select” button on the bottom left. You should now see your image, with the Change, Edit and Remove buttons below.
5. Then, we are going to change the Text color to Light.
6. Change the text in the Subheading text to say “AMERICA’S FINEST”
7. And update the Heading text to say “Rugged Outwear”
8. Change the Button text to say “SHOP MENS”
9. Update the Slide link and choose Mens Collection
10. Click Save

Repeat the same steps as above for the second slide

1. Click on the second Slideshow dropdown
2. Upload the image “hero_slide_2_4472x.jpg” (you can find this file in the Shopify Brooklyn Theme Sample file if you haven’t already downloaded it)
3. Once uploaded, click on the image and click the “Select” button on the bottom left. You should now see your image, with the Change, Edit and Remove buttons below.
4. Then, we are going to change the Text color to Light.
5. Change the text in the Subheading text to say “NEW FOR 2016”
6. And update the Heading text to say “Spring Collection”
7. Change the Button text to say “SHOP WOMENS”
8. Update the Slide link and choose Womens Collection
9. Click Save

Edit the Rich Text

1. From the customization page, make sure you are on the Sections tab.  Then click Rich Text

2. Click the Rich text dropdown menu
3. Add/Edit the text

Update the Collection List

1. From the customization page, make sure you are on the Sections tab. Then click Collection list

2. From the Collection list settings, click and update the Collection

3. Click the Search collections text box and select the respective collection

4. Click the “Save” button when you are done making changes

Update the Featured collection

1. From the customization page, make sure you are on the Sections tab. Then click Featured collection

2. Under the Featured collection section, choose a collection under the drop-down menu

3. Click the Save button