Installation

 Contact your Edgemesh representative to see if you are eligible for access to Edgemesh Server. 
Enable Edgemesh Server with Edgemesh
The first step to setting up Edgemesh Server for your site is getting in contact with your Edgemesh Representative and having your domain whitelisted and enabled. Ensuring this is done prior to setup will reduce the amount of downtime from switching over to Edgemesh Server.  You will need to provide Edgemesh with your primary domain and the domain or address to proxy to.
Forward your DNS to Edgemesh
To finish your Edgemesh Server setup, you need to point your primary domain to Edgemesh's Proxy Service. Each DNS provider will have slightly different interfaces/methods to do this:
1.Delete any existing DNS records (A or CNAME) that point to your primary domain.
2.Create a CNAME record for your primary domain and point it to proxy.edgeme.sh.
If your DNS provider does not support CNAME Flattening, a naked domain (@) might not work.  If this is the case please use www as the CNAME.
Additional Requirements for Shopify
Create your Checkout Domain
Shopify requires that your checkout is resolved with them.  The first step is to create a CNAME record for your checkout and point it to Shopify.  Let's call it checkout.
All DNS providers a slightly different, so you will have to determine how to do this for your hosting provider:
1.Create a CNAME record for your checkout subdomain.
2.Point the CNAME to shops.myshopify.com.
3.Set the TTL to Auto or 1 Hour.
Add Checkout Domain to Shopify
Now that the DNS is done, lets go to your Shopify Admin and update the custom domain.
1.From your Shopify Admin, go to Online Store > Domains.
2.Click Connect Existing Domain.
3.Enter your new checkout domain (checkout.yourstore.com).
4.Click next.
5.Wait for the SSL Certificate to be issued.
6.Promote the new checkout domain to the primary domain.
Add Redirect Script to Theme
1.Go to Layout > theme.liquid and add the following script below the {{ content_for_header }} tag. Replace yourstore.com with your primary domain.
<script id="ems-redirect" type="application/javascript" src="https://yourstore.com/ems-redirect.js"></script>
Your website will now be redirected to Edgemesh Server when an external link sends them to another URL that resolves to your shop.
Adding custom redirect exclusions
If you have a page that is dependent on account login or should otherwise not be redirected back to Edgemesh Server, you can use the data-exclude attribute on the redirect tag to add a comma separated lists of additional pathnames to exclude from redirection.  Pathnames must start with / .  
<script 
  id="ems-redirect"
  type="application/javascript"
  src="https://yourstore.com/ems-redirect.js"
  data-exclude="/apps/custom/page, /tools/account">
</script>
Add Cookie Sync Script to Theme
Now that your store is separated across two domains, one for Storefront and one for Checkout, the cookie sync module marries them back together by syncing specific cookies between the two domains.
1.Go to Layout > theme.liquid and add the following script to the top of the head element. Replace yourstore.com with your primary domain.
If you are a Shopify Plus customer, you should also add the Cookie Sync Script to your checkout.liquid as well.
<script type="application/javascript" src="https://yourstore.com/ems-cookies.js"></script>
Your cart and discount_code cookies will now be automatically synced between both domains.
Adding Syncing Additional Cookies
Edgemesh syncs some cookies by default, but you may want to sync additional cookies.  To do so you can add the data-cookies attribute to the script and supply it with the cookies you want to sync.  You can only sync non HTTP Only cookies (anything thats visible to document.cookies).
<script 
  type="application/javascript"
  src="https://yourstore.com/ems-cookies.js"
  data-cookies="custom_cookie=86400, custom_cookie_session">
</script>
The data-cookies attribute expects a comma separated list of cookies that you want to sync. You can set the max age of each cookie by adding =<time to live in seconds> to the cookie name.  If no time to live is set, the cookie will only live for the session duration.
Solving Common Caveats 
Your Shopify Edgemesh Server installation is complete.  Depending on your theme, there may be some additional changes required to get full functionality.  Any server side liquid variables might end up being cached and therefore need to be moved to the client side. Below is a list of common problems and their solutions:
Cart Badge Icon
Cart badge icons are commonly powered by the {cart.item_count} liquid variable.  To get this feature working again, it needs to be moved to the client side. The following is an example of how to achieve this.
Given the liquid icon button:
<a class="cart-button">
  {% if cart.item_count > 0 %}
    <span class="icon icon-circle">
      {% cart.item_count %}
    </span>
  {% endif %}
  <span class="icon icon-cart"></span>
</a>
Add a classes to control element visibility.
.hidden {
  display: none;
}
Update the icon to not depend on liquid variables.
<a class="cart-button">
  <span id="cart-button-badge" class="icon icon-circle hidden"></span>
  <span class="icon icon-cart"></span>
</a>
Create a snippet called cart-button-badge. We will fetch cart data and then use a mutation observer to wait for the actual cart badge element to appear so that we can populate it. This allows us to place the  snippet in the <head> element without having to worry if the badge is rendered/exists yet or not.
<script type="text/javascript">
  // Fetch the cart
  fetch('/cart.js').then(res => res.json()).then(cart => {
    // Configure mutation observer
    const observer = new MutationObserver((mutations, self) => { 
​
       // Try to grab the cart button badge element
      const cartButtonBadge = document.getElementById('cart-button-badge')
​
      // Once element exists, perform update
      if (cartButtonBadge) {
        // Based on the item count, render the badge
        // This will differ based on your theme
        if (cart.item_count > 0) {
​
          // Make the badge visible
          cartButtonBadge.classList.remove('hidden')
​
          // Update the count value
          cartButtonBadge.innerHTML = cart.item_count
​
        } else {
​
          // Hide the button badge element
          cartButtonBadge.classList.add('hidden')
        }
​
        self.disconnect() // End observing
        return
      }
    })
​
    // Begin observing
    observer.observe(document, {
      childList: true,
      subtree: true
    })
  })
</script>
Add the snippet to your main theme file's <head> element.
{% render 'cart-button-badge' %}
Now your cart button badge is rendered client side and you can take advantage of Edgemesh Server's enterprise grade caching without losing any functionality.

Integrations - Previous

Google Analytics

Next - Edgemesh Server

Dynamic Fragments

Last modified 6mo ago

Copy link

Outline

Enable Edgemesh Server with Edgemesh

Forward your DNS to Edgemesh

Additional Requirements for Shopify

Create your Checkout Domain

Add Checkout Domain to Shopify

Add Redirect Script to Theme

Add Cookie Sync Script to Theme

Solving Common Caveats