Installation

 Edgemesh Server is currently in early access preview.  Contact your Edgemesh representative to see if you are eligible for the early access program.
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.
1
<script id="ems-redirect" type="application/javascript" src="https://yourstore.com/ems-redirect.js"></script>
Copied!
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 / .  
1
<script 
2
  id="ems-redirect"
3
  type="application/javascript"
4
  src="https://yourstore.com/ems-redirect.js"
5
  data-exclude="/apps/custom/page, /tools/account">
6
</script>
Copied!
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:
1
<a class="cart-button">
2
  {% if cart.item_count > 0 %}
3
    <span class="icon icon-circle">
4
      {% cart.item_count %}
5
    </span>
6
  {% endif %}
7
  <span class="icon icon-cart"></span>
8
</a>
Copied!
Add a classes to control element visibility.
1
.hidden {
2
  display: none;
3
}
Copied!
Update the icon to not depend on liquid variables.
1
<a class="cart-button">
2
  <span id="cart-button-badge" class="icon icon-circle hidden"></span>
3
  <span class="icon icon-cart"></span>
4
</a>
Copied!
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.
1
<script type="text/javascript">
2
  // Fetch the cart
3
  fetch('/cart.js').then(res => res.json()).then(cart => {
4
    // Configure mutation observer
5
    const observer = new MutationObserver((mutations, self) => { 
6
​
7
       // Try to grab the cart button badge element
8
      const cartButtonBadge = document.getElementById('cart-button-badge')
9
​
10
      // Once element exists, perform update
11
      if (cartButtonBadge) {
12
        // Based on the item count, render the badge
13
        // This will differ based on your theme
14
        if (cart.item_count > 0) {
15
​
16
          // Make the badge visible
17
          cartButtonBadge.classList.remove('hidden')
18
​
19
          // Update the count value
20
          cartButtonBadge.innerHTML = cart.item_count
21
​
22
        } else {
23
​
24
          // Hide the button badge element
25
          cartButtonBadge.classList.add('hidden')
26
        }
27
​
28
        self.disconnect() // End observing
29
        return
30
      }
31
    })
32
​
33
    // Begin observing
34
    observer.observe(document, {
35
      childList: true,
36
      subtree: true
37
    })
38
  })
39
</script>
Copied!
Add the snippet to your main theme file's <head> element.
1
{% render 'cart-button-badge' %}
Copied!
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 (Preview)

Dynamic Fragments

Last modified 17d ago

Copy link

Contents

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

Solving Common Caveats