Shopify Setup

The following are the steps needed to set up Shopify sites for clients who are using the OneLive Advantage shipping solution.

Development Store Setup

Login to the development store.  [store name].myshopify.com/admin 

Add Staff Users

Invite the staff users to the Shopify instance who will be working on creating the new site. Project Administrators already have access; this is for the designers and developers who will be working on specific tasks within the site.

Generally, each staff user should be given access to all parts of the back end except for Domains. Additionally, designers and content editors should be restricted from Settings and Apps.

Current Staff User List:

Mehul Parekh mehul.parekh@onelivemedia.com
Rian Neil rian.neil@onelivemedia.com (Designer) Leslie Crunkilton leslie.crunkilton@onelivemedia.com

To assign a Staff User:

  1. Go to Settings > Account.
  2. Click Add a staff member.
  3. First Name Enter first name of staff member.
  4. Last Name Enter last name of staff member.
  5. Email address Enter email address of staff member.
  6. Click Send Invite.
  7. Click Staff User Name now showing in the list of Staff Members.
  8. Select Limit admin access for [Staff Name].
  9. De-select the items for which the user is not allowed access.
  10. Click Save.

General Settings

When setting up a new store, there are basic configurations which drive other configurations within Shopify.
  1. Go to Settings > General.
  2. Store details:
    1. Name [Store Name] (e.g. Willie Nelson Shop).
    2. Account email webmaster@onelivemedia.com.
    3. Customer email webmaster@onelivemedia.com.
  3. Store address:
    1. Legal Name of Business Enter the name that will appear on invoices as the legal company name.
    2. Phone [Store Phone Number]
    3. Street [Store Address]
    4. City [Store City]
    5. Postal / ZIP Code [Store ZIP Code]
    6. Country [Store Country]
    7. State/Province [Store State/Province]
  4. Standards & formats:
    1. Timezone Select store owner's primary time zone.
    2. Currency Select the desired primary currency for the store.
    3. Unit system Select preferred unit system.
    4. Default Weight Unit Select the appropriate weight unit.
    5. Edit order ID format (optional) > Prefix [StoreCode] Each store/client has a 2-4 letter code. Use this as the Order prefix. Orders should then appear as, for example, WN1001, BMLG1001, etc.
  5. Click Save.

Install Base Theme

Once the Shopify instance has been created, the OneLive Advantage base theme will need to be installed.
  1. Log into the backend of the new store (after creating the development store you can click Log in now at the top of the screen).
  2. Go to Themes.
  3. Click Upload a theme.
  4. Click Choose File.
  5. In the Open File dialogue, choose OLM Base Theme > OLM Latest Theme Zip > ONELIVE Advantage.zip in DropBox.
  6. Click Upload.
  7. Once the theme finishes processing, click Publish Theme.
  8. Click Publish in the alert modal dialogue.
  9. Go to Settings > Online Store.
  10. Homepage title [Store Name]
  11. Click Save.

Add Shopify Apps

When creating a new Shopify store, there are a few apps which are generally added and configured. Some may not be relevant, though, so take care to understand if any non-required apps need to be installed.

Note: Apps marked with an asterisk (*) are required installations.

MailChimp

Note: Unless otherwise noted, please install this on each new site. We can easily uninstall later, if necessary. Some rare clients will have their own email service.

To install the MailChimp app:

  1. Log into MailChimp. UN: musicone PW: GWC1414
  2. Select ONELIVE Media account
  3. Go to Lists.
If there is no list already present for the client store:
  1. Click Create List.
  2. Click Create List (in the gray box).
  3. List Name [Store_Name] Customers.
  4. Default "from" email newsletters@onelivemedia.com.
  5. Default "from" name [Store_Name].
  6. Remind people how they got on your list select Designer Test.
  7. Notifications Daily Summary.
  8. Click Save.
Once a list has been created:
  1. Log into the Shopify Store Admin.
  2. Go to Apps.
  3. Click Visit the App Store.
  4. Find the MailChimp for Shopify app.
  5. Click on the App.
  6. Click Get.
  7. Click Install MailChimp for Shopify.
  8. Click login on the MailChimp app page.
  9. Log into MailChimp.
  10. Click ONELIVE Media.
  11. Click Connect a list to this store.
  12. Select the Store's list in the drop-down menu.
  13. Click Start Syncing.

AddShoppers*

At this stage, we will install AddShoppers app and code. Final configuration will come just prior to launch.
  1. Go to https://app.addshoppers.com/login/.
  2. Username webmaster@onelivemedia.com
  3. Password ZCjr26kpp
  4. Click Login.
  5. Select +add more shops in the top drop-down menus of shops. addshoppers-addshop-menu
  6. Shop Name [Store_Name]
  7. Domain www.[StoreDomain].com Do not use the [store_name].myshopify.com domain; use the actual primary domain that will be used when the store is launched. Note that in many cases, the primary domain is shop.[StoreDomain].com.
  8. Select the most appropriate category. Don't worry if you can't find an exact match; choose whatever you feel is closest.
  9. Select I agree to the Terms and Conditions.
  10. Click Add This Shop.
  11. Select your new Shop in the top drop-down menu. Make sure you're working in the correct Shop!
  12. Go to Apps in the sidebar menu.
  13. Click Configure under Social Analytics.
  14. Select Shopify in the drop-down menu for platforms. Shopify-Dropdown
  15. Enter your Shopify identifier [store_name] As it appears in the Store URL (e.g. store_name.myshopify.com).
  16. Click link under Install our plugin. AddShopperLink
  17. In pop-up window, click Install AddShoppers Social Marketing Apps.
  18. Click Install for both Tracking code and Product Schema.
  19. Go to Apps.
  20. Click Configure under ROI Tracking.
  21. Click Install for Conversion code.

Yotpo*

Yotpo provides product and site reviews.
  1. Go to Apps.
  2. Click Visit the App Store.
  3. Find the Yotpo Product Reviews app.
  4. Click on the App.
  5. Click Get.
  6. Click Install Yotpo Product Reviews.
  7. Log into Yotpo:
Note: Bandmerch:  UN: webmaster+bm@onelivemedia.com PW: ZXEKHY34jy
CMG:  UN: webmaster+cmg@onelivemedia.com PW: ZXEKHY34jy
Epic: UN: webmaster+epic@onelivemedia.com PW: frgfrwhfd453
Global: UN: webmaster+gm@onelivemedia.com PW: ZXEKHY34jy
MerchCollective: UN: webmaster+tmc@onelivemedia.com PW: ZXEKHY34jy
OL Direct: UN: webmaster+olm@onelivemedia.com PW: ZXEKHY34jy
Sony: UN: webmaster+sony@onelivemedia.com PW: frgtyhfd453
Universal: UN: webmaster+um@onelivemedia.com PW: ZXEKHY34jy
Sandbag: UN: webmaster+sb@onelivemedia.com PW: ZXEKHY34jy
    1. In the upper-right menu bar in Yotpo, select Add new store.
    2. Website: [Shopify_URL] e.g. store_name.myshopify.com.
    3. Click Add new store.
    4. Click the right green arrow on the installation widget until all panels have been traversed.
    5. Click LET'S CUSTOMIZE.
    6. Click Validate your shop domain (in the yellow alert area).
    7. Enter the shop domain (e.g. [store-name].myshopify.com).
    8. Click Save changes.
    9. Find and click the click here link in the pink alert area.
    10. Your Store Name Enter the name of the store (e.g. Willie Nelson).
    11. Click Save changes.
    12. Copy the API Key.
    13. Go to Online Store > Themes in the Shopify store backend.
    14. Click Customize Theme.
    15. Go to Advanced in the right theme settings menu.
    16. Paste the API Key into Yotpo API Key.
    17. Click Save changes.
    18. Log out of Yotpo (under user silhouette in menu bar).

    LiveChat

    We will be installing LiveChat for those accounts where we (OLM) are providing customer service. These are primarily our "merchandising" clients. Shopify stores built for other clients will have LiveChat installed on a case-by-case basis.

    Note: Please check with the Project Manager if you have any questions about whether to install on a particular site or not. If chat is to be installed for a non-merchandising client, a newLiveChat account will need to be created for that client. Ask the CTO to have the client set up their LiveChat account and provide login credentials.

    1. Go to Apps.
    2. Click Visit the App Store.
    3. Find the LiveChat app.
    4. Click on the app.
    5. Click Get.
    6. Click Install LiveChat.
    7. Log into LiveChat. (If for a client account not included in the ONELIVE LiveChat account, consult the Project Notebook file for credentials.)
      1. LiveChat login: metrics@onelivemedia.com
      2. Click Continue.
      3. Password sps3kcRGgx4L
      4. Click SIGN IN.
    If LiveChat is to be installed for use by ONELIVE Customer Service:
    1. Go to Agents in the top menu.
    2. Click Groups. Groups-Menu
    3. Click Add a group.
    4. Name [Store Name] (e.g. Willie Nelson).
    5. Select all Members shown.
    6. Click Add a group.
    7. Click Settings Icon in the top menu bar (gear).
    8. Go to Channels > My Website in the left sidebar menu.
    9. In the Upper-right, click pick a group and select the group you just created. LiveChat-PickAGroup
    10. Copy the code shown in the large field and paste into a project Notebook file entitled "LiveChat GTM Code."
    11. Log out of LiveChat.

    If LiveChat is being installed for a client for whom they will have their own LiveChat account, copy the integration code provided when the account is created and paste into a Notebook file as described above. Note: the CTO in creating the account may already have saved the code.

    Note: The LiveChat feature will not appear on the site at this point. Later in the project, the code will be added to Google Tag Manager and then will appear on the site.

    Google Shopping*

    1. Go to Apps.
    2. Click Visit the App Store.
    3. Find the Google Shopping app.
    4. Click Get.

    Note: Do not Sign into your Google Account at this time. This will be setup later in the project.

    Shopify Digital Downloads

    If a client needs to provide digital downloads (and barring any additional requirements relating to this):
    1. Go to Apps.
    2. Click Visit the App Store.
    3. Find the Digital Downloads app.
    4. Click on the App.
    5. Click Get.
    6. Click Install Digital Downloads.
    7. Click Settings in the Digital Downloads navbar.
    8. In the Update email, replace "Hey" with "Hello".
    9. Click SAVE EMAIL.
    10. In the First fulfillment email, replace "Hey" with "Hello", and "Rock on" with "Enjoy".
    11. Click SAVE EMAIL.

    Documentation on this app can be found at http://goo.gl/uvc9DH.

    Persistent Cart*

    This apps adds the ability to set a time period in which a customer may return and have their cart contents still in their cart.
    1. Go to Apps.
    2. Click Visit the App Store.
    3. Find the Persistent Cart app.
    4. Click on the App.
    5. Click Get.
    6. Click Install Persistent Cart.

    Order Printer by Shopify*

    In similar fashion, add the Order Printer by Shopify app.

    Bold Apps

    Based on the requirements of the store, you may be asked to install additional apps, particularly those from Bold Apps, with whom we have a special deal.

    If you do install a Bold App, please email Ryan Carbotte and let him know what app/s you have installed and on what .myshopify.com domain it/they are installed.

    Configure Initial Settings

    Using the client's information from their New Site Information Form, create their store settings.

    General Settings

    1. Log into the new development store.
    2. Go to Settings > General. (left side menu)
    3. Homepage title [Shop_Name].
    4. Timezone Select timezone from Site Information form. If no timezone known, select (GMT-06:00) Central Time (US & Canada).
    5. Edit order ID format (optional) > Prefix [Client_Code]. 
    6. Currency Set to client's preferred Primary Currency.
    7. Select Password protect your storefront.
    8. Password 1live.
    9. Click Save.

    Checkout Settings

    The following are default settings, subject to changes based on the customer requirements.

    Note: Please review the New Site Information form attached to the project to see if any information suggests modifications to these default settings.

    1. Go to Settings > Checkout.
    2. Customer Accounts Accounts are optional.
    3. Field Settings
      1. Full name Require first and last name.
      2. Company name Optional.
      3. Apt, bldg, etc. Optional.
      4. Phone number Required.
    4. Order Processing
      1. While the customer is checking out Select Use the billing address as the shipping address by default.
      2. If the customer abandons their checkout, send them an email reminder to complete their order: Six hours later.
      3. Collecting consent to send promotional emails to customers from your store Customer agrees to receive promotional emails by default.
      4. After an order has been paid Do not automatically fulfill any of the order's line items.
      5. After an order has been fulfilled and paid Select Automatically archive the order.
      6. Click Save.
    For the Refund, privacy and TOS statements use the boilerplate documents provided in this Wiki, editing them for the particular store.

    With each of these, use the Text Code shown on the page. Copy and paste it into the appropriate fields. Be sure to update the information in each for contact email and addresses.

    Products

    If AddShoppers is used for Social, then the display for showing social links will need to be disabled.
    1. Go toOnline Store > Themes.
    2. Click Customize theme.
    3. Click  Products from the theme side menu.
    4. Uncheck "Show social share links."
    5. Click Save changes.

    Checkout

    The terms and conditions need to be displayed on the Cart Page.
    1. Go toOnline Store > Themes.
    2. Click Customize theme.
    3. Click  Cart from the theme side menu.
    4. Check "Show Agree with Terms and Conditions Checkbox."
    5. Click Save changes.

    Add Social Links

    Using the Client "New Site Information" document, add the desired social links.
    1. Go to Online Store > Themes.
    2. Click Customize theme.
    3. Click  Social from the theme side menu.
    4. Check "Footer column 3" Yes
    5. Enter the link code for the desired social links.
    6. Click Save changes.

    Create Collections and Menus

    Before you begin, go to the client's current website. Understand the category and hierarchy layout of the current store. Shopify does not provide nested categories, and, in fact, there are not categories in Shopify, only Collections.

    Therefore, the key is to understand the categories of the current site that do contain products. For example, if the current site has Apparel > Men's > Shirts as a category hierarchy, we need to create a Collections for each of these menus, even if we only assign products to the Shirts Collection. Of course, products can be assigned to each level in the hierarchy, as well as assigning the same product to all hierarchies.

    Creating Collections

    Featured Products Collection

    In creating Collections, we also want to create a "Featured" Collection for use, perhaps, on the store's Home page. This is optional, but it can be useful for displaying key products. For this Onboarding process, we will create a Featured product Collection, as well, and assign it to the Home page layout.

    To create the "Featured" Collection:

    1. Go to Collections.
    2. Click Frontpage.
    3. Edit Collection detail > Title Featured.
    4. Edit Search engines > URL & Handle featured.
    5. Click Save.
    6. Go to Themes.
    7. Click Customize theme.
    8. Go to Homepage.
    9. Products Collection Featured.
    10. Click Save changes.

    Creating Product Collections

    You need to create Collections to represent the categories and sub-categories of the client's current site. This is necessary for two reasons: to create the hierarchal menus and to provide proper titles and content the category pages at all levels.

    The key to creating Collections is to determine how to assign products. There are basically two methods for assigning products: automatically and manually.

    Note: Consult the project's Product Management plan for how/what Collections should be created.

    If, by observing how products are categorized in the client's current site, you can determine an automatic means of assigning products, that is preferred as it allows the client to add products and have them instantly assigned to Collections. However, if the assignments are a bit less clear, then a manual process of product selection is perhaps better. Whatever method is chosen, we can alter this once the site goes live, although it may require deleting and re-building Collections if switching between manual and automatic methodologies.

    Note: The method of assigning products will also determine how products are imported into the site. When importing using a CSV file, a product can only be assigned to one single Collection. However, by using the "Product Type" attribute, we can automatically assign products to Collections.

    Unfortunately, there is no process for rapidly importing Collections.

    As you work out the Collections schema for the new site, keep in mind that the Title of the Collection should eliminate any confusion when viewing the list of Collections. For instance, if the store needs Shoes > Mens and Shoes > Womens, the Collections created should be "Shoes," "Mens Shoes," and "Womens Shoes," not just "Shoes," "Mens," and "Womens." as "Mens" might be confused with Apparel > Hats > Mens, if you were to also name the Mens Hats Collection "Mens" (in this case, the Collection would be named "Mens Hats").

    Once you have a handle on the site category hierarchy, you need to first create the Collections, then the navigation menus.

    To create a new Collection:

    1. Go to Collections.
    2. Collection Details > Title Collection Title.
    3. Conditions Select either Manually select products or Automatically select products based on conditions, depending on how products will be assigned to a Collection. The preference is to find an automated means of assigned products; otherwise, choose the manual process.
    4. Click Save collection.

    Update Main Menu

    Once you have all the Collections created (for all hierarchical elements), you need to modify the Main Navigation menu to reflect this category "tree":

    Note: By default, Shopify uses a top level menu item called "Catalog." We want to get customers to the products they want as quickly as possible. The top menu should contain the top level Collections instead of this extra "layer." The exception would be if there are too many top level Collections that would cause the main navigation bar to be unruly. In this instance, we need to rename "Catalog" to "Shop," and renaming the Catalog Link list to "Shop." We feel "Shop" is a better top level category name than "Catalog."

    To edit the Catalog navigation menu item:

    1. Go to Navigation.
    2. Click Edit Link list for the Main Menu Link List.
    3. Edit the "Catalog" Link Name Shop.
    4. Click Save.
    To remove the Catalog navigation menu item:
    1. Go to Navigation.
    2. Click Edit Link list for the Main Menu Link List.
    3. Click the trash can icon to the right of the "Catalog" Link Name.
    4. Click Save.

    Hierarchical menus are created by using "Link Lists" whereby a sub-menu exists when the Name of a Link List is the same as an item in another menu. For example, if in the Main Menu Link List has a link titled "Apparel," then if you build a Link List titled "Apparel," then the elements within the Apparel Link List will appear as sub-menu items of the Apparel navigation menu.

    Note: For more information about drop-down navigation, see Create a drop-down menu on my storefront.

    To add a top-level Collection to the main navigation:

    1. Go to Navigation.
    2. Click Edit Link list for the Main Menu Link List.
    3. Click Add another link.
    4. Link Name Menu Name (which may be different than the actual name of the Collection; e.g. "Men's" for "Men's Shoes").
    5. Links To… Collection.
    6. Select a collection Choose Collection.
    7. Drag the new menu item, if necessary, to its proper order in the navigation menu.
    8. Add any additional menu items by repeating Steps 3-7.
    9. Click Save.
    To add sub-menus:
    1. Go to Navigation.
    2. Click Add a link list.
    3. List list details > Name Collection Name (use the same name as shown in the parent Link List).
    4. Add links, using Steps 3-7 of the preceding process.
    5. Click Save.

    Create Footer Menu

    Our sites generally have a "Helpful Links" menu in the footer of the theme. This menu will contain links to important pages within the site.
    1. Go to Online Store > Navigation in the Shopify backend.
    2. Click Add a link list.
      1. Name Helpful Links
      2. Handle footer
    3. Under Links:
      1. Link Name Search
      2. Links to… Search page
    4. Click Save link list.

    While this will only have one link at this point, others will be added during the Design & Content project phase.

    Pre-load Sample Products

    Load a few sample products indicative of the types offered by the client. Incorporate attributes, such as "Product Type" that may be used to assign products to Collections.

    Note: In order for our designers to work on layouts, add at least six sample products, all within a single Collection hierarchy. Assign these products to the Featured Collection, as well, so they will show up on the Home page.

    1. Log into the backend of the new store.
    2. Go to Products. (left side menu)
    3. Click Add a product.
    4. Enter Title and Description.
    5. Add Images.
    6. Enter Pricing and Shipping information.
    7. Add variants.
    8. Click Save product.
    (More information about Shopify Products can be found in the Shopify Online Manual.)

    Leave a comment