as CampTech and HackerYou. I work with large, well-established agencies in Toronto such as Jam3 and Whitman Emorson.

Transcription

1 camptech.ca/shopify

2 About Me I offer web development services to agencies and small businesses specializing in ecommerce solutions. I am also an educator for various web development courses such as CampTech and HackerYou. I work with large, well-established agencies in Toronto such as Jam3 and Whitman Emorson. When I m not hunched over my laptop, I go riding (horses, not motorcycles) and attempt to train my wild jack russell / lab mix. Built Shopify sites ranging from designer dog gear to luxury clothes

3

4 Schedule Intro to Shopify and each other Sign up and add some products Theme Settings Collections Store Navigation Pages and Blog Nitty Gritty! (Settings) Order Management Customer Management Discounts Add-ons Highlights of the day: - gifs delicious lunch talking about shopping (and selling) taking control of your Shopify store

5 Why is Shopify awesome? Easy to get products on the web easily and start selling right away E-commerce can be hard! SSL what? Payment gateway who? Shopify to the rescue! Started by a small business owner (who knew how to program but still!)

6 Alternatives to Shopify Woocommerce Can only use with WordPress Free, but necessary plugins cost $$ SquareSpace Only offers 1 payment gateway (Stripe) Doesn t have 24/7 phone support BigCommerce Closest competitor to Shopify No option for Point-of-Sale and templates are dated

7 Why Shopify? Fully Hosted Solution - Ability to purchase a custom domain. If you already have your own domain (eg. you can use your existing one! Search Engine Optimized (SEO) - Preview of what a product will look like when returned as a google result. 24/7 Phone Support - Live chat and support are also available. Add ons - Integrate MailChimp for newsletters, Easy to Use - Tons of documentation, community forums and workshops (like this one!)

8 Meet & Greet Quick introductions :) 1. What s your name? 2. What are you selling? (if you prefer not to say, that s fine - how about a time you bought something online?) 3. Share something that has got you excited or inspired (eg. movie, book, life event, etc)

9 First Steps Sign up for Shopify 1. Go to this link 2. Enter , password and store name 3. Select Online Store (you can always add POS later) 4. Add contact details 5. Survey questions (optional) That s it! You now have a free 30-day trial store (normal trial length is only 14 days)

10 Admin area View site Return to the main home admin area Time left on account before needing to sign up for plan

11 Example Shopify Store VOC Key Features of a great Shopify store Beautiful, large pictures of products and banner images that are well-shot Clear, descriptive text that is good for search engine optimization Blog section to show a clear idea of who you are to customers (slice of life) Contact page for customers to get in touch Detailed Terms of Service (shipping, returns, etc) Responsive theme that works well across every type of device

12 Add a new product Let s add some products to our store. Add a new product here.

13 Adding content to product Title - mandatory field. This must be filled out so that search engines can find your product and it will also be the handle of your url (eg. Yellow Shirt becomes http: //myshop.ca/products/yellow-shirt) Description - mandatory field. Try to be as descriptive as possible and don t just copy and paste from a manufacturer s site. Links can be included Embed videos into the description (eg. instructional or product reviews) Bullet point lists are a great idea since they are easy to scan for customers

14 Add images to product Add images with this button. You can upload multiple images at once - just select all the ones you would like for this product Download this zip file of placeholder images The largest image is the thumbnail image - drag and drop to rearrange.

15 A word on images Good photography is important when you are selling products It is possible to make small edits to your images within Shopify using the edit image feature (the pencil icon that appears when you hover over image) Take your own photos and then edit them with

16 Organizing your product Product type - Think of this as the main product category. For example, skirts for a skirt (make the product type plural) Vendor - There might not be a vendor - for example a soap store with soaps that all have the same brand name. However, if the product has a different vendor you can add it here. For example, a clothing store that sells both Levi s and Guess jeans. (vendors can be hidden on the product page in most themes) Collections - By adding a product type, there is no need to add a specific collection unless this product is part of a manual collection. We will be covering collections in greater detail. Tags - Searchable keywords that help your customers find products. Only add keywords if they are not listed in the description. Some examples might be organic, limited edition, summer.

17 Product Pricing Price - this is the price (before applied taxes) that will be charged to your customer Compare at price - original price of product to compare current price with (eg. Price = $50 and Compare at price = $65) - great for showing discount when items are on sale Checkbox - determines whether taxes should be charged on product (I m not a lawyer, but usually taxes are charged dependent on location and digital products are not taxed)

18 Inventory & Shipping Inventory - allows you to track your products by SKU and/or barcode to keep on top of product availability Tracking inventory is not mandatory Shipping - depending on the weight of your products, it should be considered whether you will charge more for shipping based on this. Some products (like workshops, events, and digital downloads don t require any shipping)

19 Product Visibility Ooooh - visibility! Full control over hiding and showing your products with checkbox Set when your products become visible with the calendar icon - opens up a date and time picker to set publish time

20 Product Variants Let s create a product with variants together! Add a new product called Logo T-Shirt Add a description Find the Variants section and click Add Variants Type Small, Medium, Large **You ll see that new sizes are added each time you use a comma Add another option called Colour

21 Bulk editing and reordering variants To quickly change shipping, price, sale price and more Shortcut keys are available to quickly navigate the spreadsheet Change the order that variants appear For example, it might be easier to group t-shirts by color instead of size Changes order on customerfacing view as well

22 Individual images for variants Uploading different images for each variant Select all the variants with the same colour Click Bulk Actions and then Update Images Choose image

23 Managing products Bulk editing products hide/show add to collections inventory management Export and Import products

24 Product Exercise Manually upload 2 new products (we have 3) use your own images or the provided placeholders title and description add SKU numbers track inventory add at least 2 variant to one of the products *Bonus* Embed a video in the description section. Instructions here.

25 Collections What is a collection? A collection is a way to group your products together. For example, all of the products with a product type of skirts can be automatically put in the skirts collection. Or all the products that have a Compare at price (ie. they are on sale), can be put in a collection called Sale. These collections can be associated with the navigation.

26 Manual vs Automatic Collections Manual collections Manual collections are created by selecting (by hand) each product that should be in a collection. Automatic collections Automatic collections are created by using a series of conditions to auto-select products to include. Examples All products with the product type of shirts All products that are under $100 All products with a tag of limited edition

27 Which type of collection to use? Which one to use? Use both! Manual collections are great if you are having a special promotion and you only want to include certain products, but automatic collections take care of the legwork when you are adding new products to the site by populating them automatically.

28 Add a new collection Title is mandatory, but description is not. Helps for SEO though. Choose automatic collection to create collections based on conditions Set collection image that will appear on the main collection page.

29 Automatic Collections Automatic collections can have a variety of different conditions Note* If you have more than one condition, make sure that you are selecting any condition - otherwise you might not get any results Products can be sorted all sorts of different ways - even manually

30 Collection Exercise Create 3 automatic collections - we will be using these later for our navigation set an image for the collection image try sorting your collections in different ways add different conditions and see products appear

31 Brainstorming Session! What makes you trust an online store? How can we incorporate some of these ideas into our Shopify site? What makes you distrust an online store? How can we avoid this?

32 Shopify Themes Now that we have some products and collections set up, let s take a look at some of the awesome free themes that we can use on our site The default theme is called Launchpad-star and you can keep it if you d like, but let s add some new themes to play around with Go to Online Store > Themes and click Visit Theme Store - we can search by free themes! Find a theme that you like and click Install theme Don t worry about overwriting anything in our products or collections - we are only changing the appearance of our site, not the content I will be using Brooklyn, but feel free to choose another theme, however be aware that some of the theme setting might be slightly different since they differ from theme to theme

33 Theme Settings Back to the main admin area Preview how your site looks on all devices! Depending on the theme, you will have different sections let s play around! Your changes will only be saved if you click Save Changes

34 Theme Settings Exercise Install a theme of your choice (choose a different one than what is already installed) and change the setting and preview your changes) Use some of the placeholder images that have been provided, use your own or grab some new gorgeous images from Change the font style and size Update the colours on the checkout to match your branding Upload a logo if you have one *Bonus* Know HTML/ CSS? That s cool! If you are on a mac, you can download an app to edit files or edit directly from the theme page under > Edit HTML/CSS

35 Store navigation Use collections to create sections of our site Links can be hardcoded (link to partner site or social media)

36 Navigation Exercise Drop downs can be created by naming a link list the EXACT same name as the title that you want it to drop from Example - if I want to create a submenu for Catalog, then I create a link list called Catalog - then add the links that I want to appear in the submenu

37 Pages Pages are for static content - if you have items that need to be updated all the time, use blog posts instead Page Templates give your page a different look - these can be added by a developer

38 Pages Exercise Create an About page and a Contact page Add an image to your About page - something that will help your customers recognize that there is a real trustworthy person behind your business! *Bonus* Add a Google map to your contact page. Instructions here.

39 Blog Change the name of your blog here! Blog posts can be used to drive sales This is not WordPress!!! There is a limit to the amount of customization (without coding) Comments can be turned on and off

40 Blog Exercise Write 3 blog posts and use images in each Add 2 links in each of your blog posts that take customers to another area of the site: link to a product link to a page (about, contact) Change the name of your blog (by default, all blogs are called news )

41 Settings!! The Nitty Gritty

42 General Settings Changed your marketing and sales speak? Don t forget to let google know!

43 Payments Shopify offers over 70 payment gateways - so selling around the world is not a problem Use the (bogus gateway) for testing purposes

44 Shipping Shipping zones need to be set before shipping rates Free Shipping Based on order price Based on order weight So many places to sell to!

45 Taxes Are you charging taxes? Digital only products sometimes don t need to be taxed Don t forget to pay the taxman every year :)

46 Notifications Get notified right away when you get an order! Greatest feeling ever!!!! Also manage your customer s through this area

47 Files All the usual suspects can be uploaded (pdf, doc, jpg, png, etc) Upload your instructional pdfs, newsletters here

48 Account Force any other staff out of admin area (git out!) Download and view invoices Add new staff members (or remove) Only available if you are store owner

49 Sales Channel Add Point of Sale (brick and mortar) Sell items on Facebook store Add widget to any site (WordPress, static HTML)

50 Online Store Title and description (this is what shows up in Google results) Add Google analytics tracking code here Launch that site! Take off the password protecting your site (or allow friends and family to take a sneak peek)

51 Orders, orders everywhere!

52 Managing Orders All of your orders will show up under Orders, but you can also manually create orders (over the phone for example)

53 Exercise - Create a test order NOTE - this can only be used once you have activated a plan with Shopify, but your credit card will not be charged until the trial expires (however, it will be automatic!) Go to payments and select bogus gateway as the payment method

54 Exercise - Create a test order Credit Card: 1 = Successful Transaction 2 = Failed Transaction 3 = Gateway error (PayPal can t be reached for instance CVC - any three numbers Expiry - any date in the future Enter your OWN (a real confirmation will be sent for you to view) Once the order has been completed - check it out on the order screen If you are using Shopify Payments - they also have a testing account

55 Example Order Refunds can be completed on this screen Find customer quickly and easily Resend confirmation

56 Order Exercise Enable desktop notifications to get alerted when new orders come in Create 3 orders with your bogus payment gateway Refund one of the orders Mark an order as fulfilled and view the in your inbox (remember we are using our OWN s to test) Change some of the text in the confirmation (hint: this is in Notifications)

57 Managing Customers Manually add customers See your customers at a glance

58 Customer Management Once your store has more customers you can get a good sense of who you are selling to Filters!

59 Discounts Everyone loves a sale! Use discount codes to entice users back to the store Great for abandoned checkouts!

60 Brainstorming session What are some features that you need in your store? (that we haven t covered?) ;) Think about how much per month you can spend on add-ons. What is the ultimate goal of your site?

61 Add ons Chimpified - Product Reviews - Buy Button - Add This Sharing Tool - Social Media Stream - Image Compression - Alt Text - And many more! The ones listed above are all free :)

62 Final thoughts Shopify is just a tool that you can use to sell products online Need to think about the final goal - what are you selling and who are you selling to? Build your website with your target audience in mind Have fun! Read Shopify s Blog - it is a goldmine for small business owners!

63 Great job everyone! Happy Selling! The day your first order comes in.

64 Resources We maintain a list of great resources on the Camp Tech website at camptech.ca/resources/. Check back often! Also, follow Camp Tech on Facebook and Twitter, where we often share Shopify tips and tricks:

65