Installation

How to enable Edgemesh Server Preview on your site

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. If you have an existing custom domain (www.yourstore.com), delete it.

Create Redirect Snippet

The redirect snippet will ensure your shop site is loaded on the Edgemesh Server domain when you are redirected from checkout links (continue shopping).

  1. From your Shopify Admin, go to Online Store > Themes.

  2. Click on Actions > Edit Code.

  3. Create a new snippet in your theme. Name it whatever you like. For this example will use the name ems-redirect.

  4. Go to Snippets and click Add a new snippet.

  5. Name it redirect.

  6. Enter the following content and replace <your primary domain> with your primary domain:

{% unless request.design_mode %}
<script type="text/javascript">
const redirect = '<your primary domain>'
const url = new URL(window.location.href)
const isThemePreview = (
url.searchParams.has('_ab') ||
url.searchParams.has('_fd') ||
url.searchParams.has('_sc')
)
if (!url.pathname.includes('account') && !isThemePreview) {
if (url.hostname !== redirect) {
url.hostname = redirect
window.location.href = url.toString()
}
}
</script>
{% endunless %}

Add Redirect Snippet to Theme

  1. Go to Layout > theme.liquid and render the snippet to your main theme template inside the <head> tag. Make sure you replace ems-redirect with your chosen redirect name.

{% render 'ems-redirect' %}

Your website will now be redirected to Edgemesh Server when an external link sends them to another URL that resolves to your shop.

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.

<script type="text/javascript">
// Fetch the cart
fetch('/cart.js').then(res => res.json()).then(cart => {
// Get the cart button element
const cartButtonBadge = document.getElementById('cart-button-badge')
// 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')
}
})
</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.