Shopify Customization

by ONELIVE Webmaster

If existing apps or new apps need to be applied to this store, they should be listed as sub-tasks of this task (or as stand-alone tasks, depending on scope). In most cases, the necessary apps have already been installed or connected; we are now working to customize the apps so that they work well for the particular purposes of the client.

Configure Google Tag Manager

Note: If you have not been granted permission to GTM, ask for your email to be added (via Task comment). You will receive an invitation from Google when your email has been added.

We use GTM for a variety of functionality, including analytics and the injection of various third-party code into a site.

  1. Log into Google Tag Manager.
  2. Find the appropriate Container ID for the client (e.g. BandMerch, Global, Sandbag, Sony, Universal OR an OLM Hosted Site should have their own Container ID, OR a Shopify Store)
  3. Change the Container ID in the shopify theme to correspond with the client. (e.g. GTM-N3BJTD for a BandMerch client)
  4. Now in Google Tag Manager -

For OLM Managed clients: under OLM Managed Clients click Shopify Stores. OR

For Merch stores: under Merch Stores click the appropriate Merch client (BandMerch, Global, Sandbag, Sony or Universal.) OR

For OLM Hosted sites: under OLM Hosted Sites click the appropriate client.

    NOTE: Sites will no longer use a LiveChat Variable in GTM. Skip the Add LiveChat Tag instructions and follow the Configure LiveChat steps.

    Add LiveChat Tag

    If the site is to have LiveChat:
    1. Find the "LiveChat GTM Code" notebook in the TeamWork project.
    2. Find the Group ID in the code. It will be number following "__lc.group," as in "__lc.group = 5". In this example "5" is the Group ID. Make a note of this value.
    3. In Google Tag Manager, click Variables in the left side menu.
    4. Click LiveChat Groups in the list of Variables shown.
    5. At the end of the list of Input/Output values, click +Add Row.
    6. In the new row, enter the URL of the current site (e.g. willie-nelson.myshopify.com) for Input. This URL will be updated when the site is launched.
    7. Under Output, enter the Group ID, you noted in Step 2 above.
    8. Click Save Variable.
    9. Click Publish in the upper right-hand of the window to publish your changes to the site.

    Configure AddShoppers

    AddShoppers is a social push tool we are using to give shoppers the ability to share their purchases with others.
    1. Log into AddShoppers.
      1. Your Email webmaster@onelivemedia.com
      2. Password ZCjr26kpp
      3. Click Login.
    2. Select the intended Store in the dropdown menu at the top of the screen. AddShoppersStoreMenu
    3. Go to Apps in the left sidebar menu.
    4. Click Configure under Sharing Buttons. You should be in the Floating tab.
    5. Select Twitter, Facebook, Google+, Email, Pinterest and LinkedIn for Sources.
    6. Features select Enable hover popup widget.
    7. Customize > Size Big.
    8. Customize > Position Left.
    9. Customize > Button Background Enter the color used for secondary button background in the site Design Scheme (see Project Notebooks for Design Scheme). Hit "Enter" after entering the hexadecimal color code for it to take effect.
    10. Customize > Button icon Enter the color used for secondary color text in the site Design Scheme. Hit "Enter" after entering the hexadecimal color code for it to take effect.
    11. Click Push It Live. You should be able to see the floating buttons appears momentarily on the site.

    Product Page Share Panel

    The AddShoppers share buttons should be already appearing on the Product Detail page, as this code is baked into our Base Theme. However, in certain versions, the padding between the share panel and the product description may not be adequate (i.e. too close).

    To adjust the distance between the bottom of the share panel and the top line of the product description:

    1. Go to Online Store > Themes.
    2. Click Customize theme.
    3. Click Products.
    4. In After Cart Content, add the following in the opening <div> tag: style="margin-bottom: 20px;" . You can adjust the distance by changing "20px" to any appropriate value. After modifying this code, it should appear similar to: 
      <div class="share-buttons share-buttons-panel" data-style="medium" data-counter="false" data-oauth="true" data-hover="true" data-promo-callout="left" data-buttons="twitter,facebook,google,email,pinterest,linkedin" style="margin-bottom: 20px;">
    5. Click Save Changes.

    Configure Yotpo

    Configuring Yotpo for a client site takes several steps.
    1. Log into Yotpo by Client Group. 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
    2. Select the store you wish to configure in the top, upper-right drop-down menu. Yotpo-Store-Drop-down
    3. Go to the Settings menu by clicking on the user silhouette in the top menu bar: Yotpo-Settings-Menu
    4. Copy the API key under API Credentials.
    5. Go to Online Store > Themes in your Shopify store backend.
    6. Click Customize theme.
    7. Click Advanced.
    8. Paste the API Key into Yotpo API Key.
    9. Click Save changes.
    10. If showing, click ACTIVATE CONVERSION TRACKING. Activate-conversion-tracking
    11. Click ACTIVATE in the modal dialogue that appears. Activate-Tracking
    12. In the modal wizard, click Copy code and click the Next arrow.
    13. Go to Settings > Checkout in the Shopify Store backend.
    14. In Order Processing > Additional content & scripts, paste the Yotpo code at the end of any existing code (i.e. if any code is already present in this field, append the Yotpo code).
    15. Click Save.
    16. In the Yotpo modal wizard, click the Next arrow again.
    17. Click ACTIVATE CONVERSION TRACKING.

    Once these items are completed, product reviews and conversion tracking is in place for the site.

    Moderation Settings

    We configure Yotpo initially so that submitted reviews are not automatically published to the website until someone has reviewed and approved the review for posting.

    Note: Before configuring Moderation, review the Site Requirements or consult the Project Manager to find out to which email address reviews are to be sent for moderation.

    1. Click Moderate in the top menu.
    2. Click Moderate Settings in the sidebar menu.
    3. Select Enable the Help Desk Integration.
    4. Enter the desired email address to where reviews will be emailed for moderation.
    5. Select all boxes under Auto Escalation.
    6. Click Save Changes.
    7. De-select Auto publish reviews with a minimum star rating of:

    There is no additional "Save" button after deselecting auto publish.

    The remaining configurations are accessed by clicking Tools in the top menu bar. Each section appears in the left sidebar.

    Collect Reviews

    Email and General Settings

    1. Expand General Settings.
    2. Click the icon next to Logo:
    3. Upload the store's email logo as created and stored in DropBox.
    4. From name: [Store Name].
    5. From email: [Store customer support email address] (for some clients, this would be support@onelivemedia.com; see the Site Information sheet for information).
    6. In the next section, set Product Reviews at 80% and Site Reviews at 20%.
    7. Click Save changes.
    8. Expand Products to promote.
    9. Title: Have you considered these?
    10. Click Save changes.

    Mail After Purchase

    1. Bulk purchase settings > Product reviewed: least reviewed product.
    2. Click Save changes.
    At the bottom of this page, under "Add a reminder":
    1. Click Add.
    2. Bulk purchase settings > Product reviewed: least reviewed product.
    3. Click Save changes.

    On-Site

    Reviews Widget

    Under the General Settings tab:
    1. Select Better Performance.
    2. Click Save changes.
    Under the Look & Feel tab:
    1. De-Select Widget Background Transparent.
    2. Enter Widget Background: ffffff
    3. Click Save changes.

    Reviews Tab

    We will initially activate the Reviews Tab. Certain clients may not want this tab showing. However, without this tab, site reviews will not be available for public viewing.
    1. Select Reviews Tab enabled:
    2. Default Reviews Tab Site tab.
    3. Review Tag header text: Real reviews from real fans
    4. Position Right
    5. Click Save changes.

    Social & Loyalty

    Comments

    1. Label: [Store Name].
    2. Check Check this box to display your comments in expanded view.
    3. Click Save changes.

    Q&A

    First, make sure the Q&A is "Enabled."
    1. Label: [Store Name].
    2. Uncheck the first two boxes under "In order to ..." (see graphic below) Yotpo-QA
    3. Click Save changes.

    Configure LiveChat

    The main focus with LiveChat is to style the LiveChat message box to match the branding scheme of the store.
    1. Log into LiveChat. (For client accounts managed outside of the ONELIVE account, see the Notebook File for login credentials).
      1. Username metrics@onelivemedia.com
      2. Password sps3kcRGgx4L
      3. Click LOG IN.
    2. Click Installation from the right sidebar.
    3. Under URL rules Click Add URL rules.
    4. Click Add rule.
    5. Enter the Shopify store URL and assign to the Group.
    6. Enter the store URL and assign to the Group.
    7. Click Save rule.
    8. Go to Settings (the "gear" icon in the top menu bar) LiveChat-Settings-Menu
    9. In the Chat Window > Theme tab, click pick a group. (This only applies for stores which are within the ONELIVE media LiveChat account; otherwise, you may disregard instructions relating to groups.) LiveChat-Pick-Group-Link
    10. Select the store you wish to configure in Settings for group:
    11. Click Chat window from the right sidebar.
    12. Pick your theme modern.
    13. Pick your color enter a dark hexadecimal color from the stores Site Design scheme. Do not use the primary color, but any other dark color of the scheme can be used. Also avoid the same color as the site footer.
    14. Click Advanced window tweaks.
    15. De-select Display Logo.
    16. Click I'm done editing.
    17. Click Save changes.
    18. Click Customize using own CSS.
    19. Paste the following code to move Chat Window to left. 
      #livechat-compact-container,
#livechat-full {
     left: 20px!important;
     right: auto!important;
}
    20. Paste the following code for mobile devices. 
      @livechat-mobile { 
 #livechat-compact-container {
 transform: scale(0.5) translatey(50%);
 -webkit-transform: scale(0.5) translatey(50%) translatex(50%);
 -moz-transform: scale(0.5) translatey(50%) translatex(50%);
 }
 }
    21. If you want to change the text color, Paste the following code, changing to the desired HTML color code. 
      #content #full-view-button {
color: #173489;
}
    22. If you are configuring the Chat Window color White, Paste the following code (this will position left and configure for mobile as well). 
      #livechat-compact-container,
#livechat-full {
     left: 20px!important;
     right: auto!important;
}
@livechat-mobile { 
 #livechat-compact-container {
 transform: scale(0.5) translatey(50%);
 -webkit-transform: scale(0.5) translatey(50%) translatex(50%);
 -moz-transform: scale(0.5) translatey(50%) translatex(50%);
 }
 }
#content #full-view-button {
color: #000000;
}
@livechat-mobile { 
#content #full-view-button {
color: #000000;
}
}
#content #open-label {
color:#000000!important;
}

#title #title-text {
color:#000000!important;
}
.icon-minimize, .icon-close, #open-icon {
color: #000000;
}
    23. Click I'm done editing.
    24. Click Save changes.
    25. Click Chat Window > Language.
    26. Under the Customize area, enter the following changes in the fields containing the replaced copy:
      1. Welcome to LiveChat Live Help is Here!
      2. Chat Now Need help?
    27. Click Save changes.
    28. Click Chat Window > Pre-chat survey.
    29. Hover over the "Welcome to our LiveChat..." text area until an Edit link appears. Click Edit.
    30. Enter We're here to help! Please fill in the information below to start the chat.
    31. Press Enter. (The key on your keyboard.)
    32. Click Save changes.
    33. Click Installation > Email.
    34. Your support email: [Store Support Email Address]
    35. Your support name: [Store Name] Support
    36. Click Save changes.

    Configure MailChimp

    Subscribe Form Configuration

    1. Log into MailChimp. UN: musicone PW: GWC1414
    2. Select ONELIVE Media account.
    3. Go to Lists in the top menu bar.
    4. Find the appropriate store list and click on the name of the list.
    5. Click Signup forms.
    6. Click Embedded forms.
    7. Click Naked.
    8. Copy the text in the Copy/paste onto your site field.
    9. Paste the text into a text editor on your computer.
    10. Find the form action tag, which will look like this: 
      <form action="//OneLiveMedia.us1.list-manage.com/subscribe/post?u=83280adac6bd89afc15222bc4&amp;id=36185df3e0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    11. Copy the text within the quotes of the action attribute. Add secure, https: to the URL. In the above example, it would be: 
      https://OneLiveMedia.us1.list-manage.com/subscribe/post?u=83280adac6bd89afc15222bc4&amp;id=36185df3e0
    12. Go to Online Store > Themes in the Shopify store backend.
    13. Click Customize theme.
    14. Click Social.
    15. Paste the copied action path into Newsletter submit URL.
    16. Click Save changes.

    List Settings

    To complete this configuration, you will need to refer to the Site Information in TeamWork.
    1. Log into MailChimp. (If you need access, please ask the CTO for a login account.)
    2. Go to Lists in the top menu bar.
    3. Find the appropriate store list and click on the name of the list.
    4. Go to Settings > List name and defaults.
    5. List name Edit the name of the list, if necessary. Remove the name of any merch company, such as "Global," "Bandmerch," etc. This name is seen by customers; the name of the merch company will only confuse them. Use something like [Store Name] Customers.
    6. Default "from name" Customer Service
    7. Default "from" email Use support@onelivemedia.com for any clients for whom we will be providing customer service. For all others, use the client's customer support email address.
    8. Default "subject line" Updates from [Store Name]
    9. Select Let users pick plain-text or HTML emails.
    10. Select Send unsubscribe confirmations to subscribers.
    11. Email daily digest to: metrics@onelivemedia.com
    12. Click Save List and Campaign Defaults.
    13. After saving your changes, you may notice a verify domain link underneath Default "from" email. If so, click this link, then click Send Verification Email.
    Note: A verification email will be sent to the entered email. The client or recipient should forward the email so that the verification code can be entered (you can return here and enter the verification code later by clicking verify domain. If you wish, you can send an email to the address you entered and ask the recipient to forward the verification code to you: You may receive an email from MailChimp asking you to verify "[email address]." Please forward the email with the code to me and I'll update your MailChimp account. Thanks, [Your Name]
    1. Go to Settings > Required email footer content.
    2. Company / organization For our customer service accounts, use ONELIVE Media. Otherwise, use the [Client Company].
    3. Contact name For our customer service accounts, use Bret Williams. Otherwise, use the client's primary contact name. This should be an actual person's name.
    4. Email address For our customer service accounts, use webmaster@onelivemedia.com. Otherwise, use the client's primary information email address.
    5. Phone For our customer service accounts, use 512-371-6924. Otherwise, use [Store Phone Number].
    6. Follow the same policy for the address fields. For our address, use 210 Barton Springs Rd Suite 500 Austin, TX 78704 USA
    7. Website URL [Store URL]
    8. Click Save.

    Add Riskified

    For Shopify stores that are using the OneLive Stripe gateway, Riskified will need to be added to help prevent fraud.

    Only Install Riskified on stores that are using the OneLive Media merchant account.

    Note: Add Riskified only for stores under following groups a) OneLive Direct b) Sony c) RCA d) Merch Collective & d) CMG

    1. Log into the Shopify store backend.
    2. Go to Settings &gt; Payments &gt; Payment authorization settings.
    3. Select Manually.
    4. Click Save.
    5. TO DOWNLOAD (Signed in as OLM Webmaster):While replacing the bolded shop url with the shop url you wish to add. So in this case, please use the following link, after you have signed in to shopify:https://app.riskified.com/auth/shopify?shop=shopurl
    6. Go to https://app.riskified.com/login
    7. Enter credentials (obtain from account manager).
    8. Click Log In.
    9. Click Webmaster in the top-right menu.
    10. Click Switch Account.
    11. Select the new account you wish to modify.
    12. Click Settings in the left hand bar.
    13. There will be three checkboxes you need to complete: Enter credit card payment details (email project manager for CC info), Agree to the chargeback guarantee and set the domestic country.
    14. Click the Plan tab.
    15. Select Shop Protection. Screen Shot 2015-06-02 at 4.56.44 PM
    16. Click the Account tab.
    17. Invite the following users:
      1. hollye@onelivemedia.com [select Admin role and Refunds &amp; Chargebacks]
      2. support@onelivemedia.com [select Team role and Order Declines]
    18. Update the webmaster@onelivemedia.com account to receive notices only for Technical Issues.
    19. Domestic country United States
    20. Time Zone: (GMT -6:00) Central Time (US & Canada), Mexico City
    21. Click Advanced tab.
    22. Select auto capture, Auto Void
    23. Select Send customer confirmation requests
    24. Click Save Changes.
    25. Log out.
    26. Email integrations@riskified.com with this email: 
      Dear Riskified,

We have added [Store_URL] to Riskified and connected it to the Shopify store. We will be launching this site soon, so please make appropriate accommodations.

Please email me when confirmed.

If you have any questions, please let me know.

Thank you,
[Your_Name]
ONELIVE Media
    27. When you receive confirmation, copy & paste their confirmation into a Notebook file in the TeamWork project.

    Configure Bold Apps - In Stock Reminder

    For Shopify stores using the In Stock Reminder App, the email address will need to be verified.

    An email will be sent to the "Reply-To-Email" address. Make sure the recipient knows to verify the address.

    Leave a comment

    Back to Shopify Site Programming