Getting Started
Edgemesh Client
Integrations
Edgemesh Server
Reference
Installation
How to enable Edgemesh Server Preview on your site
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.
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!
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
headelement. 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.1
<script type="application/javascript" src="https://yourstore.com/ems-cookies.js"></script>
Copied!
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).1
<script
2
type="application/javascript"
3
src="https://yourstore.com/ems-cookies.js"
4
data-cookies="custom_cookie=86400, custom_cookie_session">
5
</script>
Copied!
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:
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.
Last modified 3mo ago