In June 2021, I moved the website you're currently reading this article on from Wordpress to Ghost (Ghost.org).

After developing eCommerce websites on Shopify for a few years, I realised just how antiquated a system like Wordpress is. It's bulky, slow and built with old technology.

Ghost by comparison is modern, fast and efficient.

Ghost obviously doesn't have the level of brand awareness that Wordpress has and so you'll inevitably find less resources for learning how to develop on the platform.

For this reason (along with some annoying gaps in their documentation) I was prompted to create a complete class on the subject of Ghost themes to which this guide is the compliment to.

Just like my Ultimate Guide to Shopify Liquid, I'll be going as in-depth as possible into Ghost theme development so strap yourselves in!

Note that I will reference the official documentation where I feel it makes sense to do so, rather than repeating the same information, especially on the much less common features.

Ghost Theme Development Basics

Much like Shopify, the theme in Ghost controls the front-end of your website. It's de-coupled from the Ghost backend and is coded in the popular Handlebars templating language.

Unlike Shopify though, there's not a big focus on objects in Ghost Theme Development. Instead, scope is referenced by something called 'context' and the template structure more closely resembles that of Wordpress.

As Ghost is built for publishing, collections and posts form the basis of your Ghost theme.

A blog - at its most basic form - is simply a collection of blog posts.

Therefore, the only required templates in Ghost themes are the index.hbs and post.hbs templates.

In this article, we'll break down Ghost theme development into the following:

• Templates
• Routes
• Contexts, and
• Helpers

Let's start with how a Ghost theme is structured.

Theme Structure

As mentioned, the only templates required in a Ghost theme are index.hbs and post.hbs.

index.hbs is the template used for displaying the collection of posts stored on your Ghost site and is served on root route (homepage) by default.

post.hbs doubles as both the template for displaying single blog posts as well as single pages.

default.hbs while not required, carries surrounding code that is common to multiple (if not all templates). When called within a template, the template code will sit inside the {{ body }}.

On top of index.hbs and post.hbs are a bunch of additional optional templates which will replace these templates on certain routes.

The following diagram demonstrates the optional templates that sit ahead of index.hbs and post.hbs

From left to right, you have the page (or route) that the user is viewing followed by the list of possible templates. The {{slug}} and {{template-name}} represent dynamic values that I'll explain in just a second.

The templates furtherest to the left are the ones that will get loaded ahead of the other templates if they exist. If they don't exist, the next template in line will determine what gets displayed on the route.

For example, when viewing posts with the tag of 'example', if a tag-example.hbs file exists in the theme folder, that file will be served. If that file doesn't exist but a tag.hbs file exists, that tag.hbs will be served and if neither are true, the template served will default to index.hbs.

default.hbs - as can be seen from the diagram - wraps around which ever template is loaded and its code is served alongside it.

When it comes to viewing a page (as another example), the template loaded can be one of 4 different templates.

1. If the page has a page-specific template, that template will be served. Page-specific templates start with "page-" followed by the slug of the specific page.
2. A custom template that is selected on the page's edit page within the admin. These templates start with "custom-" followed by the custom template name.
3. The page.hbs template, or
4. The post.hbs template

As the diagram shows, the page-specific template will receive priority followed by the custom template (if set on the page), followed by the page.hbs template and if none of those exist, the post.hbs template will be used by default.

Setting and updating routes

While technically not a part of theme, the routes.yml file plays a large part in determining what templates get served on each route and allow you to customise the path as well.

The routes.yml file can be found outside your theme folder in /content/settings/ and looks like this by default:

## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

The default site structure (under the above configuration) places your index.hbs on your root (/) path and allows for filtering of posts via /tag/{slug}/ (where {slug} represents the slug of the tag) and /author/{slug}/ (where {slug} represents the slug of the author).

Configuration of your routes can be broken down into 5 categories:

1. Basic Routes
2. Collections
3. Taxonomies, and
4. Channels

Basic Routes

Basic routes are explicit routes. You specify the path word-for-word in your routes.yml file followed by the template you wish to load at the path.

For example, specifying the following routes in your routes.yml file will serve the features.hbs template at /features/ and the template team.hbs at /about/team.

routes:
  /features/: features
  /about/team/: team

Basic routes with dynamic data

The basic routes in the previous example will load static templates with no dynamic data.

Alternatively, to connect a data source to your newly created route, you create a new line, specify the template followed by the data source.

Following the previous example, your routes.yml becomes

routes:
  /features/: features
  /about/team/:
    template: team
    data: page.team

Notice how the value drops to a new line, allowing you to specify two key-value pairs (template and data)

The part after data: (page.team in this instance) represents a link to the page in your admin with the slug of team, making the data from that page available to that template via the page contexts (contexts of course, will be covered the next section).

Interestingly, this practice prevents you from accessing the page at its original route. The official documentation states that this is "to prevent the content being duplicated in two places".

Of course, if you didn't specify this particular route, you would have still have access to the page data on the original route.

So the benefit of this approach it seems, is simply to nest the an existing page's path inside a subdirectory. So instead of the path to the team page being /team, it becomes /about/team.

Basic routes with custom formatting

Ghost also provides the option to easily serve a feed or API via the content_type key.

routes:
  /podcast/rss/:
    template: podcast-feed
    content_type: text/xml

In the above example, the podcast-feed.hbs template will load on the path /podcast/rss but the format will be text/xml (which is the required format for podcast RSS feeds) rather than HTML .

Alternatively, you can set the content_type to json and serve a simple JSON API.

Obviously, the code you place in your template file will need to match the content_type specified.

Collections

If we take a look back at our original example of a basic routes.yml file, you'll notice the following section.

collections:
  /:
    permalink: /{slug}/
    template: index

This tells Ghost two things. One, to serve an index of all posts on the homepage of the website through the index.hbs template and two, serve the posts within the collection via their slug with no nesting.

Don't be confused by the pluralisation of "collections". In Ghost, there is just a single collection containing all your posts.

What collections: allows you to do is to both change the location of the index and create multiple filtered indexes that pull from the same core collection but are defined by specific tags.

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index

In the above example, you can see that our index will now be served on /blog path and each post will be served at the path /blog/{slug}/.

This now gives us the space on the root path of the site to specify a homepage template like such:

routes:
  /: home

Now, the home.hbs template will be loaded at the root route instead of index.hbs.

Collection filtering

In the previous example, we saw how to move our index of posts off of the root path and onto the nested path of /blog/ but what we can also do is simulate multiple collections by tagging posts with certain tags and then creating paths with a specified filter.

For example...

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: blog
    filter: primary_tag:blog
  /podcast/:
    permalink: /podcast/{slug}/
    template: podcast
    filter: primary_tag:podcast

In the above example, we've separated out our blog posts and podcasts into two different 'collections' (remember there's only one collection from the perspective of the Ghost admin but we can simulate multiple on the front-end).

You'll see in the first route that blog.hbs is now the template for the path /blog/ and that any posts that don't have the primary tag of blog will be filtered out.

The second route uses the podcast.hbs template and has access to all the posts with the primary tag of podcast.

As it states in the official documentation...

"The primary_tag property is simply the first tag which is entered in the tag list inside Ghost’s editor. It’s useful to filter against the primary tag because it will always be unique."

This is an example of how we can host a blog and podcast on the same Ghost website.

Loading data into an index

Just like we saw with basic routes, you can also load additional data into an index template via the data attribute.

collections:
  /portfolio/:
    permalink: /work/{slug}/
    template: work
    filter: primary_tag:work
    data: tag.work

The above example passes the data from the tag 'work' into the work.hbs template.

Unlike Shopify, tags in Ghost hold additional data such as an image and description. Including it as a data source makes that data available in the template when accessed from the specified path.

Taxonomies

Taxonomies are groupings of posts based on a common relation. In Ghost, this is author and/or tag.

As we saw in the original default routes.yml example, we have default routes set up for automatic filtering of the collection via a tag or author.

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

The above configuration will allow for filtering the collection based on a specific tag via the path of /tag/ followed by the slug of the tag and by a specific author via the path of /author/ followed by the slug of the author.

In order for this to work however, you will need a tag.hbs and/or an author.hbs (respectively).

Taxonomies are limited to just tags and authors in Ghost. The only possible modifications that you can make to the above routes is to change the path of these routes or remove them entirely.

Channels

Finally, Channels are custom streams of paginated content matching a specific filter. Ghost says you can "think of channels as a set of permanent search results. It’s a filtered slice of content from across your site, without modifying the content itself."

Channels are defined as a custom route, with a custom controller property called channel, and a filter to determine which posts to return.

routes:
  /apple-news/:
    controller: channel
    filter: tag:[iphone,ipad,mac]
  /editors-column/:
    controller: channel
    filter: tag:column+primary_author:cameron

As you can see from the above example, all that is required to turn a regular custom route into a channel is to add the controller: channel key-value pair and a filter attribute with the content you wish to filter by.

You might have noticed however, that the template keyword is missing from these custom routes. That's because the index.hbs file will be loaded by default.

If you wish to include a custom template for the channel, you can simply do so but adding in template: following by the template name (minus the .hbs extension) just like you have seen for the other routes.

Contexts

Now that we've discussed the structural side of Ghost themes, let's now look at how we can access dynamic data within each template.

In Ghost, this is done through something called 'Contexts'.

As it states on the official documentation:

"A Ghost publication follows a structure that allows URLs or routes to be mapped to views which display specific data. This data could be a list of posts, a single post or an RSS feed. It is the route that determines what data is meant to be shown and what template is used to render it."

The available data (ie. context) within each template depends on the route and what (if any) additional data we've passed into it.

The official Ghost documentation states that there are 6 different contexts.

1. index
2. page
3. post
4. author
5. tag, and
6. error

Let's address each of these contexts.

The Index Context

The official documentation appears to be missing a specific page discussing the index context but one thing is for sure, the index context, by its very nature is intended to display a list of posts.

{{#foreach posts}}
<article class="{{post_class}}">
  <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
  <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
  <p class="post-footer">
    Posted by {{primary_author}} {{tags prefix=" on "}} at <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
  </p>
</article>
{{/foreach}}

In the above example, we loop through an array of posts. The posts that are included in this array are of course, determined via the route.

For example, when viewing a channel route (discussed earlier), the filters you specified on that route will remove certain posts from the posts array.

By default, you would find this loop on the index.hbs template but could also exist in any number of optional collection templates such as tag.hbs and author.hbs.

Once inside a loop iteration, you're now inside a new context, the post context.

The Post Context

When you have access to a single post (whether that be inside a posts loop iteration or on a route for a single post), you are in the post context.

As we saw in the previous code example, once inside a posts loop iteration, we can access the data of the post directly.

In the case of a single post template, we need to enter the post context using the {{#post}}{{/post}} block expression (we'll go more in detail into helpers in the next section).

The documentation does a good job of listing the available attributes so I'll simply link you to the page on the post context here but a few obvious examples would be title, feature_image and of course, content.

Using Handlebars syntax, we simply open up the post context and then pull whatever attribute values we wish off of that post.

{{#post}}

<article class="{{post_class}}">
  <header class="post-header">
    <h1 class="post-title">{{title}}</h1>
    <section class="post-meta">
      <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">
        {{date format="DD MMMM YYYY"}}
      </time>
      {{tags prefix=" on "}}
    </section>
  </header>
  <section class="post-content">
    {{content}}
  </section>
</article>

{{/post}}

If for whatever reason, we didn't want to open up the post context via the {{#post}}{{/post}} block expression, we could access an attribute (or two) outside of the block expression by placing post. in front of the attribute like such:

<article class="{{post_class}}">
  <header class="post-header">
    <h1 class="post-title">{{post.title}}</h1>
  </header>
  <section class="post-content">
    {{post.excerpt}}
  </section>
</article>

These concepts extend to the other contexts of page, author, tag and error.

The Page Context

The page context is virtually identical to the post context. It is accessed using the same block expression of {{#post}}{{/post}} and has many of the same attributes.

The only difference between a post and a page is that a page exists outside of a loop-able collection and may be served on different templates (as we saw earlier).

The Author Context

When viewing the index page of a particular author, you have access to the Author context.

Attributes of the particular author can be accessed via the {{#author}}{{/author}} block expression. These include attributes like name (of the author), location and website.

The full list of attributes can be found on the official documentation.

The Tag Context

Similar to the Author context, the Tag context is available on the index page for a particular tag.

Attributes of the particular tag can be accessed via the {{#tag}}{{/tag}} block expression. These include attributes like name (of the tag), slug and feature_image.

The full list of attributes can be found on the official documentation.

The Error Context

When coding error templates, you have access to the Error context.

Access to the attributes of the Error context do not require any block expression.

These attributes are things like

• {{statusCode}} — The HTTP status code of the error
• {{message}} — The error message
• {{errorDetails}} — An object containing further error details

Coding with Helpers

We seen examples throughout this article already but now let's go deeper into the syntax for coding Ghost themes and the 'helpers' that are available to us.

Handlebars

As mentioned, Ghost themes are coded using the popular templating language of Handlebars.

Handlebars comes with its own syntax that can be applied to any website so I won't go into too much detail regarding the syntax of Handlebars specifically but as it relates to Ghost theme development, here are some basics.

Simple Expressions

Simple expressions are the basic way of outputting data to the front-end (the core function of any templating language) and look like this {{ attribute }}.

If in a context where you have access to an attribute by the name of name for instance, you can simply render the value of name via the simple expression {{name}}.

Simple right?

Block Helpers

As we've seen in previous examples, we can enter the post context via the block expression {{#post}}{{/post}} and this works for other contexts like author and tag.

Inside, you can use a simple expression to access the attributes within that context.

Conditionals

Conditionals are used to execute certain code but only if a certain condition is met.

This is a basic concept in all templating/programming language and in Handlebars, it looks like this: {{#if condition}}{{/if}}.

For example

{{#post}}
  {{#if featured}}
   ...do something if the post is featured...
  {{/if}}
{{/post}}

Alternatively, you could use an unless statement as well (the opposite of 'if').

{{#unless featured}}
  ...do something...
{{/unless}}

Partials

Partials are a way of sectioning off chunks of reusable template code.

This is particularly handy in Ghost development for things like post previews which may exist inside multiple different loops.

In Ghost, we store partials in the /partials/ directory and call them by their file name (minus the .hbs).

A common example in Ghost theme development is - as mentioned - post previews.

For this particular example, if we had a file called post-card.hbs in our partials folder, we could bring in that code to our template via the code {{> "post-card"}}.

The partial code then gets loaded into the location where it called and has access to the same context.

Ghost-specific syntax

Now that we've covered some the basics of Handlebars that apply to Ghost theme development, let's look at some of the syntax specific to Ghost themes.

Loops

Loops in Ghost are performed via the special helper {{#foreach}}{{/foreach}}. This expression gives us immediate access to context of the item we're looping over.

For instance, inside each iteration of {{#foreach posts}}{{/foreach}} we have access to the post context. With these foreach loops, there is no need to use the {{#post}}{{/post}} helper to gain access to the context.

Inside a {{#foreach}} block, we also have access to a number of data variables, the list of which can be viewed on the official documentation.

Context verification

The {{#is}} helper allows you to check whether a certain context is available on the current route.

It takes a single parameter of a comma-separated list containing the contexts to check for. Similar to the has helper, the comma behaves as an or statement, with and being achieved by nesting helpers.

{{#is "post, page"}}
   ... content to render if the current route represents a post or a page ...
{{/is}}

The list of contexts that are supported by this helper can be found on the official documentation.

More advanced conditionals

The {{#has}} helper is a special kind of conditional in Ghost themes.

It supports four different types of “questions”:

• Post has tag or author
• Context has slug or id
• Context has any or all properties set
• Foreach loop number or index

With the 'questions' asked by providing attribute-value pairs, e.g. tag="tag name".

A few examples of each type can be found on the official documentation but for the most part, the 'has' helper is just a way to perform more complex conditionals than what is possible with {{#if}} helper.

Custom queries

{{#get}} is a special block helper that allows you to query data from your Ghost backend from wherever you are in the theme.

Let's say you wanted to access posts from within a context that does not have access to posts usually.

In that case, you can use {{#get}} to open up a query and place your code within it like such:

{{#get "posts"}}
    {{#foreach posts}}
        {{title}}
    {{/foreach}}
{{/get}}

You can also use parameters to limit the data requested which is discussed more in-depth on the official documentation.

Data helpers

In addition to the data within a specific context, there are also some global data helpers. These helpers are sometimes prefixed with the @ symbol and can be used on any template.

There's also the navigation helper which I'll cover more in-depth shortly.

Utility helpers

Utility helpers are used to perform minor, optional tasks.

For example, the {{body_class}} helper outputs different classes on different pages, depending on what context the page belongs to.

Also under this category are helpers like pagination and reading_time (which automatically renders an estimated reading time for a post).

A full listing of all of the data and utility helpers can be found here on the official documentation.

Special mention: the 'navigation' helper

In Ghost, the keyword navigation can appear in multiple ways.

Firstly, when placed in a foreach loop like such {{#foreach navigation}}{{/navigation}}, it allows for looping through a list of menu items as you would expect.

But, when used alone {{navigation}} will automatically call a partial by the same name or if the partial doesn't exist, it will automatically generate some default HTML for your site navigation.

You can also use the navigation attribute on the @site object to check if there are any navigation items at all.

For a full run-down on this special helper, visit the official documentation.

Special mention: the 'default' helper

Finally, it's important to note that, for the code in the default.hbs template to actually be included in any given template, you will need to include the special expression {{!< default}}.

All you have to do is place this tag at the top of your template file.

Any template without this tag will simply be rendered without the surrounding default.hbs code included.

Conclusion

In this guide, we've broken down Ghost themes into the main concepts I feel are important to understand in order to confidently build and edit Ghost themes.

There are of course, some things I have skipped over here like how assets are managed/served in Ghost as well as Ghost's membership capabilities (which I'm sure are very powerful but won't apply to most users).

Of course, the official Ghost documentation is the place to go for any of the smaller details but I hope that this guide has helped you get your head around Ghost theme development as much as it has helped me by writing it.

If you'd like to watch a visual training on Ghost with actual demonstrations of how to build out a Ghost theme, check out my Skillshare class to which this article is a compliment to.

Until next time,

Chris

Chances are, if you've ever built a store on Shopify, you've used at theme.

A theme is what most merchants use to build and/or customise their storefront when using the Online Store sales channel in Shopify.

You may not be aware that Shopify is much much more than just a place to build an online store. Shopify is actually a fully featured eCommerce platform that allows you to sell in many different sales channels whether it be through POS, through existing online platforms or through your own custom storefront using the Storefront API.

When you click on the menu item for Online Store you may have noticed that the link is sitting underneath the heading SALES CHANNELS alongside a range of other possible options such as Point of Sale, Facebook Shop and Instagram.

The Storefront API is yet another sales channel that you can use to present your store data (including products, pages and blog posts) in an infinite number of ways.

One of the ways you can utilise this API is to create your own fully-custom storefront.

Why use the Storefront API (over a theme)?

Good question!

For most merchants, the limitations of the Online Store sales channel are not an issue but for those that need a more custom setup, it may require them to set up a store outside of Shopify's servers.

Using the Storefront API, you can access all the data that would normally be presented using a Shopify theme and use it however you like.

The possibilities of how you use that data are virtually endless but in this article, I'm gonna focus on using the Storefront API to create your own custom storefront.

The Storefront API: How it works

Before we jump into the steps, I think it's important to provide a quick overview of how the Storefront API operates.

Firstly, the Storefront API can only be accessed using GraphQL.

If you've done work with APIs in the past, it's likely that you've used the REST protocol. Using REST, you would simply send a GET request to a specific endpoint (url) to retrieve a certain set of data. Or, if your intention was to manipulate data on the server side, you would use a POST request.

In GraphQL however, every request you send to an API will be a POST request because in GraphQL, you send a 'query' to a single endpoint and that query determines what data you receive back instead of the specific endpoint.

It might sound a little tricky but once you get your head around GraphQL, you'll realise it makes a lot of sense to have a single endpoint and have full control over what data is returned in every request.

For example, let's say you just want to retrieve the name of your shop. Well, if the Storefront API was a REST API, you'd have to request the whole Shop object (which has 9 properties) instead of just the one property you needed, shop.name.

I highly recommend that you head to the 'Getting Started' page for the Storefront API and view the examples.

Here's a basic one:

{
    shop { 
    	name 
        primaryDomain { 
        	url 
            host 
        } 
    } 
}

The above code will return the name of your shop as well as url and host of the primary domain.

Again, I highly recommend that you head to the API's 'Getting Started' page and read up on GraphQL in general as you will need to learn it in order to leverage the Storefront API.

Step 1: Generate an access token

In order to access your store's data through the API, you'll need to create a private app inside your Shopify store and click on the checkbox to generate a Storefront API access token.

The process looks like this:

1. Click on 'Apps' in your admin sidebar
2. Click on 'Manage private apps'
3. Click on the button for 'Create a new private app'
4. Add in an app name and email (the name can simply be 'Storefront API')
5. Check the checkbox for 'Allow this app to access your storefront data using the Storefront API'
6. Click 'Save'

After the app is created scroll down until you see the Storefront Access Token available in the last field. This token is all you need to start using the API.

Step 2: Make your first request

Now that you have your Storefront API access token, you can start making requests to the API.

Given that we're creating a custom Shopify storefront, we can be quite sure that we will want to retrieve data like collections, products and variants as well as be able to create a cart and submit it to Shopify.

To see what data is available, you can head to the official API documentation on Shopify's website but let's start by writing a very basic query.

{
    shop {
    	name 
    }
}

As you can see, this query is quite minimal. All it does is access the shop object on the query root and then the name property within it.

The more challenging part in this case is the other settings in the request such as the url and the headers.

If you'd like to see a run-through using Javascript, checkout lesson 10 on my Skillshare class "Shopify Theme Programming: Liquid, JSON and Javascript".

The below example (taken from that tutorial) takes the query above and loads it into the JS function apiCall().

const query = `{ shop { name } }`; 
function apiCall(query) { 
	return fetch('[Your Shopify store address]/api/graphql.json', 
    	{ method: 'POST', 
          headers: { 'Content-Type': 'application/graphql', 
                     "Access-Control-Origin": "*", 
                     'X-Shopify-Storefront-Access-Token': "[Your storefront access token]" 
                   },
          "body": query })
          .then(response =>; response.json()); } 
apiCall(query).then(response => { console.log(response) });

Go ahead and replace [Your Shopify store address] and [Your storefront access token] with the url and Storefront API key of your store, head to any page within your store, throw the code into the JS console of your browser and hit enter.

Congrats! You've just made your first request to the Storefront API!

Step 3: Build your custom storefront

Now that you've successfully made your first request to the API, it's time to take that data that you've learned to retrieve and start using it in a real world way.

Unfortunately, building a fully featured web app is a huge topic that I won't cover specifically in this article but what I will do is show you how to get started building with no framework or server, just Vanilla HTML, CSS and JS.

What I've done is create a barebones custom storefront app (using just jQuery) and uploaded the code to Github at github.com/christopherdodd/shopify-storefront-api-example.

In order to "run" the app, all you need to do is drag the index.html file directly into your browser.

As you can see, very barebones.

But never fear because next, we're gonna update the app.js file with a function that we will use to render the first 20 products of our store onto the page.

Currently our app.js looks like this.

// This is our apiCall function that is pre-configured to take just the // one argument (the query) and return a response from the API function 
apiCall(query) { 
	return fetch('[Insert store address here]/api/graphql.json', 
    	{ 
            method: 'POST', 
            headers: { 
                'Content-Type': 'application/graphql', 
                'X-Shopify-Storefront-Access-Token': "[Insert your Storefront API access token here]" 
            }, 
            "body": query 
    })
    .then(response => response.json()); 
} 

// Here is where we will take the response and render it to the page 
$(document).ready(function() { const $app = $('#app'); });

Request data using Queries

What we're going to do now is add a function after the apiCall function which we'll use to bundle the request settings with a specific query in order to return a response from the Storefront API.

The function looks like this:

function getProducts() { 
	const query = `{ products(first: 20) { edges { node { title description images(first: 1) { edges { node { altText transformedSrc(maxWidth: 400, maxHeight: 400) } } } } } } }`; 
    return apiCall(query); 
}

Next, we'll invoke this function and use the response we get back from the API to display a list of products from our store along with a product image and description.

$(document).ready(function() { 
	const $app = $('#app'); 
    getProducts().then(response => { 
    	$app.append("<div class='products'></div>"); 
        const $products = $('.products');
        response.data.products.edges.forEach(product => { 
        	const template = `<div class="product"> <h2>${product.node.title}</h2> <img alt="${product.node.images.edges[0].node.altText}" src="${product.node.images.edges[0].node.transformedSrc}"> <p>${product.node.description}</p> </div>`; 
          	$products.append(template); 
         }); 
     }); 
 }); 

The getProducts() function returns a promise which we then chain a .then() method on to handle the response from the server.

It's recommended that you insert a console.log(response); somewhere within the .then() method to actually see the data that is returned from the store. If there are any errors, you can check the 'Network' tab and the 'Console' tab of your browser's devTools to inspect and debug.

Otherwise, the above should have loaded the first 20 products of your store onto the web page and be looking a little something like this:

Congrats! You've now:

1. Authenticated your request using the access token
2. Constructed a GraphQL query and sent it to your store, and then
3. Taken the response of that API call and rendered the data to your page using Javascript

I know this is super basic but the idea is that you continue to write queries, put them into functions and continuing rendering more content to the page.

Manipulate store data using Mutations

Most of the time, when working with the Storefront API, you'll simply be accessing data from your store via queries however there are a few instances where you might want to run a 'mutation'.

A mutation is like a query except that you use it manipulate data instead of retrieving it.

Unlike the Admin API, the Storefront API is lightly authenticated and doesn't provide many options for manipulating store data. It's basically only the checkout and the customer objects that you can manipulate but I still wanted to mention this as it's an important part of any GraphQL API.

Here is an example of a mutation you might want to run as part of your custom storefront app.

function logInUser(email, password) { 
	const mutation = `mutation { customerAccessTokenCreate(input: {email: "${email}", password: "${password}"}) { customerAccessToken { accessToken, expiresAt }, customerUserErrors { code } } }`;
    return apiCall(mutation); 
}

As you can read from the name of the function, you can use this to log in a customer via an 'input object' with the customer's email and password that is sent to the API (via customerAccessTokenCreate on line 3) . The API will then return back the token (line 5) as well as any errors (line 9).

My custom storefront

My custom storefront project is created using a Vue.js and Express tech stack.

The app can be accessed at the address shopify-custom-storefront.herokuapp.com and allows anyone to connect their own store as long as they provide a Storefront API access token (as demonstrated above).

For your own app, you need to decide what framework you feel most comfortable with and go with that.

While this article has covered the basic steps, I wouldn't recommend using jQuery to build full-scale web apps. Instead, I would recommend that you use an app development framework like Ruby on Rails, Vue, React or whatever else your most comfortable with (it doesn't have to be Javascript framework).

In terms of leveraging the Storefront API though, the main thing you need to understand is the basics of how it works. Study the documentation on Shopify's website and experiment with retrieving different bits of store data. Get comfortable with writing GraphQL queries and observe what comes back.

The possibilities of how you utilise the data are endless.

Happy coding and I’ll catch you next time.

Chris

When I first started researching how to create Shopify apps, I stumbled across many articles and YouTube videos, all of which had a completely different way of doing it.

At this point, I didn't really understand what a Shopify app even was!

I thought that a Shopify app was somehow native to the Shopify platform and written in it's own language, similar to how it is with a desktop app or a phone app.

Turns out, I was dead wrong.

A Shopify App is just a web app that connects to a Shopify store.

That's it.

When you realise that a Shopify App is just like any web app, you start to understand that a Shopify App can be written in several different programming languages across many different stacks and that's when you realise that the skills you would use to create any web app are the same for building a Shopify app.

The difference between a Shopify app and a regular web app is really the use of Shopify's Admin API and that's what we'll be focusing on in the following article.

What exactly is a Shopify App?

Given that a Shopify app is simply a web app that connects to a Shopify store, we can now see why there are so many different tutorials on creating apps using many different programming languages and frameworks.

In this tutorial, I'll be using Node.js with Koa but regardless of what tech stack you want to use, the main lesson I want you to take from this article is the understanding of what actually makes an app a Shopify app.

The following are the 3 important points to keep in mind when creating your first app.

1. Shopify Apps must be authorised by a store

Before your app can be deemed a 'Shopify App', it will need to be registered and authorised.

This is set up in the dashboard of your partners account.

You can think of this almost like 'registering' your app.

Despite the wording, this process doesn't actually create any application. Instead, it simply lists the app in your partner account and provides you with an API key and API secret key to include in your app for authorisation.

In order to make this work, you'll need a public address for your app.

2. Shopify Apps must be hosted somewhere

When you create an app in your Shopify Partners account, you might be forgiven for thinking that Shopify will host your app for you - nup!

Instead, you'll need a public address for your app to be accessed and then you'll submit that to Shopify via the interface pictured above.

Once you're ready to deploy your app, you can use a service like Heroku to host it but during development, it is essential that you can run your app locally.

So how are you able to provide a public address to Shopify?

The answer is to use a tunnelling service and the go-to solution is called ngrok.

Ngrok is a simple application that exposes a localhost address to a public address on the internet.

Here's what it looks like:

As mentioned, this is just for while developing your app. Once the app is ready to go live, you'll want to deploy it to a proper host and update the address of the app in your partners account.

3. Shopify Apps must use a Shopify API

The third and final concept that's important to understand when creating Shopify apps is the use of the right Shopify API. Usually, this API will be the Admin API.

The Admin API allows you to both read and write data from your store. Essentially, it provides an interface to all the functions within your store admin.

There is however one other API worth mentioning, which is the Storefront API.

As is written on Shopify's website:

In contrast with the Admin API, which enables developers to build apps around merchant-facing actions (such as shipping and fulfillment), the Storefront API focuses on shopping experiences seen from the customer perspective.

In other words, the Storefront API provides access to data that's already publicly available to your storefront whereas the Admin API gives you access to all the data and functions that you as a store admin would have.

Most of the time, when you hear someone talk about a 'Shopify App', they are referring to an app that you access through your admin and therefore uses the Admin API.

The Storefront API on the other hand, is more for creating custom storefronts like the one I created here.

Inevitably, you will need to use a Shopify API in your application. Otherwise, can it really be considered a 'Shopify App'?

Creating your first Shopify App

Now that we've established a broad understanding of how Shopify apps work, let's go ahead and create our first app.

1. Choose a tech stack

As mentioned, Shopify apps are self-hosted and the APIs are programming-language agnostic (meaning it doesn't matter what language you use). Therefore, you'll need to make a decision on what tech stack to use.

In my opinion, the best two options for your choice of programming languages are either

• Javascript, or
• Ruby

Why?

Well, these two languages are the ones that Shopify seems to support the most. They are the only two languages currently supported by the Shopify App Cli and Shopify provides authentication packages for both Node.Js and Ruby.

As you can see from the above screenshot, two of the tutorials currently offered by Shopify are using Node and one is using Ruby.

If any of these tutorials describe the exact tech stack you wish to use then feel free to check them out and follow along. For me however, I wanted to use Node.js but with a Vue.js front-end (as apposed to React).

The trickiest part that I've found with Shopify app development is the authentication part. That's why I decided to use Koa.js as my Javascript framework of choice as Shopify provides a package called shopify-koa-auth and shows you how to use it in their tutorial, "How to Authenticate Your Embedded App in the Shopify Admin".

2. Authenticate your app

Speaking of authentication, you'll need to make sure that you can successfully connect your app to a Shopify store before you can realistically start any development.

As mentioned, understanding how Shopify handles authentication can be tricky business which is why I decided to follow this article on Shopify's Web Design and Development blog. However, If you would like to go deep into understanding how authentication works at Shopify, they have a large section of their docs dedicated to it here.

In my opinion, authenticating your app is not something you should spend a long time on as it's simply a one-time thing to get your app to work. That's why I stripped down my app into a basic framework I call shopify-koa-server.

shopify-koa-server provides all the code necessary to spin up and authenticate a Shopify app. You just need to add your API credentials to the .env file to authenticate. Then, you can add a front-end framework that compiles to the public folder and add routes to your application in the server folder.

If you want to follow along, download the repository from Github and run npm install to install the dependancies.

In order to authenticate the app, you'll need

1. A tunnelling address to register in your Shopify partners account, and
2. An API key and API secret key to submit in your request to authenticate

2.1. Set up your tunnelling address

In order to 'create an app' in your Shopify partners account and receive the necessary API keys, you'll need a public address for your application. As previously mentioned, an easy way to do this is with a tunnelling service like ngrok.

In the server.js file contained in the repo, the port has been set to 3000 which means that your app will run at localhost:3000. This is the address to which you want to create your tunnel to.

In order to run the tunnel, head to ngrok's website, download the application and then run the application from your command-line tool using the command ngrok http 3000.

As you can see from the above screenshot, ngrok has created two tunnelling addresses to localhost:3000, one is using the http protocol and the other is using the secure equivalent, https. In the next step when you register your app in your Shopify Partners dashboard, you'll copy across the second (https) ngrok address.

Make sure that you keep this window open during development and when you're done, make sure to end the session (using Ctrl+C on Mac) before closing.

Note that the forwarding address is only valid while the app is running. Each time you restart the session, you'll be presented with a new public address and therefore, you'll have to update the address in the app setup on Shopify Partners.

2.2. 'Register' your app

Now that you have a public address for your app, you can now 'create' it in your Shopify Partners account by clicking on 'Apps' in your sidebar and then clicking the 'Create app' button.

As I mentioned, I think the use of the word 'create' is a little bit misleading here so I like to refer to this step as 'Registering your app'.

After clicking 'Create app', select 'Public app' for your app type and in the App URL field of the form, insert the https address from the previous step.

In the 'Whitelisted redirection URL(s)' field, insert the http address again and then the same address but with /auth/callback on the end (as can be seen in the above screenshot).

Scroll up to the top of the page and click 'Create App' to complete the process.

On the next screen, you'll now be presented with your API keys.

We're now almost ready to run our app.

The next step is to take your API keys, insert them into the variables contained in the .env file of your app and run your app via the command line using the command node server.js.

With your app now running at localhost:3000 and the your ngrok tunnel forwarding to that address, you should now be able to install your app onto a store.

Up until recently, Shopify allowed you to install an app on any store by using a special url but this now appears to no longer work.

Instead, you'll need to head back into your Shopify partners account and click the 'Select store' button in the 'Test your app' panel of your app screen.

On the next screen you'll be able to select the store on which you want to install the app but under two conditions.

1. The store has to be a development store associated with your partner account, and
2. The store that you install the app on will be permanently prevented from being transferred

Due to that second point, you'll want the development store you install the app on to be purely for testing purposes.

If you're developing a store for a client for instance, you won't want to install your app on that store. Instead, if you do need a store to work on your app, create a fresh development store that you don't intend on ever using as a real store.

Once you confirm acknowledgement that store transfer will be disabled, you'll be taken to the standard app authorisation page where you click 'Install unlisted app' to complete the process.

3. Build your app

Congratulations! You now have your very own Shopify app!

But there's a big problem - your app doesn't actually do anything yet.

What you now need is to write some queries, mutations and routes into your app.

Luckily, I have started the process for you.

Understanding your app structure

While the server.js file represents the core of your application, the files in the server folder are the recommended location for building out the backend of your app.

Inside the server folder you have 4 files:

1. apiClient.js - This file is already set up with a simple function that uses the popular http client Axios to provide an easy way to query the API.
2. routes.js - This file is where you will create routes for your application. Backend routes are required within your app as the Admin API won't accept client-side requests.
3. queries.js - This is where you write your queries for the GraphQL version of the Admin API. These 'queries' will be responsible for accessing data from your store.
4. mutations.js - This is where you write your mutations. Mutations are just like queries except that they modify store data rather than just retrieving it.

It's also worth mentioning the public folder where the front-end code for you application resides. Currently it contains a single file index.html but it's recommended that you use a front-end framework (like React, Vue or Angular) and set it to build to this folder.

3.1. Write your first query

Now it's time to make your app a true Shopify app by bringing in some store data and the first step is writing an API query.

The endpoint, headers and other settings have already been included in the graphQLClient function so it's now just a matter of using that function to submit a query to the API.

Unfortunately, there's not enough time in this article to go over the whole language of GraphQL but the basic idea behind it is that you send a POST request to a single endpoint with the exact data you wish to access and the API returns only that data.

Let's take a look at an example:

// server/queries.js
const { graphQLClient } = require('./apiClient.js'); 
module.exports = { 
	// Returns a list of products 
    getProducts(auth) { 
    	const query = `{ products(first: 10) { edges { node { title id } } } }`; 
    	return graphQLClient(query, auth); 
    } 
}

On line 1, the graphQLClient function is imported from apiClient.js. We use this on line 18 to combine the query with the other settings and create a new function called getProducts.

Inside getProducts you have the query itself which returns the title and id of the first 10 products in the connected Shopify store.

If you're confused by the words edges and nodes, don't worry. I too was oblivious to why these existed but it turns out it's due to how pagination works in GraphQL.

Again, not enough time to go into GraphQL in this tutorial but it should make sense once you learn the language.

As you can see from the code snippet above, the getProducts function takes a single argument, the auth object which we will pass through when we create the route for this query.

3.2. Write your first route

As previously mentioned, the Admin API won't accept client-side API requests which means we need to pass the data through a backend route in our app in order to make it available to our front end.

// server/routes.js
const Router = require('koa-router'); 
const router = new Router(); 
const parse = require('co-body'); 
const { getProducts } = require('./queries.js'); 
const prepareAuth = (ctx) => { 
	const accessToken = ctx.cookies.get("accessToken"); 
    const shopOrigin = ctx.cookies.get("shopOrigin"); 
    return { token: accessToken, shop: shopOrigin } 
}; 
// Create the 'products' route 
router.get('/products/', async (ctx) => { 
	const auth = prepareAuth(ctx); 
	await getProducts(auth).then(response => ctx.body = response.data.data.products); 
}); 
module.exports = { router } 

On line 5, we import the getProducts function into our routes file and use it inside our route definition on line 21.

To create a route in Koa (using the koa-router middleware), we use the method get on the router object with two arguments. The first argument is the route address and the second is the callback function.

Inside the callback function, you can prepare the auth object by using the already made prepareAuth function and pass it to getProducts which will return a promise.

The .then method then handles the response and returns the required data nested within the response.

This might all seem a bit redundant as we're essentially creating our own API on top of the Admin API but as the API won't accept client-side requests, this is a necessary step.

3.3. Use the data

Now that we have our route set up, we can simply add the route address (/products/) to the address bar in our browser and access the data we requested in step 1 (assuming no errors).

Ok great! Now we have access to our data but it doesn't look very user-friendly now does it?

This is where your front-end framework comes in.

For my own app, I used a framework called Vue.js but that is of course, a big topic in and of itself.

For the purposes of this tutorial, let's use a library most front-end developers should be familiar with, jQuery.

Create the the following javascript file in your public folder.

$(document).ready(() => { 
	const $productDiv = $('#products'); 
    $.get('/products/').then(response => { 
    	let template = `<ul class="Polaris-ResourceList">`;
        $.each(response.edges, function(i, edge) {
        	template += `<li class="Polaris-ResourceList__ItemWrapper"> <div class="Polaris-ResourceItem Polaris-ResourceItem--persistActions"> <a class="Polaris-ResourceItem__Link" data-polaris-unstyled="true"></a> <div class="Polaris-ResourceItem__Container"> <div class="Polaris-ResourceItem__Content"> <h3><span class="Polaris-TextStyle--variationStrong">${edge.node.title}</span></h3> </div> </div> </div> </li>`;
       }); 
       template += `</ul>`; $productDiv.append(template); 
   }); 
});

Then in your index.html file, create a div with the id of products, import jQuery and your newly created Javascript file.

Oh, and to make it look a little nicer, let's remove the <h1> altogether - great!

Now, save your file, restart your server and head to the root of your application (ie. remove /products from the address).

Congratulations! Your app might not be all too useful at the moment but at least you have a proof of concept and have laid the ground work to take this app in whichever direction you desire.

How to make it look native to the admin

If you're wondering about all the CSS classes in the above code, these are all from Shopify's design system called Polaris.

Included in Polaris are a bunch of components that you can model to make your app look like it is native to the Shopify admin.

Simply check out the examples in the components section of the Shopify Polaris website to see what classes can used on your elements to make them look like Shopify.

Wrapping Up

This might seem like a relatively short tutorial for such a giant topic but given the infinite options that come with building Shopify apps, it's near impossible to create a conclusive guide.

After all, a 'Shopify App' is just a web app that connects to a Shopify store to access and manipulate that store's data.

And, as we all should know, there are many different ways to build a web app.

Other things to consider when building your app include what front-end framework you will use, how you will combine Shopify data with data from other APIs (if required) and how you intend to style your app.

These are all important factors if you wish to create a production ready app.

The main things to remember about Shopify app development specifically however, are the core points mentioned at the start of this article.

1. Shopify apps must be authorised by a store
2. Shopify apps must be hosted somewhere, and
3. Shopify apps must use utilise a Shopify API

Other than that, it's totally up to you how you build your app.

Happy coding and I'll catch you next time.

Chris

Liquid is the templating language that Shopify uses to load dynamic content to the pages of online stores. You could consider it the programming language of Shopify themes but there are a number of restrictions and quirks within Shopify liquid that aren't immediately clear.

While Shopify's Liquid Reference and the famous 'Cheat Sheet' are great, I feel like there is a lot of details missing and that's why I decided to write my own documentation.

Strap yourselves in as this one is likely to be a big one!

The Basics

Shopify's documentation does a good job of explaining the basics.

We start with the two types of Liquid tags {{ code }}and{% code %}. Double curly braces for simply outputting data (much like other template languages like Mustache) and the curly brace combined with the percentage sign for everything else.

There's also the {%- code -%} tag, which operates the same as {% code %} but prevents the tag from generating whitespace in the output document.

The double curly braces tags are for your logic-less Liquid code while the curly-brace with percent symbol tags are responsible for other functions like

• Looping through Liquid objects and arrays
• Creating new named variables
• Including 'snippets' and linking 'sections'
• For loops, and
• If/else statements (conditionals)

Here's a very basic but common pattern in Liquid:

{% for product in collection.products %} 
	{{ product.title }} 
{% endfor %}

The above loop will cycle through the products in the collection and run whatever is inside the code block. In this case, it will output the title of the product.

Then, there's the objects and attributes themselves. As it says in the docs, 'objects contain attributes that are used to display dynamic content on a page' but objects can contain other objects as well. Objects in liquid are sometime iterable (almost like an array) and sometimes you can call the object without an attribute and receive a single value.

Basically, Objects in Liquid are all over the place but we'll get into that in the dedicated section on Objects later in this guide.

The final bit of syntax in Liquid are filters.

'Filters are used to modify the output of strings, numbers, variables, and objects.'

In other programming languages, you might expect these functions to be contained in a method but in Liquid, we can't create our own methods and functions. These sorts of 'helper functions' are limited to the available filters within liquid.

A filter always starts with a | (pipe symbol) and can be stringed together like such:

{{ product.title | upcase | remove: "AWESOME"  }}

For the above code, if product.title was "Awesome Shoes", then the output would be "SHOES".

Everything in Liquid can be summarised by Tags, Objects and Filters. So let's dive deep into each one of them now.

Before we get started...

This article is gonna go into a lot of depth and is by no means a quick read. Feel free to skip the parts you don't need and/or use the search function in your browser to search for the specific section that you want to learn about. I intend this post to be more of a reference than a tutorial.

If you're more interested in a getting up and running with Liquid right away, check out my Skillshare class on Shopify Theme Programming (Out now).

Ok, let's get back to the guide.

Liquid Objects

I'm gonna start with Liquid objects because no matter what you do within Liquid, most of the time you will be interacting with objects.

If we think about Liquid as the way to access and display store data then objects are the way we access that data in our Shopify themes.

Objects are a little tricky in Liquid though. Let me explain using two concepts that Shopify doesn't necessarily make clear in their documentation.

Concept 1: Object 'Styles'

In other programming languages, an object looks something like this person = { first_name: "Chris", last_name: "Dodd", age: 27 } but in Liquid an Object can return a single value, a collection of values or a bunch of key/value pairs. That's why I've broken the object down into different styles.

PS: This is not official Shopify Liquid terminology, just something I came up with to help me (and hopefully you too) to understand what the heck is going on with objects in liquid.

Array-Like Objects

These 'objects' are referred to as objects in Liquid but they operate more like arrays.

• Some can be iterated over and others can’t be.
• Some can be have their ‘items’ accessed by their handle but only when such a handle exists (similar to how associative arrays work in PHP).

As a whole however, these are objects that hold a collection (an array) of other objects.

Examples include:

• Pages
• Blogs
• Articles
• Images

Notice that these are all plural names, suggesting that these objects hold a collection of values, which they do.

Single-Value Objects

These objects have a single value that is outputted by calling the object itself.

Examples include:

• Canonical_url
• Current_page, and of course
• Handle

Traditional Style Objects

Traditional Style Objects are objects that hold attributes which in turn hold values that could be any kind of data type like strings, arrays and other objects. If you've worked with other programming languages before (like Javascript), this is what you would generally think of as an object.

Examples include:

• Product
• Customer
• Page
• Collection, and
• Article

Here's a quick code example showing all styles in use:

{% for product in collection.products %} 
	{{ product.handle }} 
{% endfor %}

In this example, collection is a traditional-style object, products is an array-like object and handle is a single value object - again, not official terminology, just a few labels to help you understand these objects' behaviour.

Concept 2: Object Nesting and Scope

While the official documentation goes into great detail with most of the objects in Liquid, it often fails to tell us where these objects are available.

For instance, you can read about all the attributes on the article object but it won't tell you where in your theme you have access to it or which objects you will find it nested under.

Some objects you can access from anywhere in your theme but most are specific to certain templates and that's why I decided to go through every object in Liquid and find out for myself.

Object Reference

Let's go through all the objects listed in Shopify's documentation and learn more about them, categorising each by scope, nesting and style.

Note: I won't go into all the individual attributes (as Shopify already does a great job at that)

Also note: feel free to skim-read this section and come back to it after Tags and Filters. It's not required to know of every object in Liquid but it's here in case you need it

Global Objects

The following objects are available from wherever inside your theme.

all_products

global, array-like, non-iterable

all_products is a non-iterable array-like object. As the name suggests it's used to gain access to any product from anywhere within your theme.

While the all_products object contains a collection of objects (ie. array-like), you can't actually loop through them (ie. non-iterable). Instead, you can access a specific product from all_products using the handle of specific product you want to access (see 'Accessing handle attributes' on the official documentation)

{{ all_products['wayfarer-shades'].title }}

pages

global, array-like, non-iterable

Used to access specific pages from anywhere in your theme via the page's handle.

By the way, you can access a resource (eg. a page, product or an image) via its handle by using the square bracket syntax (as above) or the dot syntax (like below)

<h1>{{ pages.about.title }}</h1>

blogs

global, array-like, not iterable

Just like all_products and blogs, you can access the different blogs of your website (you can have multiple on the same site) via the specific handle of the blog.

<h1>{{ blogs.myblog.title }}</h1>

The above code will output the title of the blog with the handle 'myblog'.

articles

global, array-like, not iterable

Just like all the global objects above, you can access any article in your store via its handle.

images

global, array-like, not iterable

You can access any image in your store via its filename (similar to how you would access another resource using it's handle).

collections

global, array-like, iterable

Unlike all the previous global objects mentioned, you can loop through all the collections available in your store in addition to accessing a specific collection via its handle using the collections object.

{% for collection in collections %} 
	{{ collection.title }} 
{% endfor %}

The above code will loop through all the collections in your store and output the title of each.

linklists & links

global, array-like, iterable

Linklists represent the menu structure you've set up in the 'navigation' section of your online store admin.

You might be wondering why Shopify didn't just call the object a 'menu' but calling it a 'linklist' instead helps you to think more open-mindedly about these array-like objects.

Perhaps in future, you may want to display a list of links that aren't necessarily a 'menu' and the linklist object lets you do that as well.

Just like the collection object, you can loop over linklists or access a particular linklist by its handle. Once inside a linklist, you can access its links via its links attribute, which will give you an iterable list to loop through.

The tricky thing with linklists and links though is that a single link can have a links object attached to it as well and that's how you are able to access the sub-links within that link (note: this is limited to three layers deep in Shopify).

For these nested sub-links, a common convention is to label the second layer of links 'childlinks' and the third as 'grandchildlinks' to make it easier to understand.

{% for linklist in linklists %} 
	<div> 
    	<h2>{{ linklist.title }}<h2> 
        <ul> 
        	{% for link in linklist.links %} 
            	<li> 
                	<a href="{{ link.url }}">{{ link.title }}</a> 
                	<ul> 
                    	{% for childlink in link.links %} 
                        	<li>
                            	<a href="{{ childlink.url }}">{{ childlink.title }}</a> 
                                <ul> 
                                    {% for grandchildlink in childlink.links %} 
                                        <li>
                                        	<a href="{{ grandchildlink.url }}">{{ grandchildlink.title }}</a>
                                        </li> 
                                    {% endfor %} 
                                </ul>
                            </li> 
                        {% endfor %} 
                    </ul>
                </li> 
             {% endfor %} 
         </ul>
    </div> 
{% endfor %}

As you can see from above, the nesting gets pretty hectic when you have menus that are three layers deep.

request

global, traditional-style

The request object is a simple helper object to give you access to the domain a customer is visiting from, the shop_locale (ie. the language) of the user and the path to the current page.

Read more on the official documentation.

scripts

global, traditional-style

If your store is on the 'Shopify Plus' tier of Shopify, you have access to what's called 'scripts'.

Scripts are used to create discounts that are applied to a cart and/or to customize the shipping and payment options that are available to your customers.

Shopify scripts are written in Ruby and use the Shopify Scripts API.

If you're interested, read about it on the official docs but as less than 1% of Shopify stores are on Shopify Plus, it won't be particularly relevant for most users

settings

global, traditional-style

The global settings object lets you access the settings of a store's published theme.

Remember that settings are defined through the settings_schema.json file in your theme and the stored values are in the settings_data.json file.

This differs to the settings object that is attached to particular sections (which we'll talk about a little later).

cart

global, traditional-style

The cart object is available from wherever in your Shopify theme and as the name suggests, it holds all the information you might need to access about your shopping cart (such as all the cart items and the total price).

Read more about the cart object on the official docs.

customer

global, traditional-style

The customer object represents the customer that is logged in to the store. Although it is available as a global object, it will only return an object if a customer is logged in.

{% if customer %} Hello {{ customer.first_name }} {% endif %}

The above code checks if a customer is logged in first before rendering the text.

Read more about the customer object on the official docs.

shop

global, traditional-style

The shop object contains information about your store like its name, domain and physical address.

theme

global, traditional-style

The theme object allows you to access the id and name of the theme in use.

routes

global, traditional-style

This object is not listed as global in the Shopify docs but appears to be available from anywhere within your theme.

The object allows to generate dynamic URLs to your storefront. Learn more on the official docs.

canonical_url

global, single value

The canonical_url object returns the canonical URL for the current page. The canonical URL is the page's "default" URL with any URL parameters removed.

current_page

global, single value

current_page returns the number of the page you are on when browsing through paginated content.

page_description

global, single value

page_description returns the meta (SEO) description of currently viewed page.

The word 'page' in this instance does not refer to the page object/content type in Shopify but rather, any page the user might be looking at, whether that be a product, collection, blog article or Shopify page.

page_title

global, single value

Just like page_description, page_title refers to the SEO title of the currently viewed page.

This differs from page.title which is the title of a particular Shopify page whereas page_title is any page in your store that your customer is viewing.

I know! The terminology overlaps a little but hopefully that makes sense.

handle

global, single value

The handle object is Liquid is a very special one. You can think of it as a unique but human-readable identifier that can be used in various ways.

Just like we saw before, we can use a resource's handle to access that particular object from one of the previously mentioned, blogs, articles, collections, pages or products global objects.

{% for product in collections.featured.products %} 
	{{ product.title }} 
{% endfor %}

The above code loops through the products contained in the 'featured' collection and outputs the title of each product.

We can also call the handle object directly on any page to check whether we're on a certain page.

{% if handle contains 'private' %} 
	Don't show this to anyone! ok? 
{% endif %}

You might be thinking where does this 'handle' come from? The answer is that Shopify automatically generates it for you based off of the title you set for the resource.

For example, if you created a page called 'About Us', the handle would look something like this: 'about-us'.

Learn more about how to change your handle in the Shopify admin here

template

global, traditional and single value (both)

The template object defies convention as it will return a single value when called directly but also has attributes.

If you call template (the name by itself), you will get the name of the template that is being used to render the current page but can also access the name of the template's parent directory (usually just templates) through the directory attribute, its 'suffix' (for when using an alternate template is being used) through the suffix attribute and strangely enough, the name of the template through the name attribute.

Template-specific Objects

The following objects are only available in their respective templates (unless accessed as a nested object).

• product
• page
• search
• collection
• article
• blog
• cart
• checkout

These objects all follow a common pattern in that their names match the template in which they are available. For example, the product object is available in the product template.

Special mention: the 'section' object

The section object is what you use to access section data in a given section.

The section data of course, is determined by the JSON 'schema' that you create inside the section file combined with the user input through the theme customiser.

I'm breezing over JSON schemas a little bit here as this post is all about Liquid but you can learn all about JSON schemas in lesson 5 of my Skillshare class, 'Shopify Theme Programming'.

For more info on the section object in Liquid, Check out the official docs

Nested Objects

Many of the afore-mentioned objects also have objects inside them and some of these nested objects can appear in multiple places. So let's list out all these nested objects and under which objects you'll find them.

address

checkout, customer, order and shop

The address object comes in a few different forms.

shop.address represents the address of your shop whilst billing_address and shipping_address are two manifestations of the address object that exist on checkout, customer and order objects.

All of these objects can be summarised by one address object as they all have the same attributes which let you access the various parts of the address such as the first line of the address, the city and the country.

Learn more about the address object on the offical docs.

block

section

Blocks are a feature of Shopify sections that allow the user to add and remove a list of 'blocks' which contain a common set of settings.

A particular block can be accessed by looping through the blocks object nested on the section object.

To learn more about blocks, check out this page on the official documentation.

setting

section, block

The setting object holds the attributes of a setting on either a block or section.

For example, the value of the 'image' setting for a particular section can be accessed using section.settings.image

currency

cart and shop

The currency object exists in two different places.

One, as an item on shop.enabled_currencies and second, nested in the cart object.

You can use this object to determine the name, ISO code and symbol of each currency that your store enables or the currency of the cart (respectively).

discount_application

cart, checkout and order

The discount objects in Liquid are a little tricky. The discount application_object exists as an item within discount_applications and cart_level_discount_applications both of which are passed around the cart, checkout and order objects.

As you would suspect, all of its attributes are related to the application of discounts.

Find out more on the official docs.

discount_allocation

line_item

I haven't been able to track down many examples of this object in use but it appears to be a way to access discount information on the line_item object specifically.

Check out this article on Shopify's website for more info.

line_item

cart, checkout, fulfilment and order

Speaking of the line_item object, this object is what you get when you loop through cart.items, checkout.line_items, order.line_items or fulfillment.fulfillment_line_items.

The object represents a single line in the shopping cart and given that there is just one line item for each distinct product variant in the cart, you can think of a line_item as tightly coupled to a product variant.

You'll see a few objects that get shared amongst cart, checkout and order as these objects all share a similar composition with their names mainly representing the state of an order moving through the various stages, all the way from the customer placing their first item in the cart to having that order fulfilled.

The line_item object has a lot of properties which you can read about on the official docs.

shipping_method

checkout

The shipping_method object is a simple one. It is available on the checkout object and gives you access to the handle, price (both original and current) and title of the shipping_method.

fulfillment

line_item

The fulfillment object appears to be a nested object of the line_item object in Liquid with which you can expose fulfilment details about a product in a customer order.

After searching through numerous themes, the best example I could find of the fulfillment object is this one in Shopify's own Debut theme.

{%- if line_item.fulfillment -%} 
	<div class="note"> 
    	{%- assign created_at = line_item.fulfillment.created_at | time_tag: format: 'date' -%} 
        {{ 'customer.order.fulfilled_at_html' | t: date: created_at }}
        <div> 
        	{%- if line_item.fulfillment.tracking_url -%} 
            	<a href="{{ line_item.fulfillment.tracking_url }}"> {{ 'customer.order.track_shipment' | t }} </a> 
            {%- endif -%} 
        	<div> 
            	{{ line_item.fulfillment.tracking_company }} 
               	{%- if line_item.fulfillment.tracking_number -%} 
                    #{{ line_item.fulfillment.tracking_number }} 
                {%- endif -%}
            </div> 
       </div> 
   </div> 
{%- endif -%}

Judging from the above code, the fulfilment object is an object for accessing information about the fulfilment of a product (represented as a line item) in a customer order.

You can always head to the official documentation to learn more about it but as usual, Shopify leaves a lot to the imagination.

image

collection, article, product, variant and line_item

The use of the image object is pretty common sense. It allows you access the image of a collection, article, product, variant or line_item.

To display an image, you might simply use the image.src attribute in your own HTML tag but you're also able to pass the image object through some helpful image filters as well.

Check out all the attributes you can access through the image object here on the docs.

variant

product, image and line_item

The definition of a variant is something that confused me when I first started working with Shopify but it's easy to understand once you grasp it.

You can think of a variant as the actual product that you deliver to the end customer.

You might sell a particular type of shoe that comes in various sizes and colours. Each variation of that 'product' is a 'variant' in Shopify. If the shoes vary only by size then you will have as many variants for that product as you do size options but if you have other options (for colour and material, let's say), the number of variants grows exponentially as the number of possible combinations are multiplied.

The variant object is usually accessed via product.variants but you can also find the variants that are associated with images and line items via image.variants and line_item.variant.

Variants are important in Liquid because the variant (not the product) is what gets added to your cart and turned into line items.

Read more about variants on the official docs

product

collection and line_item

The product object (in addition to being available in the 'product' template) is also a nested object, available in collection.products and line_item.product.

collection.products is how you would access the products in a particular collection and line_item.product gives you access to the product that is represented in the line item.

Learn more about the product object on the official docs

transaction

checkout and order

I've never had to use the transaction object but it appears from the transactions attribute on the checkout and order object, that an order can have multiple transactions and that this object is how you would access them in Liquid.

policy

shop

A policy represents an individual policy of the shop.policies object.

You can also access an individual policy via shop.privacy_policy, shop.refund_policy, shop.shipping_policy and shop.terms_of_service.

metafield

product, collection, customer, order, blog, page and shop

Metafields are an interesting functionality in Shopify that allow you to create your own datasets and include them on products, collections, customers, orders, blogs, pages and your shop.

A metafield consists of a namespace, a key, a value, and a description (optional).

I won't go into too much detail about metafields as you can read about it on the docs but in terms of including metafields in your Liquid code, you can access them via the metafields object, nested on the previously mentioned resource objects, followed by the namespace of the metafields you want to access.

Full details on the doc here.

tax_line

order and checkout

This one is pretty basic. If there's a tax line on your checkout or order, this is where you would access it.

order

customer and checkout

The order object is usually found on customer.orders but can also be found attached to the checkout object.

Orders should be pretty easy to understand, they are essentially the future manifestation of a cart that has passed successfully through a checkout.

product_option

product

The product_option object is what you get when you loop through product.options_with_values and contains the name of the possible product options and the possible values within it (among a few other attributes).

collection

product

Like product, collection is a template-specific object that you can can also find nested.

Not only can access a list of products in a particular collection with collection.products, you can also grab the list of collections that include a particular product via product.collections

result

search

A 'result' is what you get when you loop through search.results. result is a special object in that it can be an article, page or product. So, it's not exactly a separate object but a alternate name for the article, page or product object that you retrieve from the list of results on a search page.

user

article

user is a simple object that appears on the article object. Inside you'll find information about the article's author.

Read more about the user object on the official docs

comment

article

Similar to user, comment is just the object you would use for retrieving information about a particular comment on an article and can be accessed via article.comments

article

blog

In Shopify you can have multiple blogs and so you would usually display articles by looping through the list of articles on a particular blog via blog.articles

Of course, once you navigate to a particular article, you will have access to the article object. The nested form of this object is for when you're on the blog template.

Read more about the article object on Shopify's official docs.

Helper Objects

I call the following objects 'Helper Objects' as they simply help us to program in Liquid instead of giving us access data from within our store like the others mentioned above.

forloop

The forloop object contains attributes of the parent for loop. You can use it to find out the length of the current loop or your position within it (amongst a few other things).

You can read more about the forloop object here

font

The font object helps you to access specific details of a font on the settings object.

You can read more about the font object here.

form

Similar to the forloop object, the form object provides attributes for use within the {% form %} Liquid tag.

More on the form object here

paginate and part

Just like the form object, the paginate object provides attributes for use within the {% paginate %} Liquid tag. The part object is what you'll find nested on the paginate object via paginate.parts. A 'part' simply represents a link in the pagination's navigation

More on the paginate object here

tablerow

The tablerow object is essentially the same as the forloop object but for tablerows instead.

You can read more about the tablerow object here

Other Objects

Finally, there are a few objects in Liquid that don't quite fit into the previous categories. Some of these appear to be weird quirks of the language while others can be useful.

customer_address

The customer_address object has a lengthy page in Shopify's official documentation but I personally have never seen it used and it appears to be redundant given that you can access a customer's address via customer.addresses.

discount

The discount object may be found in the code of older themes but in the current version of Liquid, this object is just for displaying discounts inside notifications or in the Order Printer app. Therefore, it is no longer relevant for theme development.

recommendations

The recommendations object in Liquid is a strange one. It is essentially a striped-down collection object that is auto-generated by Shopify via their own algorithm and can be used on the product template to display recommended products.

The reason why this object is so strange is that you need to use Shopify's AJAX API in addition to a Liquid loop to get it to work.

<div id="recommended-products"> 
	<h2>Recommended: </h2> 
    {% if recommendations.products_count > 0 %} 
        {% for product in recommendations.products %} 
            {{ product.title | link_to: product.url }} 
        {% endfor %} 
    {% endif %} 
</div>

The above code should be enough to render the recommended products to the page but it isn't

As it states in the official docs,

The recommendations object returns products only if it's used in a theme section that's rendered via /recommendations/products?section_id=[section_id]&product_id=[product_id]

It took me a while to figure out that the above url was a endpoint of the AJAX API and that in order to get the recommended products to show, you have to add some extra data attributes to the parent div, add in the If statement for recommendations.performed and include the code in its own section.

The Liquid code turns out looking more like this:

<div id="recommended-products" data-product-id="{{ product.id }}" data-limit="5"> 
	<h2>Recommended: </h2> 
    {% if recommendations.performed %} 
    	{% if recommendations.products_count > 0 %} 
        	{% for product in recommendations.products %} 
            	{{ product.title | link_to: product.url }} 
            {% endfor %} 
        {% endif %} 
    {% else %} 
    	<div class="placeholder">[Placeholder animation goes here]</div> 
    {% endif %}
</div>

Then you need to send the whole section to the AJAX API, the API will respond with the client-side code and then, you will render that to the page using something like this:

function ProductRecommendations(container) { 
	var $container = (this.$container = $(container)); 
    var productId = $container.data('product-id'); 
    var limit = $container.data('limit'); 
    var productRecommendationsUrlAndContainerClass = '/recommendations/products?&section_id=product-recommendations&limit=' + limit + '&product_id=' + productId; 	
    $container.parent().load(productRecommendationsUrlAndContainerClass); }; 
    document.addEventListener("DOMContentLoaded", function() { 
    ProductRecommendations($('#recommended-products')); 
});

I figured this out by reading a few articles on Shopify's website as well as studying how the object is used in popular themes.

It's not clear to me why you would need to involve Javascript at all but I guess this is just another quirk of Shopify.

country_option_tags and all_country_option_tags

The all_country_option_tags object creates a HTML tag for each country and the country_option_tags object does the same but all for the countries that are included as a shipping zone on the Shipping page of the admin.

These are handy if you want to create a dropdown (<select><option>dropdown</option></select>) with these countries as options.

current_tags

The current_tags object can be used inside the blog and collection templates and contains all the tags that are being used to filter that collection or blog.

A common use and pattern for the current_tags object can be seen in this example in the collection template

<ul> 
	{% for tag in collection.all_tags %} 
        {% if current_tags contains tag %} 
            <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
        {% else %} 
            <li>{{ tag | link_to_add_tag: tag }}</li> 
        {% endif %} 
    {% endfor %} 
</ul>

Liquid Tags

Alright, so that was probably more words on Liquid objects than anyone would want to read in one go. So now, let's look at how we can combine these objects with useful tags to help our themes to do what we need them to do.

As previously mentioned, if you want to simply output a value - whether that be data from your store or a variable created inside Liquid - you simply use the curly braces.

{{ product.title }}

The rest of the tags can be categorised as:

• Control flow tags
• Iteration tags
• Variable tags, or
• Theme tags

Control Flow Tags

Control flow tags are basically just conditionals and they're quite common-sensical. They include If/then statements, unless/else statements and switch statements.

If / Then

If a condition is true, perform some code, if not, perform some other code - quite simple.

{% if shipping_method.title == 'International Shipping' %} 
	You're shipping internationally. Your order should arrive in 2–3 weeks. 
{% elsif shipping_method.title == 'Domestic Shipping' %} 
	Your order should arrive in 3–4 days. 
{% else %} 
	Thank you for your order! 
{% endif %}

Unless / Else

The opposite of an If statement, an Unless statement performs some code if the condition inside the unless tag is not true.

{% unless product.title == 'Awesome Shoes' %} 
	You are not buying awesome shoes. 
{% endunless %}

Case / When

A Case (or switch statement, as you might of heard it being referred to in other languages) tests a particular object or attribute for a range of values.

{% case shipping_method.title %} 
	{% when 'International Shipping' %} 
    	You're shipping internationally. Your order should arrive in 2–3 weeks. 
    {% when 'Domestic Shipping' %} 
        Your order should arrive in 3–4 days. 
    {% when 'Local Pick-Up' %} 
        Your order will be ready for pick-up tomorrow. 
    {% else %} 
        Thank you for your order! 
{% endcase %} 

The above code checks if the value of shipping_method.title is 'International Shipping', 'Domestic Shipping', 'Local Pick-Up' or none of the above and for each of these scenarios runs a different line of code.

The thing to note with conditionals in Liquid are the helpful but tricky truthy and falsey values.

If you're experienced with programming in Javascript for instance, you would be aware of truthy and falsey. It's a concept in which values that aren't explicitly false or true can still sometimes evaluate to true or false.

A similar concept applies in Liquid and a common pattern with conditionals is to check if a certain object exists before outputting. We can do this simply by including the object that we want to check directly after the If keyword without any comparison operators.

{% if item_title %} 
	{{ item_title }} 
{% else %} 
	Object with the name item_title does not exist 
{% endif %}

In the above example, the text Object with the name item_title does not exist will output unless you created your own Liquid variable with that name.

The exception is blank objects or values (ie. ones where the value is " " or that don't exist at all). These are considered truthy in Liquid. So if you expect an object could contain an empty string value or may not exist at all, you can check whether the object is blank using the blank keyword.

{% if item_title != blank %} 
	{{ item_title }} 
{% endif %}

This works the same for array-like objects but instead of checking for blank, you need to check the length of the array-like object via it's size attribute.

{% if article.tags.size > 0 %} 
	{% for tag in article.tags %} 
        <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a> 
    {% endfor %} 
{% else %} 
	No tags 
{% endif %}

Note that an object that does not exist in Liquid is sometimes known as an EmptyDrop.

Iteration tags

We've already seen a few examples of Iteration Tags already. The most common form is a for loop.

For Loop

{% for product in collection.products %} 
	{{ product.title }} 
{% endfor %}

The text after the 'in' on the first line represents the array-like object that you want to loop through and the text between the 'for' and 'in' represents an individual object which you can call inside the code block (ie. inside the the opening for and closing endfor tags).

The for loop basically works the same as a for loop in any programming language with the exception of the else statement, which saves you from having to check that an array-like object is empty with an if statement.

{% for product in collection.products %} 
	{{ product.title }} 
{% else %} 
    The collection is empty. 
{% endfor %}

Then there's the break and continue keywords which (when called) break out of the loop or skip the current iteration of the loop respectively. These can be handy for more complex Liquid patterns where you're trying to find a particular object within a collection of objects.

There's also the limit, offset, range and reversed parameters but in my experience, they aren't all too common. You can learn more about them in the official documentation.

Cycle

Cycle is a special iteration tag that works when nested inside a for loop. You can use cycle to loop through a group of strings and output them in the order that they were passed in as parameters.

When you first learn Liquid, it's not immediately clear why you would want to use cycle but I have found one instance where it is used in popular themes and that is to assist in the display of placeholder images.

The above is generated by the following code.

<div class="grid grid--uniform"> 
	{% for i in (1..product_limit) %} 
    	<div class="grid__item grid-product {{ grid_item_width }}" data-aos="row-of-{{ per_row }}"> 
        	<div class="grid-product__content"> 
            	<a href="{{ product.url | within: collection }}" class="grid-product__link {% if sold_out %} grid-product__link--disabled{% endif %}"> 
                	<div class="grid-product__image-mask"> 
                    	{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} 
                        <div class="image-wrap">
                        	{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div> 
                    </div> 
                    <div class="grid-product__meta"> 
                    	<div class="grid-product__title">
                        	{{ 'home_page.onboarding.product_title' | t }}
                        </div> 
                        <div class="grid-product__price">$29</div>
                    </div> 
               </a> 
           </div> 
      	</div> 
  	{% endfor %}
</div>

On line 7 of the above code, you can see the cycle statement. On the first iteration of the loop, the output of the cycle statement will be 1 and that will be assigned to the current variable for use in the next line to tell Shopify which placeholder image to show. On the second iteration, the value will be 2, so-on and so-forth until the seventh iteration, at which point the value will loop back to 1.

This is important as there are only 6 product placeholders that Shopify provides and so if you just used the index, you would get an error once you started to look for number 7. Instead (as you can see from the image), the image for the seventh placeholder is the same as the first and the cycle repeats itself.

The funny thing is that I was able to achieve the same result by replacing

{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}

with

{% assign current = forloop.index0 | modulo: 6 | plus: 1  %}

So cycle appears to be another quirk of the language and one that I can't see as particularly useful.

Tablerow

Finally, there's tablerow which generates rows for a HTML table.

Such a result can be achieved quite easily using a for loop as well so I'm not sure why Shopify decided to create this particular iteration tag.

I suppose that when you include the 'col' parameter you're able to create tables with less code. I've never seen a need for this particular tag, I'll refer you back to the documentation if you want to learn more about it.

Variable Tags

Variable tags give us theme developers the ability to organise and section our code better by storing data from our objects and attributes into meaningful variables.

They are also handy for creating boolean flags. For instance, when we might switch a variable to true if a certain condition has been matched in a loop.

Variables in Liquid work quite similarly to how they exist in most programming languages but in Liquid, we use the assign keyword.

assign

In Liquid, you use assign for both declaring and assigning a variable.

{% assign current_collection = collection %}

The above code helps to make the code in the collection template more readable by calling the collection object 'current_collection'.

We could also assign a value of a number or string just as well.

{% assign colour = '#7ab55c' %}

You'll find that assigning your own variables can be essential when doing complex patterns in Liquid.

capture

The capture tag 'captures' the string inside of the opening and closing tags and assigns it to a variable. This is how you can perform string concatenation in Liquid (ie. the process of adding strings from various sources together.

{% capture url %}/collections/{{ collection.handle }}{% endcapture %} 
{{ collection.title | link_to: url }}

The example above combines the text '/collections/' with a collection's handle to form a url variable that is then used on the next line to create a link with that collection's title.

increment and decrement

increment creates a new number variable, and increases its value by 1 every time increment is called on the variable while decrement does the same but decreases the value by 1 instead.

It might be handy as a shorthand to using the plus or minus filter but the major difference is that both increment and decrement will automatically output the new value when called.

Theme Tags

Theme tags include other functions that assist in theme development. They can be used for pagination, theme structuring and more.

layout, section and include

Layout, section and include are all tags that assist in theme structure.

By default, any template will load with the layout in the theme.liquid file but you can set a template to load with a different layout using the layout tag at the top of the file with the name of the file you want to load (without the .liquid file).

{% layout 'full-width' %} 

The above code will load the full-width.liquid layout file.

As for the section and snippet tags, they simply load a section directly inside the place where they are called.

Snippets can be included anywhere (including other snippets) while sections can be included in layout and template files. They work just like the layout tag.

{% section 'header' %} {% include 'snippet' %}

Note that you can also pass variables into snippets but you can learn more about that on the official docs.

For a primer on Shopify theme structure check out the third video in my YouTube series on Shopify Theme Development.

comment

The comment allows you to leave un-rendered code inside a Liquid template. They work the same as comments in any other programming language.

{% comment %} Store product title in a variable {% endcomment %}
{% assign product_title = product.title %}

form

The form tag helps you to create a forms in Shopify. It renders a HTML <form> element along with the required <input> elements to submit the form to a particular endpoint.

To use the tag, include the form type and any parameters to the right of the form keyword. For example, the following code will generate a form for adding a product variant to the cart and requires a product object as a parameter.

{% form "product", product %} ... {% endform %}

To find a list of the various form types, head to the Shopify official docs, you can .

paginate

The paginate tag assists with pagination in Shopify themes. When wrapped around the loop you wish to paginate through, it will automatically limit the amount of results that show up by the number following the by keyword.

{% paginate collection.products by 5 %} 
	{% for product in collection.products %} 
        <!--show product details here --> 
    {% endfor %} 
{% endpaginate %}

raw

Raw allows you to output Liquid code on a page without it being parsed.

{% raw %}{{ 5 | plus: 6 }}{% endraw %} equals 11.

The above code will look like this on the front-end: {{ 5 | plus: 6 }} equals 11.

style

The style tag in Liquid is a alternative to the standard HTML style tag. Using the Liquid version over the HTML one assists with live preview in the theme customiser.

{% style %} 
    .hero__background-color-container { 
    	background-color: {{ section.settings.background_color }} 
    } 
{% endstyle %}

Liquid Filters

Filters are simple methods that modify the output of numbers, strings, variables and objects and are denoted by a pipe character (|).

Using filters, you can modify a value in place (using output tags {{ }}) or assign a modified value to new variable.

{% assign downcased_title = product.title | downcase %}

The above filter is called a 'string filter' as it takes a string and - in this case - makes all characters within it lowercase.

There are also filters that take a whole object and 'filter' out a particular attribute.

{{ product | img_url: '100x100' }}

The above filter takes the product object and 'filters out' a url for the product with the dimensions set in the parameter (100px x 100px).

Shopify's documentation categorises Liquid filters via Array, Color, Font, HTML, Math, Money, String, URL and other filters.

Array filters

Arrays are one area in which the limitations of Liquid become apparent.

Shopify Liquid is like a dumbed down programming language and common things are often quite simple to achieve in Liquid (like the example above of outputting a product image) but things can get really tricky (and sometimes impossible) when trying to do more complex calculations.

One area where you will notice this is with arrays.

first and last

Using the filters first or last, you can access the first or last item in an array.

{{ product.tags | first }}

Note that you could also access the first item of an array by its 0 index.

{{ product.tags[0] }}

Changing the above number to 1 would give you access to the second item in the array, 2 to the third and so-on so-forth.

size

The size filter (when call on an array) returns the number of items in that array.

{{ collections.featured.products | size }}

Note that you can also use the same filter on a string to return the amount of characters in that string.

{{ 'Learning Liquid is so fun!' | size }}

The above code will return 26 as that is how many characters make up that particular string.

join

The join filter takes an array of values and converts it into a single string separated by the parameter that you set after the join keyword.

{{ product.tags | join: ', ' }}

The above code will output a list of product tags as a string with each item separated by a comma.

concat

The concat filter enables you to combine two arrays together. However, it will not remove duplicate entries from the concatenated array unless you also use the uniq filter.

{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %} 
{% assign vegetables = "broccoli, carrots, lettuce, tomatoes" | split: ", " %} 
{% assign plants = fruits | concat: vegetables %}

The above 'plants' variable will contain an array with apples, oranges, peaches, tomatoes, broccoli, carrots, lettuce and tomatoes.

Note the 'split' filter. That one is considered a string filter that we will cover in a future section but in this example, it essentially does the opposite of the previous join filter.

map

The map filter allows you to create an array based on a nested attribute within another array.

{% assign collection_titles = collections | map: 'title' %}

The above code creates an array of collection titles. You can think of it as a function that loops through all the collections, finds the title attribute for each and then creates a new array with all of those titles.

reverse

A simple array filter that reverses the order of an array.

sort

As the name suggests, the sort filter sorts the elements of an array by a given attribute of an element in the array.

{% assign products = collection.products | sort: 'price' %} 
{% for product in products %} 
	<h4>{{ product.title }}</h4> 
{% endfor %}

When sorting numbers, it appears to sort from smallest to biggest and when sorting text, it appears to sort in alphabetical order with uppercase characters coming before lowercase characters.

If you'd like the order in reverse of that however, you can always chain a reverse filter to the end.

where

The where filter allows you to filter down an array based on a certain property and value for each item.

For example,

{% assign shoes = collection.products | where: "type", "kicks"%} 
{% for product in shoes %} 
	- {{ product.title }} 
{% endfor %}

outputs the same as

{% for product in collection.products %} 
	{% if product.type == "kicks" %} 
    	- {{ product.title }} 
    {% endif %} 
{% endfor %} 

uniq

The uniq filter (short for 'unique') filters out duplicate values in an array.

For example, if we take two lists which could have duplicate values and concatenate them, Liquid will not merge the duplicate values by default.

{% assign heavyweight = "Stipe, Daniel, Junior, Curtis, Derek" | split: ", " %} 
{% assign pound4pound = "Jon, Henry, Stipe, Amanda" | split: ", " %} 
{% assign fighters = heavyweight | concat: pound4pound %}

The fighters array in this instance would contain 'Stipe' twice as his name appears in both lists.

To fix this, we would simply chain a uniq filter on the end.

{% assign fighters = heavyweight | concat: pound4pound | uniq %}

The fighters array will now contain each fighter's first name only once, even if it appears in both lists.

String Filters

Right up there with array filters in terms of importance (in my opinion) are the string filters which simply modify the output of strings.

There are over 30 different string filters in Liquid and so I won't go over all of them individually here but you can find the full list on the official docs.

append & prepend

append and prepend appends (adds a string value to the end of) and prepends (adds a string value to the beginning of) the string being acted on.

{{ ' Liquid ' | prepend: "Hello" | append: "fans!" }}

The above Liquid tag will render as "Hello Liquid fans!".

upcase & downcase

As the names suggest, these filters will either captilize every letter of a string or lowercase every letter.

These filters are particularly useful for testing the equality of two strings as the equality operator "==" is case-sensitive.

For example:

{% assign product_type_1 = "Shoe" %} 
{% assign product_type_2 = "shoe" %} 
{% if product_type_1 == product_type_2 %} 
	True 
{% else %}
	False 
{% endif %}

The above code will output 'False' as the 's' in shoe is a capital letter in one string and not the other.

To force the comparison to not be case-sensitive, we can simply make sure all the characters are converted to uppercase or lower case using the upcase or downcase filter before comparison like such:

{% assign product_type_1 = "Shoe" | downcase %} 
{% assign product_type_2 = "shoe" | downcase %} 
{% if product_type_1 == product_type_2 %}
	True 
{% else %}
	False 
{% endif %}

With the use of the downcase filter for both, the output will now be True instead of False.

remove, remove_first, replace and replace_first

As the names suggest, these filters remove or replace occurrences of a substring from a string.

• remove will remove a substring from wherever it appears in the input string
• remove_first will remove the first occurrence of a substring in the input string
• replace will remove a substring from wherever it appears in the input string and replace it with another string that you specify, and
• replace_first will replace the first occurrence of a substring in the input string

Here are all of them in action

{{ "Hello, world. Goodbye, world." | remove: "world" }} --> "Hello, . Goodbye, ." 
{{ "Hello, world. Goodbye, world." | remove_first: "world" }} --> "Hello, . Goodbye, world." 
{{ "Awesome Shoes" | replace: 'Awesome', 'Mega' }} --> "Mega Shoes" 
{{ "Awesome Awesome Shoes" | replace_first: 'Awesome', 'Mega' }} --> "Mega Awesome Shoes"

strip, lstrip, rstrip, strip_html and strip_newlines

These are all filters for stripping content from a string. lstrip strips tabs, spaces, and newlines (all whitespace) from the left side of a string, rstrip does the same but for just the right side and strip does both (ie. strips whitespace from both sides).

As the names suggest, strip_html will remove any HTML tags from a string and strip_newlines will remove any new lines from a string.

truncate & truncatewords

truncate 'truncates' a string down to the number of characters passed as the first parameter with an ellipsis (...) appended to the end.

truncatewords on the other hand 'truncates' a string down to the a number of words (as opposed to characters).

Both filters will apply an ellipsis unless otherwise instructed and for truncate, the ellipsis is included in the character count.

See the official docs for more info.

url_encode, url_escape and url_param_escape

All of these filters assist in filtering out and replacing URL-unsafe characters in a string.

As it's often rare that you would need these, I'll refer you to the official docs to learn more about these filters and their differences.

md5, sha1, sha256, hmac_sha1 and hmac_sha256

These are rare filters which are all concerned with converting strings into 'hashes'. md5 converts a string into a MD5 hash, sha1 converts a string into a SHA-1 hash, sha256 into a SHA-256 hash and so on.

If you don't know what a hash is then don't worry. You probably don't need to know what these are.

camelcase

Camelcase is the practice of writing phrases such that each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation. Using the camelcase filter, you can convert a string to this particular format.

{{ 'coming-soon' | camelcase }}

The above snippet will return "ComingSoon".

capitalize

The capitalize filter capitalizes the first word in a string.

escape

The escape filter is one that helps you to 'escape' HTML. You can think of it like strip_html but instead of simply removing HTML, the escape filter replaces it with special characters that are not 'parsed' by your browser.

If you escape a string before outputting it in Liquid, then the tags will show up rather than being interpreted as HTML.

For example, {{ '<h1>Hello!</h1>' | escape }} will return '<h1>Hello!</h1>' explicitly rather than create a H1 tag and the result in the HTML markup of you page would be &lt;h1&gt;Hello!&lt;/h1&gt;

handle/handleize

The handleize filter formats a string into a Liquid handle. This is a process that happens automatically in Shopify when you create a new product, collection or similar. Just like how Shopify creates a handle out of your product title, you can perform that same process on any string with this filter.

newline_to_br

This one is pretty simple, it inserts a linebreak HTML tag (<code
) in front of each line break in a string.

pluralize

If you're outputting a unit value in Liquid, you can avoid using an if statement to determine the singular or pluralized version of the unit by using this pluralize filter.

For instance,

{{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }}

In this example, if the item count was 1, the output would be "1 item". If it was 3, the output would be "3 items".

split

We saw the split filter earlier when we were looking at array filters. It allows us to create an array from a string like such:

{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %}

The above fruits object will now hold an array with an item for each fruit name.

slice

The slice filter allows us to create a substring. It takes two parameters, the first for the position at which to start cutting the string and second for the length of substring (defaults to 1 if no value is provided).

{{ "block-120" | slice: 6, 3 }}

The above will slice the input string from after the dash and output the last part of the string, "120".

URL Filters

All files (including images, CSS files and Javascript files) that you upload to your Shopify store will be dynamically stored in Shopify's Content Delivery Network (CDN). This means that anytime you want to retrieve an asset in your theme, you're most likely going to have to use a URL filter.

These filters usually take a relative path or filename and turn it into fully formed URL. Let's have a look!

asset_url

This filter takes the filename of an asset in your theme's asset folder and returns a fully formed URL.

{{ 'shop.css' | asset_url }}

The result of the above would look something like this //cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253.

As you can see, you have the domain of cdn.shopify.com, followed by a few keywords, slashes and digits, followed by the directory/file name and ending with a version number for the asset.

This is what I mean by 'fully formed URL'. To figure out this URL ourselves is near impossible and that's why we need these filters.

img_url

As you may have guessed, the img_url filter generates a URL path to an image. It can be used in a variety of ways.

For instance,

{{ variant | img_url }}, 
{{ variant.image | img_url }}, and 
{{ variant.image.src | img_url }}

... will all return the variant's image url.

As you can see, it's quite flexible and can be used directly on any product, variant, line item, collection, article or image object.

Usually, you'll want to pass in a parameter to control the size of the img with the filter. By default, Shopify will serve a 100px width version of your image which is usually too small. This encourages you to think about how large you actually need the image to be as you'll be specifying the exact width (and height if you like) of the image that gets served from the CDN.

To learn more about the size parameter as well as the other parameters like crop, scale and format, check out the official documentation.

asset_img_url

A hybrid of the last two, asset_img_url returns the asset URL of an image in the "assets" folder of a theme and also accepts an image size parameter.

{{ 'logo.png' | asset_img_url: '300x' }}

file_url

Use this filter to form a url based on a filename that you've uploaded to the 'files' section of your Shopify admin.

{{ 'size-chart.pdf' | file_url }}

file_img_url

Just like we saw with asset_url and asset_img_url, when the file we want to access from the files section of our store is an image, we can use the file_img_url filter to set an image size parameter.

{{ 'logo.png' | file_img_url: '1024x768' }}

customer_login_link

This filter turns a string of your choice into a text link to the customer login page.

{{ 'Log in' | customer_login_link }}

The above code would return something like this: Log in.

global_asset_url and shopify_asset_url

Both these filters allow you to access the url for 'global assets' that are found on Shopify's servers.

A full list of the different global assets can be found here on the official docs.

link_to, link_to_vendor, link_to_type, link_to_tag, link_to_add_tag and link_to_remove_tag

All of these filters help you create a link tag.

The first one, the generic link_to tag is simply an alternative to writing a link tag in HTML.

The code...

{{ 'Shopify' | link_to: 'https://www.shopify.com','A link to Shopify' }}

... will render Shopify

The others take the name of a vendor, type or tag and generates a link to it.

link_to_vendor and link_to_type take an input string and create a link to filter by that vendor or type.

For instance,

{{ "Nike" | link_to_vendor }}

... will create a link to a page with products of just the vendor "Nike" and...

{{ "jeans" | link_to_type }}

... will create a link to a page with products with the type of "jeans".

link_to_tag works in exactly the same way but for tags, there are two additional filters that let you add and remove tags to/from your current list of tag filters.

This way, if you can provide users the option to filter by more than one tag.

For full details, check out the page on the official docs.

sort_by

This filter takes a collection url and adds the necessary query parameter to sort the results of a collection.

{{ collection.url | sort_by: 'best-selling' }}

The above code would output something like /collections/widgets?sort_by=best-selling.

url_for_type and url_for_vendor

Similar to link_to_type and link_to_vendor, these generate just the url of a destination page that filters products by type and vendor.

within

The within filter creates a collection-aware product URL. Basically, it prepends /collections/collection-handle to a product URL, where collection-handle is the handle of the collection that is currently being viewed.

As it states in the docs,

When a product is collection-aware, its product template can access the collection output of the collection that it belongs to. This allows you to add in collection-related content, such as related products.

<a href="{{ product.url | within: collection }}">{{ product.title }}</a>

payment_type_img_url

Finally, payment_type_img_url returns the URL of the payment type's SVG image. Used in conjunction with the shop.enabled_payment_types variable.

As it's not all that common, I'll refer you to the official docs to learn more about it.

HTML Filters

HTML Filters have a similar function to HTML helper functions in other programming languages. They create HTML elements based on Liquid properties or a store's assets.

img_tag

The img_tag filter simply acts as an alternative to writing an image tag in HTML with the added benefit of being able to extract an image url from an object containing an image.

What I mean by that is that you can use the filter to create a tag of an already formed url like so

{{ 'logo.png' | asset_url | img_tag: 'Company Logo', 'cssclass1 cssclass2' }}

Where the first parameter is for the alt attribute of the image and the second is for any classes.

Or, you can call the filter directly on an object like so.

{{ collection | img_tag: 'alternate text', 'css-class', 'large' }}

The optional third parameter is specifying the size of the resulting image and saves you from having to use an img_url filter before it in order to specify size.

stylesheet_tag and script_tag

These tags are handy for generating the necessary stylesheet and script tags for bringing stylesheets and javascript files into your project.

If you've dived into your theme.liquid file before, you might have seen something like this:

{{ 'application.css.scss' | asset_url | stylesheet_tag }} 
{{ 'application.js' | asset_url | script_tag }}

Both of these tags take the filename of the asset and using the asset_url filter we saw earlier, it creates a fully-formed asset url and then creates the necessary tag to include the CSS and JS in the project.

currency_selector, payment_button, time_tag and payment_type_svg_tag

The other HTML filters assist in generating a drop-down list that customers can use to select an accepted currency on your storefront, creating a dynamic checkout button for a product, converting a timestamp into a  tag and generating an <svg> tag of the requested payment type image for inlining purposes, respectively.

You can learn more about these less common filters on the official docs.

Math Filters

In Liquid, any math you wish to perform inside your templates needs to be done with the use of a Math filter.

The biggest limitation to using Math filters for mathematical operations is that filters in Liquid always operate left to right in a linear chain and therefore, there is no way to change the order of operations except for separating out complex calculations into multiple variables.

For instance, here are two examples I use in my Shopify Theme Programming class

{% assign average_price = 50 | plus: 20 | plus: 30 | divided_by: 3 %}

In the above calculation, the left to right order of operations in Liquid actually produces the intended result. In regular math, you would need to use parentheses to make sure all the addition happens first before the division as division comes before addition in regular math.

What if for instance though, we have a customer who buys 2 shirts at $8 each. He also buys two pairs of shorts for $20 each that each get a $5 discount. Now, in order to control the order of operations, we need to separate parts of the equation into seperate variables and then combine them.

{% assign cost_of_shirts = 8 | times: 2 %} 
{% assign cost_of_shorts = 20 | minus: 5 | times: 2 %} 
{% assign cost = cost_of_shirts | plus: cost_of_shorts %}

As you can see, the Math filters in Liquid follow a pretty human readable naming convention.

If you would like to read about all the Math filters available in Liquid, you can do so here on the official docs.

Money Filters

Money filters are super simple (but handy) filters for formatting prices.

In Liquid, the raw value of a price is represented in cents (not dollars or euros) as technically, you can't have a price of lower than one cent. Therefore, in order to make your prices human-readable, you'll need to use a money filter.

• The money filter formats the price based on the shop's HTML without currency setting
• The money_with_currency filter formats the price based on the shop's HTML with currency setting.
• The money_without_trailing_zeros filter formats the price based on the shop's HTML with currency setting and excludes the decimal point and trailing zeros.
• Finally, the money_without_currency filter formats the price using a decimal.

To go in-depth with money filters, check out the page on the official docs.

Other Filters

While Shopify's documentation organises the remaining filters by a few extra categories, I'll lump them altogether as we've already covered the most important ones.

Color Filters

As the name suggests, Color filters take a colour value (either a hex, hsla or rgba value) and modify it in some way.

{{ 'rgba(122, 181, 92, 0.5)' | color_to_hex }}

The above example simply takes an rgba colour code and converts it to hex.

In this instance, the output would be #7ab55c.

You can read the full list of Color filters on Shopify's official documentation.

Font Filters

Font filters are to be used exclusively on font objects. You can use font filters to help load fonts or to obtain font variants.

Again, I'll refer to the official docs here if you'd like to learn more.

The rest

Looking through the remaining filters, I can see a few that I would find useful. One, the date filter for formatting a date, second, the default filter for specifying a default value and third, the json filter for exposing objects in JSON format to your front-end so that you can use them in Javascript.

If you'd like to read more about these filters as well as the 8 remaining, check out this page on the official documentation.

Conclusion

Whoosh! That was quite the blog post huh! I probably could have made this into an eBook instead but for now, this'll stay a blog post.

I know I went into a lot of detail here (and left out a lot of detail at the same time) but my intention was explain Shopify Liquid concepts rather than list off information that can already be found in the official documentation.

If you'd like to actually put what you've learned here today into practice, I've created a Skillshare class that takes the Shopify Liquid theory that you've learned in this post and applies it to an actual theme. Go check it out!

Otherwise, leave a comment below and let me know how you find the guide. Too much information? What would you like to know more about? Let me know!

Thanks for reading.

Until next time,
Chris

First published June 6 2018, Updated December 20 2018

Canggu is the new hottest region in Bali for digital nomads and if you check out the cafe scene here, you'll understand why.

I started off with a small list of spaces to check out and to be honest, I wasn't expecting much. However, after visiting over 10 work friendly cafes in Canggu, I'm still having to add more to the list.

The truth is that almost any cafe or restaurant in Canggu with wifi available is a fair enough location to take out your computer - Even my local Warung (Indonesian restaurant) has wifi for guests!

Of course, you've got some pretty serious coworking spaces in Canggu as well and so in this article, I'll be sure to cover them also.

All in all, I checked out 14 coworking spaces and cafes for remote work and without further ado, let's jump straight into what I found!

Note: In order to take into account the prices of each, I bought the same item (an Iced Latte) at all 14 and have included the cost as the 'Iced Coffee Index'

Machinery

Location: Jalan Pantai Batu Bolong| Iced Coffee Index: 38k IDR ( $2.70 USD)

One thing that I had heard before coming to Bali was that while Wifi was ubiquitous in Canggu, many of the cafes were set outside and did not have air conditioning. So, for the first space I checked out, I gravitated towards Machinery, a indoor cafe with laptop workers always visible inside as I drove past.

It's a little small but with good availability of power points and fast internet.

Hours: 7:30am to 8pm everyday

Noise Level: Not the quietest, music playing.

Ergonomics: Not the best. Chairs are either couches against the wall or wooden chairs with a single cushion on them. Tables with gaps, not the best.

Kembali Bembuk

Location: Jalan Bumbak Dauh| Iced Coffee Index: 34.5k IDR ($2.45 USD)

Kembali was a recommendation by our good friend Loukman Nacik, who - if you haven't already seen on my YouTube channel - is a man of style and taste.

Pictured above is the outdoor seating area with a little bit of a view of the inside cafe. Not shown in the picture however are the circular tables surrounded by gardens and an umbrella for shade. Beautiful but not the best for work (in my humble opinion).

I give this space my tick of approval for ambiance but as a work space, I'm just a little bit more particular when it comes to ergonomics.

Hours: 7am to 10pm everyday

Noise Level: There is music but it's not too obnoxious.

Ergonomics: Poor. Metal chairs, couches and benches.

District Canggu

Location: Jalan Pantai Berawa| Iced Coffee Index: 45k IDR ($3.2 USD) | Click here for coworking prices

District is an interesting space in the sense that it's both a cafe and a coworking space.

Pictured above is the downstairs area where there is a slight breeze from the rice paddies but of course, no air conditioning. The upstairs area looks very similar but is reserved for coworking members.

Upstairs, they advertise high-speed (45 mbps) fibreoptic broadband (with 30 mbps backup) at the 'competitive price' of 44k IDR per hour ($3.17 USD) all the way up to 1.65m IDR ($118.8 USD) for the month.

Hours: 8am to 10pm daily

Noise Level: Low

Ergonomics: Metal chairs but at least they have seat backs!

Nude

Location: Jalan Pantai Berawa | Iced Coffee Index: 28.5k IDR ($2.03 USD)

Nude is another recommendation from our friend Loukman but by the looks of things, is quite popular with a few other nomads around Canggu.

Predominantly a lunch and breakfast spot, the air conditioned room appears to get crowded after lunch. With power points only against the walls, we lasted as long as the charge on our computers.

Hours: 7am to 10pm daily

Noise Level: Music is a little loud in the aircon room

Ergonomics: Not the worst but far from an office setup

Bahn Mi and Beans

Location: Jalan Raya Semat | Iced Coffee Index: 25k IDR ($1.78 USD)

With one of the fastest upload speeds that I tested in Canggu, Bahn Mi and Beans came out as a bit of dark horse.

There's not a lot of hype around Bahn Mi and Beans as it isn't the trendiest cafe in Canggu but perhaps it's a good thing, as after lunch I've found the place to be quite deserted and easy to stay focused.

Hours: 8am to 9pm daily

Noise Level: Some music but not annoying

Ergonomics: Good but only on the main table (to the left as you come in)

Matra Coliving Space

Location: Jalan Tegel Sari | Iced Coffee Index: 27k IDR ($1.92 USD) | Coworking without purchase (Higher Speed): 100k IDR per day ($7.11 USD)

Located a 5 minute walk from my villa is this coliving space called Matra and the funny thing is, you don't need to even be staying there to use the coworking space.

That's right! Matra charges for just for internet and not the use of the space. A purchase at the cafe is enough to use their free tier of internet.

Surely this deal can't last forever and I'm probably shooting myself in the foot by giving the secret away but hell! Even if they charged a fair monthly rate, I'd be down. I just don't know if it's worth the 100k IDR ($7.11 USD) per day for the slightly faster internet (see speed test result below).

Hours: 24/7

Noise Level: Low

Ergonomics: Great

Crate

Location: Jalan Canggu Padang Linjong| Iced Coffee Index: 35k IDR ($2.47 USD)

I'll be honest. I took my speed test, recorded the iced coffee price and took my photos before I even made it to the front of the line. After which, I left straight away.

Apart from having the opportunity to get those Instagram bangers under the umbrellas where you can look out over the lawn, I can't see how Crate can be a productive space.

Now of course, I came at a busy time but even still, I'm not seeing seat backs or power points anywhere. Yeah, I think I'll pass.

Hours: 6am to 5pm daily

Noise Level: High when busy

Ergonomics: Bad. No seatbacks

Cafe Vida

Location: Jalan Pantai Batu Bolong | Iced Coffee Index: 38.2K IDR ($2.69 USD)

I don't know if you've ever been to Ubud but I feel transported there whenever I visit Cafe Vida. The cafe has an earthy garden feel with traditional balinese architecture in the back.

I decided to check it out after one of our earlier roommates at the villa mentioned it but it's definitely not my vibe and if it was, I'd probably rather just go to Ubud lol!

Hours: 7am to 10:30pm daily

Noise Level: Music and loud when crowded

Ergonomics: Standard for a cafe

Sprout Cafe

Location: Jalan Raya Semat No.18| Iced Coffee Index: 37k IDR ($2.66 USD)

Across from Bahn Mi and Beans and tucked away behind a garden wall is Sprout which, if you manage to get a table against the wall, is quite a comfortable and quiet space to work.

Hours: 7am to 6pm daily

Noise Level: Not bad from memory

Ergonomics: Good if you can get a seat against the wall, otherwise no.

Dojo

Location: Jalan Batu Mejan No. 88 (Echo Beach)| Iced Coffee Index: 35k IDR ($2.52 USD) | Click here for coworking prices

No list of workspaces in Canggu would be complete without including Dojo. It's become an institution of the remote work scene in Canggu and it's almost safe to assume that any other nomad you meet in Canggu has heard about it or worked out of there at some point.

Dojo is the coworking space that introduced me to Canggu back in 2016 and is the space I choose to set up at during May and June this year while staying in Canggu.

It has an amazing community and great internet but it's not at all corporate - not that I'm complaining about that!

Hours: 24/7 for members

Noise Level: Low

Ergonomics: Great in some rooms but Dojo is not a corporate vibe at all, so don't expect office chairs

Cinta Cafe

Location: Jalan Pantai Berawa| Iced Coffee Index: 35k IDR ($2.52 USD) (Menu Price)

Located next to District and with a similar layout, I was expecting almost a carbon copy of District. However, at Cinta I found the internet to be a step up from District's free tier and with more space, it became my preferred location to District.

Cinta is the new favourite of my friend Loukman (who I've mentioned throughout this article) and is well-recommended, especially for breakfast.

Hours: 8am to 5pm

Noise Level: Low

Ergonomics: Not bad for a cafe

Tropical Nomad Canggu

Location: Right next to Pretty Poison on Canggu's famous shortcut| Cafe currently being built so no Iced-coffee index yet ;)

Tropical Nomad is the newest coworking spot in Canggu and I fell in love with it at first sight.

The location is just beautiful! and super convenient (on the famous Canggu shortcut). Very tropical, very Instagrammable, very Canggu ;)

In terms of functionality, I can only fault this place on ergonomics as the chairs might be super sexy but not so great for long periods on the computer.

Hours: Open 24hrs for members

Noise Level: Low

Ergonomics: Not great. The space looks super sexy but the chairs aren't the most ergonomic.

Outpost Canggu

Location: Jalan Raya Semat| Don't know if they do Iced Coffee but a hot one was 25k IDR ($1.72 USD)

If you're looking for the most productive workspace in Canggu, then look no further! Outpost's new Canggu location is your best spot to dig into some proper work.

I spent two weeks at Outpost Canggu, taking part in one of their programs called 'Life Design Lab' back in October and I'm in agreeance with multiple others that believe this space is the most productive in Canggu.

Hours: Open 24hrs for members

Noise Level: Low

Ergonomics: Best in Canggu! Yay for office chairs!

Third Space - CLOSED

Location: Jalan Bumbak Dauh No.90| Iced Coffee Index: 35k IDR ($2.53 USD) from the cafe downstairs | Check their Facebook page for prices

Third Space was a coworking space that I discovered while driving to Kembali Bumbek. Their slogan was 'Work away from Work' and they called themselves a boutique coworking space.

I felt it's appropriate that the space sat above a furniture and coffee shop in the Umalas area as the interior was really what set this space apart.

What I really liked about Third Space was the attention to detail which was most noticeable when you saw the power points embedded elegantly into each desk featuring international power and USB ports.

Hours: Mon - Fri: 7am to midnight, Weekends: 9am to 6pm  Permanently closed :(

Noise Level: Low

Ergonomics: Trendy chairs with cushions. Still not office ergonomics but better than a cafe

Special Mentions

Nalu Bowls: Want to do some work over lunch? Situated right next to Dojo, Nalu Bowls allows you to essentially 'borrow' Dojo's wifi for a few hours with a purchase of one of their smoothie bowls.

Finns Recreation Club Business Centre: Probably the closest to a corporate coworking space you'll find in Canggu and super pricey at 500k IDR per day ($36 USD)

Betelnut Café: Never been but recommended by Catie Leta

Milk & Madu: Awesome breakfast and great view. Didn't test the wifi but you could totally work out of there.

Milu by Nook: Again, I didn't work out of this one but it was beautiful and my first cafe experience in Canggu. A saw a couple of people there on their computers too

Metta Cafe & Cocomo: Recommendations from my friend, Riley Bennett. They made it on my shortlist to check out but I didn't get around to it in the end.

Summary

To be honest, I grew tired of checking out new spaces in Canggu as the list of cafes you can work from here is near infinite.

Especially now that I have my go-to space at Dojo, I'm not too tempted to experience coworking in cafes without air conditioning or high speed internet (ie. more than 10mbps up and down).

That being said, if you're considering Canggu and concerned about finding a place to get your work done, do not fear! You have a ton of options.

Been to Canggu before? What are your favourite spots to work or study? Let me know in the comments.

Until next time,

Chris

It's now been just over a month that I've been back in Bali and I think it's probably about time I updated this blog post on the top coworking spaces in Bali (originally published in March 2016).

PS: I just updated it again (December 2018). Bali is developing so quick!

Back in 2016, I was a bright-eyed and bushy-tailed digital nomad on the very first stop of my 'digital nomad journey' and this post was one of my very first.

Not only has my blogging hopefully gotten better since 2016 but two years on, I've discovered that some of the spaces that I originally covered in this post have now closed down and new ones have opened.

So, in this updated article on Bali's top coworking spaces, I'm about to provide a well-needed revamp on one of my classics. Here goes!

The Coworking Scene in Bali

Overall, you may find the range of quality coworking spaces in Bali quite surprising. I mean, Bali is a just holiday island right?

Well, in 2018, regardless of whether you stay in Seminyak, Ubud or Canggu, there are quality coworking spaces to be found.

When I arrived back in 2016, I was super excited to check out spots like Hubud (the original coworking space in Bali) and gave myself a week to find and review the various others on the island. During that time, I covered 6 coworking spaces in my 3rd ever 'Digital Nomad Vlog' (embedded below).

Coming back in 2018, I was able to finally visit a few spaces that I either missed last time or that had just recently opened. These include spaces like Biliq, Third Space and Outpost, all of which I will include in this article.

Edit: Third Space closed shortly after updating this article but Tropical Nomad and Outpost Canggu are great and now open in Canggu!

So, without further ado, let's get into the list!

1. Hubud

in Ubud | $20 USD per day | $60-275 USD per month

Hubud is Bali's first coworking space and it often considered the benchmark digital nomad coworking space on the island. Therefore, it probably deserves to be mentioned first.

Back in 2016, I spent 2 weeks at Hubud and had nothing but positive things to say.

The space offers timed memberships from 25 hours to unlimited ranging from 60-275 US Dollars per month. At this price-tag, Hubud is probably one of the most expensive coworking spaces in Indonesia but if you can afford it, I'd say it's definitely worth it.

The space has one of the best communities you will find in a coworking space and with events being run almost daily, there's always something going on. I met a lot of cool people from my brief time at Hubud, some of which are now my good friends.

If you're interested in Hubud, check out my interview with one of the founders, Steve Munroe and watch my first week working out of Hubud.

2. Lineup Hub

in Seminyak | Day pass: $10 USD | ~$160 USD per month

Back in 2016, after two weeks in Ubud, I positioned myself in Seminyak near Lineup Hub for the next two weeks. I had little knowledge about the other spaces on this list (apart from Hubud) and thought that this space was 'the space' on the West Coast.

In reality, Lineup Hub turned out to be more of an internet cafe than a coworking space. The whole bottom floor is basically rows of computers while the second floor offers a small space to bring your own computer and sit on bean bags.

Lineup Hub was in major contrast to my experience at Hubud where the place was lively with activity and events. Instead, Lineup Hub was very quiet and not at all social.

Looking back on this evaluation after 2 years, it seems a little harsh but after starting with Hubud, my expectation was set quite high. I'm sure Lineup is probably good value for those that want to work in Seminyak but since that visit in 2016, I haven't been back.

3. Kumpul

in Kuta and Denpasar (used to be in Sanur) | 200k rupiah per day | 900k-2.5m rupiah per month (prices for the Sanur location, check the website for new details)

I'm not quite sure what happened to Kumpul but it's safe to say that their location in Sanur is no longer operational. If you search for Kumpul now in Google, you'll see they still have a Facebook page and a website but the location that shows up on Google's sidebar is Kumpul di Kembali.

Checking their website, they seem to have two locations now, one on Sunset Road in Kuta called Kembali and another in South Denpasar called Colony. So it seems that Kumpul is now a parent brand that manages a few different spaces. A little confusing - to me, at least.

As for the original space I checked out, it was in this cool building in Sanur with a cafe to the bottom from which you could bring up food and drink while working. The clientele was a little more local as Sanur is not as big of a tourism location as say the west coast but I remember the founders being very welcoming and nice.

4. Dojo

in Canggu | ~$16 USD per day | ~$58 - 213 USD per month (depending on hours)

Back in 2016, I visited the up and coming area of Canggu to check out this space called Dojo and I was blown away. This time in Bali, Dojo has become my go-to coworking space.

At the time of first writing this article, Dojo had been open less than 6 months and back then, they were growing fast. Nowadays, Dojo is often crowded and has become an institution in Canggu.

Dojo offers a thriving community and unique resort-style working space, 300m from the sand at Canggu's Echo Beach. It embodies the surfer/hipster culture of Canggu and is popular with a younger crowd of digital nomads.

For me, Dojo has the best community out of any coworking space on the west coast however, if you're the kind of person that likes a quiet space with little distractions, Dojo is probably not your ideal.

If you're interested in Dojo, check out my interview with the founder Michael Craig

5. Outpost Ubud

in Ubud | $16.50 USD per day | $49-229 USD per month (depending on hours)

During my first time in Ubud, I didn't end up visiting Outpost so this year, when I returned to Bali, I made sure to give it a visit, not just to update this post but to cover it in my video on Bali's coliving spaces.

Even in 2016, I knew I needed to include Outpost in this article so I let the space's founder, David Abraham make a statement.

Imagine what Google would offer if they opened up an office in Bali. That’s Outpost. You want to go swimming? We have two pools and a river. Thirsty? We deliver coconuts to your desk. Neck hurt from staring at your screen? We have a masseur on staff.

People come to Bali and have amazing experiences. Our mission is to ensure they're productive too. At the most basic, that means comfy chairs, big desks and a community of successful people. (And of course, stable and redundant internet connections.) Our focus on productivity makes good business sense. Members stay longer because they accomplishing more. And although we’ve only been opened (soft) for five months, we noticed members are coming back to the largest co-working facility on the island.

David Abraham, Founder of Outpost (written back in 2016)

Now that I have some experience at Outpost (albeit very brief), I can now confirm that Outpost is a very well-done coworking space. They've designed it to be both productive and social and with the coliving space down the road, you can live, work and hang out all within Outpost's grounds.

Note: Outpost has a second location now in Canggu. See below!

6. Outpost Canggu

in Canggu | $15 USD per day | $49-180 USD per month (depending on hours)

The Canggu edition of Outpost opened up earlier this year (2018) and seemed to have plenty of members by the time I showed up in October.

I spent two weeks at Outpost Canggu, taking part in one of their programs called Life Design Lab and I'm in agreeance with multiple others that believe this space is the most productive in Canggu.

As much as I appreciate the community and events calendar at Outpost Canggu, my favourite aspect of the space is its ergonomics and productive vibe.

7. Biliq CoSharing Space

in Seminyak | $2.16 USD per hour up to $170 USD per month

Biliq Cosharing Space in Seminyak is the first coworking space in Bali to offer per-minute pricing but what's perhaps more impressive, is the space itself.

I was invited by the space's founders Hansen and Jess to come and see for myself what Biliq was all about and I'm glad I made the 25 minute drive out from Canggu.

In contrast to the other coworking spaces that I'd experienced in Seminyak, Biliq stood well above the rest. Whether you sit in the shaded area or inside, there is plenty of natural light and four Skype rooms that are currently available for free (as a part of your membership).

Overall, Biliq is a really awesome coworking space that gives me more reason to consider Seminyak on my next visit to Bali.

8. Tropical Nomad Canggu

in Canggu | From $31 USD to $160 USD per month (depending on hours)

Tropical Nomad is the newest coworking space in Canggu and I fell in love with it at first sight.

The location is just beautiful! and super convenient (on the famous Canggu shortcut). Very tropical, very Instagrammable, very Canggu ;)

In terms of functionality, I can only fault this place on ergonomics as the chairs might be super sexy but not so great for long periods on the computer.

CLOSED: Third Space

in Umalas (near Canggu) | ~$15 USD per day | ~$160 - $200 USD per month

Third Space was a boutique coworking space in the Umalas area of Canggu that I was really disappointed to see close down shortly after opening.

I feel it’s appropriate that the space sits above a furniture and coffee shop in the Umalas area as the interior is really what sets this space apart.

What I really liked about Third Space was the attention to detail which was most noticeable when you saw the power points embedded elegantly into each desk featuring international power and USB ports.

During my last update of this article, I got to meet the founder and have a chat about why she started it to begin with. Turns out, she'd tried working out of some of the other spots in Canggu (Cafes and Coworking Spaces) but felt there was a gap for a quiet and productive space that supports remote work more than a cafe but while still capturing the vibe of the area.

Loved the idea. Shame to see it go.

CLOSED: Sanur Space

Sanur Space was basically a quiet home in a quiet area. As you'll see from the video above, we saw only one person working there when we visited on that late Thursday afternoon.

After visiting Biliq recently however, they alerted me to the fact that Sanur Space is now permanently closed so this section will serve merely as a special mention.

Summary

It seems that each time I come back to Bali I'm met with new surprises. In 2016, I knew about Hubud from its reputation but being there was just something else and Dojo was also such a great find. In 2018, I discovered Biliq and Third Space.

I see Bali as a huge hub for 'Destination Working' and I think it's almost safe to say that it's now my favourite place to live and work remotely. It's a location that might be seen as just a holiday destination by some but for me, it's got everything you need to settle in for the long-term as a remote worker.

Originally, I ended this article with a statement, 'One thing is for sure, I will be coming back.' and so I guess it just was a matter of time before I was back in Bali. This time is no exception and I'm sure you'll see me back again very soon.

Until next time,
Chris

A common question I get asked is some sort of variant on 'How do you stay disciplined and productive while travelling and working from various locations?'.

I think for the majority of the working world, their tasks are laid out for them. They have a job description or a manager to tell them what to do and I think the majority of those people actually prefer it that way.

As one expat in Chiang Mai said to me during our Nomad Coffee Club screening of the digital nomad documentary, 'One Way Ticket',

Most people won't become digital nomads because they prefer being told what to do.

For me however, I haven't historically worked too well in a full-time environment. My days of full-time employment capped off at a mere 5 weeks!

As much as it would be nice to not have to think about what, how and when to carry out my work, I think I definitely work better as my own project manager.

It's worth noting before we go further however, that not all nomads are freelancers or entrepreneurs. You can still work a full-time job as a digital nomad, in which case you just need to manage timezones and show up to work when you need to be.

For the rest of us, we often operate as our own boss or as my friend Denise puts it, 'we work for ourselves'.

As a digital nomad freelancer or entrepreneur, we are the business which means that sales, project management and delivery is up to us. This is why we need to have a system in place to manage our tasks, strategically set our own schedule and develop productive habits and practices.

By no means am I the leading authority on freelance productivity but with three different businesses to manage, I naturally had to form some systems around what I do, or else become terribly overwhelmed and achieve nothing.

The following article is my best attempt at sharing with you an insight into the practices I use so that you can build a more productive workflow yourself.

Let's start right from the moment you wake up.

Morning Routines

According to Hal Elrod, Author of the Miracle Morning:

How you wake up each day and your morning routine (or lack thereof) dramatically affects your levels of success in every single area of your life.

While I'm not as religious about mornings as other authors, I definitely think that getting up early and jumping straight into a routine is something that can benefit anyone and I do find it very important for me personally.

Currently, my morning routine includes a batch of small activities that I'd simply forget to do if they weren't factored into my morning routine. Things like:

1. Making my bed
2. Washing my face
3. Stretching (I have flexibility issues), and
4. Meditation

These are habits that I try to maintain daily but if I don't do them first thing in the morning, they won't get done. That's why a morning routine is so important.

Insights into why having a morning routine can be found in my friend Tomas Laurinavicius' article on the habits of successful people. One of the points he makes in that article is that you’re more likely to develop a new habit on top of an old one because your brain has lots of synaptic connections for that habit to run it on autopilot. This is something he calls 'Habit Stacking'.

As for the question of why mornings? That's easy. You simply have less distractions and obligations if you make sure to wake up before any scheduled commitments.

Just make sure to resist technology as long as possible after you wake up as that can derail your mornings real quick!

Common activities that I hear people consciously incorporating into their morning routines are things like:

• Reading & Writing (inc journalling)
• Creating a plan for the day ahead
• Exercise
• Visualisation and affirmation
• Eating or drinking

For yourself, what I'd recommend is putting whatever you want to get done into your mornings that wouldn't otherwise get done later in the day.

For example, I love to workout after getting through most of my work day and I enjoy reading just before bed but as for stretching and meditation, I don't trust myself to remember to do that later in the day, so I make sure to get in done in the morning.

Morning Sequence

After my morning routine, I take out my computer and jump into what I call my 'Morning Sequence'.

Not to be confused with my morning routine, my Morning Sequence includes the first things I do on the computer each day that I open it.

These are currently:

• Checking email
• Checking social media messages (inc messages I receive through my Facebook page & Instagram account and comments I receive on my YouTube channel)
• Checking my notifications on Facebook and Twitter - seriously! We'll get into how I do this in just a sec
• Checking job boards for opportunities

You might notice that each of these start with 'checking' and it's this style of task that I like to get out at the beginning of every day.

The most important principle of the Morning Sequence is the idea of batching which I'm pretty sure I learned from Tim Ferriss in his must-read book for digital nomads, The 4 Hour Workweek. In the book, he suggests limiting the time you spend in your inbox to a maximum two periods per day. For my purposes, I've extended the idea of batching to include all notifications, messages and work-related postings.

I remember when my YouTube channel first started taking off and I had YouTube app on phone send me notifications as soon as I got a new comment. I would get these messages multiple times a day and I'd be compulsive about checking them. After seeing me getting down at some of the more critical comments, my friend Felipe suggested that I turn off the notifications and check them only once per day. My anxiety levels improved straight away.

As you can see, the idea of batching doesn't just work for emails but all kinds of messages and notifications. Unless something is urgent, I make sure to turn off notifications and limit my time to checking them all at the one time.

Mini-Tangent: How I do Facebook

Ask me about Facebook and you'll hear my rant on how the news feed is like the internet version of crack cocaine.

The idea of any of these apps is to get you hooked and keep you on their app for as long as possible and Facebook is the worst as it is unlimited in how it's able to bring all kinds of content into your feed.

My strong recommendation and something that I practice myself is to eliminate the news feed altogether. I do this using the Chrome extension, News Feed Eradicator and removing the mobile app from my phone.

Then, with the news feed gone, I go into specific Facebook groups that I want to receive updates from and turn on notifications. Simple as that!

This is how my one-per-day practice of 'checking Facebook' remains productive as I can't get distracted by the news feed, I just run through my notifications, check the important ones and when that number reaches zero (usually in less than 5 minutes), I'm off Facebook altogether.

Getting Stuff Done

After the Morning Routine and my Morning Sequence (which - by the way -  includes responding to clients and preparing proposals), I begin the 'actual work' for the day.

When I started out as a "Digital Nomad", this meant only two things, finding work and doing work. My 'digital nomad workflow' was a lot simpler back then as I usually only had one or two clients at a time. Plus, this blog and the YouTube channel wasn't as much of a thing back then and so, I just did it when I had free time.

During 2017 (and maybe even before), I started using an amazing free tool called Trello to list out my content ideas and move them from filming, to editing and then completion. This board became especially important when I decided to work on Chris the Freelancer full-time during Q4 of that year.

After 2017 had ended and I finished writing 'The Digital Nomad's Guide to the World', I returned to client work and found myself overwhelmed by work from various directions.

It was time to extend my use of Trello to now be the dashboard for all my projects. Here's a little look at what my new board, 'Current Clients & Projects' looks like:

Just a little Trello terminology:

• 'Current Projects / Clients' is the Board you're currently looking at,
• 'Personal Projects', 'ToDo Right Now', etc are what's called a List, and
• Each individual list item (blurred in the image) is called a Card.

Let's start from the most important list and work our list now.

ToDo Right Now

These are project or tasks that are ready to go right now. Most of the time this is related to client work but if it's a particularly important task/project for my own personal projects, I include it here too.

Personal Projects

These are projects or tasks that are also ready to go but are related to my own personal projects (including Chris the Freelancer). Currently, I only consider my freelance businesses to be my businesses and so, creating content for Chris the Freelancer and my other self-titled brand hold a lower priority.

To Check / Follow-Up On

This board is for tasks and projects that require more communication with a third party (usually a client) before the 'actual work' can be completed. If the 'ToDo Right Now' list is running low or the project to follow-up on is particularly important then, I'll start to dig into this list and follow-up with people

Pending (Coming Soon)

These are projects that are coming soon but do not require any current action. It's more for awareness of what's to come in the pipeline.

Other Boards

To be honest, there are 5 more lists but they are minor in importance

Errands: Basically for anything admin-like that's not creating content or delivering on a client job.

Leads: A place to list possible businesses leads to follow-up with

Invoices: A place to keep track of invoices sent or in progress but not paid.

Future Projects: Ideas for later. Maybe some of these cards will make their way into the first four lists

Shelved: Cards that have been shelved and probably should just be deleted.

The great thing about Trello is that cards can easily move between lists. So if a personal project becomes priority, I can move it into 'ToDo right now' or if a client gets back to me and is ready to go, I can move their card from 'Coming Soon' to 'ToDo right now' as well.

I can also assign due dates to cards, add a checklist and use coloured labels to further communicate priority.

Finally, when a task or project is complete, I simply click Archive and it disappears from the board.

Setting My Own Schedule

As I mentioned in the introduction, part of being a digital nomad freelancer or entrepreneur is setting your own schedule and for me, I like to keep to a standard nine-to-five, Monday to Friday type schedule.

Funny, right? Many people take up this lifestyle to get as far away from the nine-to-five but for me it works. It's aligned with my clients who usually work office hours and just in general, it's easier when you schedule fits in with other people.

To be fair though, now that I've started to work almost exclusively with Australian clients and given that I've only travelled between Australia and Asia this year, I've been able to stay close to the same timezone as my clients.

This hasn't always been the case, especially when I was travelling Europe and North America last year. During that time, I tried to keep my nine-to-five type schedule but it did affect business as I like to switch off during the evenings (which could be mornings or afternoons in Australia).

You can of course work on whatever schedule you like depending on the level of real-time client/customer communication that your business requires.

Discipline and Motivation

As for the question of keeping disciplined and motivated, I've never really had an issue.

When you work for yourself, you go broke if you don't keep on top of your business. Isn't that motivation enough?

I think what people might be getting at with that question though is how to stay focused on work when you arrive in new and exciting destinations.

I guess it depends on your motivation for travel to begin with. If you just want to travel to see world then maybe you should just save up and travel. Honestly, I think that saving for long-term travel is a good approach for most people.

For me personally, it wasn't until I became excited about the work side of things that I got excited about long-term travel. Even when I was on vacation in 2013 pre-nomad, I was still researching and experimenting with some creative ideas.

So, my motivation doesn't just come from travel but also creation. It wasn't until I revisited Chiang Mai this year that I realised how much my motivation for creating videos was the driving force behind all the travels.

It might sound a little harsh but my advice would be this: if you're not excited enough by the idea of a digital nomad lifestyle to remain disciplined and work hard at it, then maybe you should re-consider doing it at all.

Conclusion

As I said earlier, I'm definitely no productivity guru but I have figured out some processes that work for me.

Apart from the fact that I should probably invest in a proper freelance management tool like Wave, Bonsai and AND CO, I'm pretty happy with system I have right now and I'm sure it will evolve like it has done up until this point.

If you'd like to learn more about productivity as a digital nomad, I'd definitely recommend following my friend Tomas Laurinavicius. He's a blogger and writer who's all about that topic and does it much better justice then me.

Finally, to end this article I like to hear your thoughts on workflow and productivity as a digital nomad freelancer or entrepreneur. What systems, tools or habits do you use to stay productive? Let me know in the comments below!

Until next time,

Chris

Over the last 2 years, I visited over 21 countries in the search of the best cities, towns and islands to work remotely and connect with other digital nomads.

Throughout this time, I've made it a point to keep my finger on the pulse, spending time in all the biggest hotspots while pushing myself to discover new destinations that cater well to the remote work lifestyle.

These two years of research culminated in a world-wide destination guide for digital nomads and after a year-long journey where I literally travelled around the globe , I've decided to take a break from being the proverbial 'digital nomad guinea pig' and in 2018, I'm sticking to the destinations that I already know and love.

Despite my dedication to discovering the world for digital nomads, there are still quite a few destinations that I didn't get to make it out to in 2016/17 so in this post, I'm going to share my thoughts on an expansive list of destinations that have made it onto my watch list in the last two years.

First up, let's cover what a 'digital nomad destination' really is.

What makes a great digital nomad destination?

While the list of destinations from which you could work remotely is near infinite, many remote workers, freelancers and online entrepreneurs (ie. digital nomads) tend to congregate around locations with certain characteristics that make them ideal for working remotely and living an expat lifestyle.

Some of the characteristics that digital nomads most favour are:

• Affordable short-term cost of living
• Availability of high-speed and reliable internet, and
• An exisiting community of other digital nomads

Other factors that make for a great destination for remote work could be:

• Warm and consistent weather
• Laidback culture
• Convenience
• Dating opportunities
• Safety
• and so much more

How does one determine the best cities to live and work remotely?

One source is the website NomadList.com, which attempts to share data on many of these factors for thousands of cities around the world.

For me however, I like to use in-depth blog articles and word-of-month from other digital nomads, combined with my own research to determine the cities with the most potential.

The following list is the result of countless hours spent researching and experiencing many of these destinations for myself.

Here we go!

The Bonafide Digital Nomad Hotspots

There are just a handful of locations that are known in the remote work community to be 'digital nomad hotspots'.

Ask anyone and you'll usually hear these 5 destinations come up most often.

#1: Chiang Mai, Thailand

Chiang Mai is considered the digital nomad mecca and I can totally understand why.

All up, I've spent 9 months so far living in Chiang Mai and am heading back next month for another 2-3 months.

Chiang Mai ticks a lot of boxes for digital nomads. It's inexpensive and easy to navigate, has plenty of coworking spaces / cafes to work from and a thriving expat community.

At this stage, I've already spoken at length about Chiang Mai, so I'll just direct you to my in-depth articles on everything from cost of living to finding an apartment:

• My First Month in Chiang Mai [Report]
• The Ultimate Chiang Mai Cost of Living Guide
• Where to Work Out in Chiang Mai – The Top 10 Gyms
• Where to Work in Chiang Mai: Cafes & Coworking Spaces (Office of the Day Series)
• Finding an Apartment in Chiang Mai

#2: Bali, Indonesia

Bali is a close second to Chiang Mai as the digital nomad capital of the world.

While Chiang Mai tends to attract bootstrapping entrepreneurs, Bali attracts a different kind of nomad in the sense that it's more of a holiday island.

Although the island has been popular with tourists for decades, the coworking scene only just got started in 2013 when the island's first coworking space, Hubud opened its doors.

Since then, there have been new coworking spaces opening up across the island and this has been an important step for an island like Bali which caries a reputation for having a poor internet infrastructure.

Nowadays, Bali is a prime location for 'destination working' which is essentially the idea that your holiday destination can double as a remote work location as well.

More on Bali:

• Bali Wrap-Up: One month as a Digital Nomad on the ‘Island of the Gods’
• 6 Coworking spaces in Bali for Digital Nomads

#3: Bangkok, Thailand

Objectively speaking, I think its safe to say that Thailand is the best country for living and working remotely as a foreigner and as the capital of Thailand, Bangkok is naturally a prime destination for a lot of digital nomads.

The city now has more coworking spaces than I can easily count and is an exciting destination for a lot of budget travellers.

The big downside to Bangkok is how crowded the city is and with over 8 million residents, the digital nomad scene appears quite spread out across the city.

More on Bangkok:

• 6 Coworking Spaces in Bangkok for Digital Nomads

#4: Ho Chi Minh City, Vietnam

Much like Bangkok, Ho Chi Minh City (aka Saigon) is a huge city with over 8 million people.

While I honestly can't explain why, Saigon is very popular with location independent entrepreneurs and is often compared side-by-side with Chiang Mai as the best place to bootstrap your online business.

More on Ho Chi Minh City:

• Ho Chi Minh City Wrap-Up: One Month as a Digital Nomad in Busy & Bustling Saigon

#5: Medellin, Colombia

Finally, Medellin is the newest bonafide digital nomad hotspot.

It mixes many of the characteristics of the first four destinations like low cost of living, exciting nightlife / culture and good internet but in a completely different continent.

The city has come a long way from the dark days of Pablo Escobar and is now a well developed city bolstered by Colombia's fast-growing tourism market.

More on Medellin:

• Medellin Wrap-Up: 10 days in the City of Eternal Spring

Now that we're covered the 5 bonafide hotspots, let's now cover the other 25 destinations, continent by continent.

Top Asian Destinations

As far as continents go, Asia appears to have the right mix of culture, cost and weather to attract digital nomads.

Here are some of the more talked about destinations in Asia:

#6: Koh Lanta, Thailand

As we've previously discussed, Thailand is an ideal country for living abroad and working remotely. Head to any corner of Thailand and you'll probably find at least one other expat working remotely.

Koh Lanta specifically has become a hotspot due to the popularity of a coworking space called KoHub which provides the perfect environment to get work done and connect with other digital nomads while enjoying a chill island lifestyle.

More on Koh Lanta:

• Koh Lanta Wrap-Up: 3 Weeks Coworking on a Tropical Island [Report]

#7: Koh Phangan, Thailand

Famous for the original full-moon party, Koh Phangan is perhaps better known as a backpacker's paradise but with a few coworking spaces on the island, it caters well for digital nomads as well.

More on Koh Phangan:

• Koh Phangan Wrap-Up: 2 Weeks as a Digital Nomad on the Island of Parties and Free Love [Report]
• Where to Work in Koh Phangan: Cafes & Coworking

#8: Phuket, Thailand

Still in Thailand, we're heading back across the other side of the country to take a look at Phuket, an island completely overrun with tourism yet with a quite few expats and digital nomads.

Ideally, tourism hotbeds like Patong Beach should be avoided at all costs but if you're into Muay Thai you'll find a community of nomads and expats training in and around the area of Chalong Bay, a popular location for kickboxing gyms in Thailand.

More on Phuket:

• Phuket Wrap-Up: 6 Days as a Digital Nomad on the Popular Thai Island [Report]

#9: Pai, Thailand

Worth mentioning on this list as a destination that comes up often on the website, Nomad List is the small village of Pai in Northern Thailand.

Don't get me wrong, I absolutely LOVE Pai but I wouldn't consider it a good 'digital nomad destination' as Pai is moreso the perfect place for a weekend getaway.

#10: Kuala Lumpur, Malaysia

KL (as it's known for short) is a super popular stopover city that a lot of nomads travel through for either a border run or on the way to their next destination.

It's an interesting place for a short visit but nomads generally don't stick around here for a long-time.

More on Kuala Lumpur:

• Kuala Lumpur Wrap-Up: 10 Days in the Popular Asian Stopover City

#11: Kuching, Malaysia

Kuching is the first destination on this list that I have not yet personally been to yet but has been touted by others as the next Chiang Mai.

Here's what James Hunt says about Kuching in his extensive article on LocationIndependent.co.uk:

It’s certainly got some parallels; an easy chilled out authentic vibe with an undercurrent of hipster if you know where to look, mixed with the modern luxuries and all at great value.

#12: Hanoi, Vietnam

Hanoi is a destination I had planned to visit in April of 2017 but had to cancel due to a last minute trip to Morocco.

It's another crazy Vietnamese city but from what it seems, a more culturally creative destination than its counterpart in the south.

Like Ho Chi Minh City, Hanoi is a good digital nomad destination due to its low cost of living, exotic culture, warm weather and expat community.

#13: Danang, Vietnam

Danang sits in between Hanoi and Ho Chi Minh in central Vietnam and is the less busy alternative to these popular Vietnamese hotspots.

A search for 'danang for digital nomads' brings up a few different articles indicating to me that there is potential there but there hasn't been enough hype to lure me over there just yet.

#14: Taipei, Taiwan

Taipei is a city that ranks well on Nomad List as a low-cost and more open alternative to China.

However, as Johnny FD (the only other blogger I know to have covered Taipei) writes on his post on the city:

I'll definitely come here again as a tourist and recommend it to anyone, but as of 2015 it's not a digital nomad destination.

I will admit that with direct flights operating from Chiang Mai, I have been tempted to visit Taipei but in terms of a long-term digital nomad lifestyle, I don't yet see a ton of potential.

#15: Siem Reap, Cambodia

Finally in Asia, Siem Reap is a destination in which I visited in 2016 but as 'digital nomad destination', I wasn't impressed.

While I would definitely consider a visit to check out the amazing temples and party on pub street, I personally wouldn't want to stay longer than a week in the city.

I do mention it however as it is a low-cost destination with coworking spaces available to get productive and meet other nomads, so if Siem Reap appears to be an interesting place for you, definitely give it a go.

More on Siem Reap:

• Siem Reap Wrap-Up: 1 Week in Cambodia as a Digital Nomad

European Destinations

Moving on from Asia, Europe is a continent of incredible diversity and connectedness.

With so many cities in close proximity and linked via cheap flights, it a place that's perfect to spend hopping from place to place on that quintessential euro-tour.

#16: Budapest, Hungary

Each year when Europe hits summer, Budapest appears to shoot to the top of Nomad List.

It's a beautiful city that retains a low cost of living, especially when compared to its counterparts in Western Europe. It's well regarded in the digital nomad community and it's a city with everything you need to live a comfortable remote work lifestyle.

My opinion on Budapest after travelling there in June 2017: Yes, it is beautiful but what else? For me, it felt too much like a regular city and I realised how much I missed the exotic culture of South East Asia.

More on Budapest:

• Budapest Wrap-Up: 2 Weeks in the Popular European Capital

#17: Berlin, Germany

Berlin appears at #4 position on Nomad List's 'Best Cities for Digital Nomads'.

To me personally, I've never seen it as a 'digital nomad destination' and after spending a few days there visiting a friend last summer, I didn't experience anything that changed that perception for me.

#18: Belgrade, Serbia

Alright, now we're onto a destination in which I believe deserves more recognition in the nomad community.

While Belgrade might not seem like much, it covers all the basics very well (at least it does for me).

With fast internet, a low cost of living and a size that makes it easy to get around in, it's a city that works well for the remote work lifestyle and especially if you're into nightlife and dating, I've heard that Belgrade is a fun city for singles.

More on Belgrade:

• Belgrade Wrap-Up: One Month as a Digital Nomad in Europe’s Most Under-Rated Capital

#19: Sofia, Bulgaria

To me, Sofia is like the polished Belgrade. Just like the Serbian capital, it covers all the basics really well but has the added benefit of being an EU city, which for EU nomads makes travelling there much easier and overall, it's just that little bit more advanced.

More on Sofia:

• Sofia Wrap-Up: 2 Weeks of Summer in the Bulgarian Capital

#20: Prague, Czech Republic

From what I've heard, Prague is a similar city to Budapest in the sense that it is just as beautiful and has a similar cost of living and coworking scene here.

According to Martin Rosulek, Prague has:

1. Nice weather for 9 months of the year
2. Architecture and sightseeing with story behind it
3. Modern Infrastructure
4. A good level of spoken English
5. Lots of coworking spaces and events, and
6. A good nightlife scene

But I can't verify as I know very few people who have spent a considerable amount of time there.

#21: Lisbon, Portugal

Out of all the destinations I didn't get to visit in 2017, Lisbon was the one I was most disappointed to miss.

It's home to the annual DNX Conference and a booming destination for tourists and digital nomads alike.

According to Italian expat, Marcella de Rosa,

Portugal, Lisbon is now becoming one of the main hubs in Europe for expats and digital nomads. More and more people are moving there and don’t plan to return home.

It's also a city in which a surprising number of travel bloggers (such as Lauren Juliff) have decided to base themselves, indicating that many of the most well-travelled and influential digital nomads rate Lisbon quite highly.

#22: Las Palmas de Gran Canaria, Spain

While technically a part of Spain, the city of Las Palmas in the Canary Islands is situated near the coast of North Africa, meaning that consistent warm weather flows through the island all year round.

I travelled to Las Palmas in September of 2017 and for me, it's one of my personal top 5 digital nomad destinations. It's got plenty of coworking spaces to work from, an incredible diversity of landscapes including colonial cities, beaches and mountains and finally, a thriving expat community due to its position in the EU and favourable economic conditions for remotely operating businesses.

It's also home to the annual Nomad City Conference and during 2017, was the starting point of the bi-annual Nomad Cruise.

More on Las Palmas de Gran Canaria:

• Las Palmas Wrap-Up: One Month as Digital Nomads on the Island of Gran Canaria

#23: Tenerife, Spain

Also in the Canary Islands is Tenerife which appears to have similar conditions and an equal amount of workspaces for digital nomads.

It's also one of the best places to head for a work retreat with spaces like Wolf House catering for teams and Coworking in the Sun that caters more for individuals.

#24: Tarifa, Spain

Moving from the Canary Islands to mainland Spain, Tarifa is a small town in the south of Spain that my friend and Nomad Cruise founder, Johannes Völkner is trying to promote to the digital nomad community.

According to Johannes,

Tarifa is an amazing place in low season (September – June). The prices are low and it’s a fantastic place to try out the digital nomad lifestyle. Getting here is super easy, the infrastructure is great and besides Tarifa there is much more to see if you explore the other parts of Andalusia.

It’s the perfect place to escape the big city life, live on the beach and take advantage of your location independent job. In fact it could one day become the Ubud of Europe ;-).

#25: Tbilisi, Georgia

Perhaps a little obscure, Tbilisi is a city in Europe that my friend and blogger, Adrian Ingram discovered to be a potential digital nomad destination in the coming years.

In his video, 'A Short Day in Tbilisi', Adrian marks Tbilisi as a city that digital nomads might love due to its low cost of living, favourable visas - I'm talking 12 months on arrival for Australians! - and internet everywhere that averages around 24Mbps up and down.

Unfortunately there appears to be no "digital nomad community" there at the moment but that can always change as more nomads come and verify these positive conditions for the rest of the community.

#26: Bansko, Bulgaria

For the final city in my list of European destinations we're heading back to Bulgaria to a small town which Magus Nomad describes as 'The Digital Nomad Ski Resort'.

While setting up as a digital nomad in a ski destination is usually an expensive exercise, Magnus says that Bansko is the exception.

But what about work? Of course, you're going to need good internet and depending on who you are, a community of like-minded coworkers to hang out with. Luckily, Coworking Bansko exists to foster this community and give you a good spot to work.

As an Aussie, I won't be rushing across the world anytime soon to spend my Aussie summer in Wintery Europe but it does sound like a cool alternative to the mainstream digital nomad hotspots which all exist within hot climates.

Latin American Destinations

Although the cost of living in Latin America is generally favourable and of course, the culture is exciting, there doesn't seem to be many 'digital nomad destinations' in Mexico and South America.

There are of course exceptions. Most notably, Medellin is not only the major hotspot of this region but popular on a world scale (as previously mentioned).

As for the others, I suspect I will have to add more destinations as time goes on but for now, beside Medellin, there is only one other location that I feel has earned the title of a 'digital nomad destination'.

#27: Playa del Carmen, Mexico

I've always looked at Mexico as a country with enormous potential for digital nomads. Most of the things that nomads appreciate about Thailand for example, you can find in Mexico and in one particular town, a community has started to form.

Playa del Carmen is a tourist town on the Yucantan peninsula between Cancun and Tulum.

In Playa del Carmen, it's possible to live on a low budget and still enjoy the stunning natural environment.

Local food in Playa is delicious and inexpensive and while the nomad scene is small here, there's a great coworking space called Nest which is fostering an inclusive digital nomad community.

More on Playa del Carmen:

• Playa Del Carmen Wrap-Up: One Month as Digital Nomads in Mexican Paradise

African / Middle-Eastern Destinations

The African / Middle-Eastern Continent is the final to be covered in this list.

While it is early days for this region, there are a few destinations that currently stand out.

#28: Cape Town, South Africa

Everyone is raving about Cape Town and I'm not quite sure why. I know that Cape Town is popular with young hipsters and creatives but for digital nomads, what's the deal?

Nomad Cruise founder Johannes claims that Cape Town is 'the best city to live and work remotely' and cites factors such as:

• Lots of Outdoor activities
• Lots of great places to work
• Entrepreneurial Vibes
• Diversity all within a short distance, and
• Luxury Value

I must admit, I'm pretty excited to one day visit but given its isolated position at the bottom of Africa, I'll take more than a single glowing endorsement to lure me there.

#29: Taghazout, Morocco

Taghazout is a small fishing village on Morocco's Atlantic coast. It's a popular destination for surfers but for digital nomads, a coliving/coworking space called SunDesk has been setup to accomodate a remote work lifestyle too.

It's the kind of place that offers Europeans a short escape from the harsh winters and/or big city lifestyle but given its small size, it's not somewhere I know of anyone staying long-term.

I visited SunDesk for 2 nights in 2017, which I felt was long enough to see all of Taghazout. I did feel I could stay longer though, as the vibe was quite comfortable.

#30: Dahab, Egypt

Despite receiving a low rating on Nomad List, Dahab is home to a coworking space called CowokInn Dahab which - from their marketing videos - looks incredible.

To be fair though, I think I don't know anyone who's actually been to Dahab so I can't confirm whether it's a good hotspot or not but it does look incredible and is 100% on my bucket list.

What is the best city for living and working remotely in 2018?

The answer to that is up to you.

One thing I've learned from years of travelling and working remotely is that a healthy dose of personal preference should go into determining the most ideal destinations for you.

That being said, I've made a point to produce this list of 30 destinations to share with you all the places I've been as well as all the places I see as having potential.

If you want to go further in-depth and get over 100 pages of destination advice on 14 of the best locations on this list, check out my book, 'The Digital Nomad's Guide to the World' otherwise, stay tuned to the blog, as although I plan to spend more time in the destinations I already know and love in 2018, chances are that there will be a few new spots I will check out in my upcoming travels.

Until next time,

Chris

Just over a year and a half ago, I recorded a video on 'How to Be a Digital Nomad' where I laid out my own 4 step process to achieving a lifestyle of remote work and travel.

To this day, this simple framework remains relevant but I still receive email after email from my readers who understand the process but perhaps need more information into how to make their dream of becoming location independent and travelling the world their reality.

I get it. Out of all the topics I discuss on this website, none seem more challenging then to actually make an income online and travel the world.

In this article, I'm going to go deeper into the 4 step process outlined in the video above and share with you my top tips from over 2 years of living and working remotely.

First, let's cover the basics

Digital Nomad-ism 101

Here's a quick crash course for those of you who are new to this idea of the digital nomad lifestyle.

Digital nomads are individuals who leverage technology to be able to work from anywhere in the world, provided they have an internet connection and a computer on which to work with.

These individuals generate income in a variety of ways - everything from selling t-shirts to building websites. In fact, I've interviewed 17 different digital nomads on how they make money online in my article on digital nomad job ideas.

How does one become a digital nomad?

Each person's path to becoming a digital nomad is different.

For some, it's accidental. One day, they realise that they are already working remotely so they just go travelling.

For others, it's a very deliberate process.

For me personally, I became infatuated by the idea of becoming a digital nomad long before I was ever earning a dollar online and I used travel as my primary motivation for learning how to create an online income.

The path I took meant re-skilling in a completely different field to what I was studying at university and creating a new career for myself with which I could take on the road.

You see, everyone starts from a different place and for some, the digital nomad lifestyle brings with it certain sacrifices that you may not be willing to make.

Often, the digital nomad lifestyle is glamourised but in this article, I'm about about to dish out a healthy dose of digital nomad reality.

Should you become a digital nomad?

Before we get into the tips, it should be mentioned that the digital nomad lifestyle is not for everyone. That's not to say that anyone can't do it but for some, they may find that the cons out-weight the pros of living this lifestyle.

In my video entitled, 'Is the location independent lifestyle for me?', I cover some of the pros and cons of being a digital nomad but more importantly, I ask two major questions that weed out a lot people.

1. Are you willing to work hard to become a digital nomad? and
2. Are you willing to forego your physical possessions?

Here's a few others:

• Are you willing to give up a steady income to freelance or start your own business?
• Are you willing to learn new skills and sell your services/product in a competitive marketplace?

For most people, becoming a digital nomad is tough. It's just like starting any business or choosing to freelance. It's risky and you might not be willing to give up your current lifestyle to try and make an income exclusively online.

However, if you know you truly want to become a digital nomad, here is my recommended process.

How to Become a Digital Nomad - The Framework

If you watched the video above, you should understand the process now but let's recap and go into more detail.

Step 1: Build your skill

The first step to becoming a digital nomad is to learn the skills of a digital nomad. The goal isn't to learn every digital skill there is but instead to choose one major skill and develop it.

Whether you plan to freelance, work for a company or start your own business, you'll need to build a certain skill. It might be learning how to build websites, analysing data or publishing books on Amazon. Whatever it is, if you can stick with that skill and aim for mastery, you will be destined to succeed.

Now before you become overwhelmed with the idea that you'll have to go back to school or college to learn this new skill, do not threat! We are currently in a golden age of self-education and learning new skills has become incredibly simple and inexpensive.

Take for example my own story, which I wrote about in my first book, 'How I learned to Code'.

I was in my final semester of university when I decided to learn how to code. I started learning Ruby on Rails with a free membership to Lynda (provided through the library at my university) and a month before graduating, I had my first full-time job as a developer.

Crazy huh?

We're told we have to go to university for 3 years to get our foot in the door when really, we can get so much information from the internet. And, not only can we get this information for much cheaper than a college degree, we can also be in control of our own learning and educate ourselves at our own pace.

How do you choose what skill to build?

Ah, good question!

It can be tough. My decision was based on a few factors:

1. Web development skills were high in-demand
2. I liked the creative aspect of building apps and the challenge of problem-solving, plus
3. I could start learning ASAP with free apps and websites

In fact, I recommend a similar criteria for figuring out your own path as a digital nomad.

Natalie Sisson from the Suitcase Entrepreneur calls this process 'finding your sweet spot'. It's about finding the intersection of 1) What you love to do, 2) What you're good at and 3) What people would be willing to pay you for.

Some people get hung up at this stage because what they love doing might not be a marketable or location independent skill. In this case, you should simply look for something that you're at least like doing.

As Niall Doherty puts it in a video discussing the sweet spot (he calls it the hedgehog method) , 'you don't have to love it. You just have to like it'.

If you're feeling lost, just look at a list of digital nomad jobs (like this one) and choose the one you like to do the most.

Where can I learn these skills?

The three places I recommend you look to for learning any digital skill is:

1. Udemy
2. Skillshare
3. Lynda

Each of them operate slightly differently but what they all have in common is that you can find courses about a range of topics. Whether it be digital marketing or design or web development, you can find it all in the one place.

If you'd like to learn web development like I did, a few places I recommend you start are:

• Team Treehouse
• Codecademy
• Code School, and
• Free Code Camp

Some of these resources are free and others cost a little bit of money but it's absolutely peanuts compared to what you'd have to pay to get a formal education.

The alternative to learning online is to go to a training bootcamp, college or university in your local area. It's entirely up to you but I'm personally a big non-believer in university as I got started in web development without any paid education whatsoever.

If you'd like to follow my path and learn the exact skills I used to become a location independent web developer, check out my classes on Skillshare.com. New members get 2 months for FREE!

Step 2: Sell your services

Note: 'Services' can be replaced with 'product' if you run a product based business.

The next step and the one I personally underestimated when I was starting out is the 'sales' part of your business.

'But wait Chris, I'm just trying to become a freelancer!'

Same here but guess what? The best way to succeed even as a freelancer is to think about yourself as a business.

It's one thing to have skills but another thing completely to be able to convince someone to hire you.

When you're seeking employment, you only have to sell yourself once. After that, you're hired. You just do your job and try not to get fired!

As a freelancer however, you're a one man band. The sales department in your business is you! Not to mention, you've now lost your location advantage which means you're now competing with people from all around the world, not just people in your local area.

This was the single biggest mistake I made in what I thought was a perfect digital nomad plan. I built my skills as a developer for a year, got some really good jobs but once I was left to finding work exclusively online, I struggled.

You see, regardless of what core skill you choose to freelance in (or start a business with), you need another skill and that is sales and marketing.

The shortcut to getting sales

To market anything online you need traffic. Traffic becomes leads and leads become sales.

Luckily you don't need to build your own traffic source to start making money, as buyers are a plenty on existing online marketplaces.

When I say Online Marketplaces, I'm talking about sites like:

• UpWork.com - for finding freelance work
• Fiverr.com - for posting ads for your service
• Amazon.com - where you sell virtually any kind of physical product as well as eBooks, and
• Udemy.com - for selling online courses

These sites have already built up massive traffic and in the case of UpWork, thousands of warm leads for freelancers.

But don't get me wrong, just because these platforms have thousands of prospective customers on them doesn't mean it's easy to make sales. This is because the low barrier to entry makes these platforms super competitive.

Especially for freelancers, so-called 'experts' will generally recommend you look at your exisiting network first before diving into online platforms. This is because people like to work with those they already know and trust but the issue with this is that it's not exactly scalable.

When I was starting out as a freelancer in Brisbane, Australia, I decided to do the personal network thing. I set myself up at my local coworking space, I made flyers and I attended all the meetups. I would tell people that I did web development and guess what? It worked. I started getting freelance clients and scored a major contract that resulted in over $10,000.

The issue however, was when I started travelling.

You see, as soon as I left Australia, I left that network behind and I no longer had that location advantage.

It was only then that I was flung into the competitive world of online freelancing.

The same goes for business too. Set up a garage sale in your front yard and put up a sign around the corner and you'll likely have at least one person show up at your door but of course, that model is not scalable and it's definitely not location independent.

So online marketplaces are definitely powerful. They do a lot of the work for you but you have to play by their rules. You have to understand how they work and you have to act in the platform's best interest to succeed.

The number one online platform for finding freelance work is UpWork. So if you'd like to learn more about succeeding on that particular platform, I created a class on Skillshare.com to show you exactly how to find clients and achieve 'Top Rated' status. If you're interested in using UpWork to find clients and go location independent, definitely check it out here and get two months free (for new members only).

Build your own sales and marketing machine

The alternative to using these online platforms is building your own sales and marketing system. It might be as simple as staying at the one coworking space and mentioning your business to everyone you meet. Or, it could be as complex as having a customer relationship management software, hooked up to your email marketing software and a suite of ads directing traffic to your website and offers.

As this is an article on becoming a digital nomad and not specifically about building an online business, I won't go into a lot of detail here. What I will encourage you to do however, is to not neglect this important step the way I did when I started out.

Whatever it is you're selling, my advice would be to generate at least some location independent income before you set out on your journey as you never know how difficult it's going to be until you actually start selling.

Alternative: Get a remote job

Not prepared to hustle? Need a steady income? or simply want to make sure that you're able to fund a location independent life on a consistent basis?

Well, you're in luck! because it is entirely possible nowadays to stay employed and still become a digital nomad. All you need is a job that you can perform remotely and a boss who is willing to let you travel.

For some, it's the golden ticket, especially if you come from a wealthy country like the US. Your western salary can take you virtually anywhere in the world and you don't have to worry about where your next pay check is coming from.

Hell! You could just live in Thailand and save for a house!

But of course, just like any job there are all the same downsides of a regular 9 to 5, just with the extra freedom to be able to work remotely and travel.

How does one get a remote job?

Good question! It's pretty much the same process as getting a normal job but instead of going for an interview in-person, you might be interviewed over Skype (or similar video conferencing platform).

The hardest part of course, is finding these remote jobs and I've found that there are two ways to do this.

1. Check on remote job boards like RemoteOk.io, or
2. Create a shortlist of the companies who support remote work and contact them directly

While I've never personally met someone who was hired through an online job board, my friend Blake Moore was able to use the second strategy to find his part-time remote gig as a growth marketer.

Applying for a completely remote job online may be just as competitive as finding freelance work (perhaps even more competitive) but have you considered starting local?

Another friend of mine, Dylan Wolff searched for remote friendly companies in his own city of Melbourne, Australia and got hired as a junior web developer at a forward-thinking Ruby on Rails development agency. He had to work for three months in-office but after that, he became completely location independent.

To me, this represents the best of both worlds as Dylan was able to use his location advantage to find work but not be forced to stay in Melbourne as you would be in the case of a regular job.

This is not to say that finding a remote job is easy but if you can't afford to take the financial risk of becoming your own boss, this could be a much better alternative.

Step 3: Remove your barriers to freedom

For a lot of people, the biggest barrier to becoming a digital nomad is simply the ability to earn a location independent income but of course, there are many other factors that could hold people back from living a long-term travel lifestyle.

In this section, I will be briefly talk about a few of them.

1. Financial Commitments

Do you currently have a lease or a mortgage? Maybe you run a physical business that you can't just quit and leave? Or maybe, you have some debts to pay?

Whatever it is, the ideal scenario is that you do your best to clear your financial obligations before you set off on your travels.

I know this might be incredibly obvious but unfortunately, there are no shortcuts here.

When I decided that I wanted to become a digital nomad, I had 11 more months on my apartment so I waited until the lease ended before my girlfriend and I started travelling.

If you own your own property, perhaps you might want to either sell or rent it out?

I understand that it simply may not be practical to sell everything and leave. I wouldn't necessarily recommend it but if you have financial commitments, this needs to factor into your decision

2. Relationship Commitments

Perhaps you support a family or you have a partner who doesn't share your desire and/or ability to work remotely and travel?

Unfortunately, there is no shortcut here either and the decision to travel or not may require you to make sacrifices on either side.

I'm not going to tell you break up with your girlfriend or boyfriend but you need to understand that sometimes you can't have both.

I have a few friends who had to give up their relationships to continue pursuing this lifestyle and it was tough. In the end however, they valued their own personal freedom higher than staying any relationship that forced them to settle in the one place and that's why they had to make that sacrifice.

3. Consumerism

In western culture, consumerism has reached a whole other level and the concept of Minimalism has gained popularity as society realises that many of us have an unhealthy addiction to physical possessions.

Regardless of whether you want to be a 'digital nomad', I'd recommend that you perform an audit on your possessions and determine which of them actually add value to your life. As a long-term traveller, minimalism becomes ever more important.

Chances are that you can't take your 44 inch television, recording studio or garage workshop in a suitcase to travel around the world and so unfortunately, you'll need to make a sacrifice here as well if you want to travel as a digital nomad.

4. Fear & Mindset

While I wouldn't say being a digital nomad is for everyone, I believe that anyone who loves the idea of long-term travel and is savvy and passionate about digital technology can realistically make it happen. It just requires a certain mindset and might require you to step outside of your comfort zone.

If you feel like fear is holding you back from making the leap, I would advise you to reframe it. You can look at fear as a sign you should turn away or you can view it as a sign of where you need to go next.

Whatever it is you fear, understand that you need to fight fear in order to grow. You might have your doubts about this lifestyle but unfortunately, you'll never know if you don't actually go and do it.

Step 4: Choose your location(s) and go!

This is the fun part. You've now built a skill and are out there selling it (hopefully), you've eliminated (or at least minimised) your barriers to freedom and now it's time to choose that location and book those flights!

When I started out on my digital nomad journey, I wanted to go to all of these places that I'd heard about in the digital nomad community and over my two year journey, I went to over 15 different countries to discover the best cities to live and work remotely.

This step is pretty easy as in theory, a digital nomad destination only needs two things:

1. It needs to be affordable, and
2. The internet needs to be stable

Everything else is up to personal preference.

Objectively speaking however, there are a number of popular digital nomad hotspots that remote workers most frequent.

Over the last two years, I've made it my mission to discover these destinations and cover them on my blog and in my book, 'The Digital Nomad's Guide to The World 2018'. I recommend you read my posts and order the book if you want to discover more about these destinations.

Another place you can get destination ideas from is the website NomadList.com which lists the best destinations to live and work remotely.

That being said, the one thing I recommend in the video above is to determine your own criteria about what matters to you as a remote worker.

For me personally, I value locations that have:

• A range of coworking spaces and spots to work from
• A thriving and welcoming community of other remote workers and entrepreneurs
• Warm weather, and
• Delicious and convenient food options

What's your criteria?

You don't need to have it all figured out just yet. In fact, it might be exciting for you to spin the globe and go where ever your finger lands!

For those of who are less spontaneous however, if helps to be able to use these resources.

Step 5: Just do it!

Ok. I'm cheating here by introducing an extra step but after you complete the 4 steps above, there's only one more thing you need to do and that is to book that flight, pack your bags and just go!

Of course, there are likely to be many challenges after you start your journey but don't worry too much about them right now. You're now a digital nomad and who knows where this path will lead you.

After two years of doing this, I'm ready to slow down and separate work and travel a little bit but we're all different. Maybe you'll decide this lifestyle isn't for you and come home after a few months or maybe you'll build a passive income business and travel for the next 10 years!

The beauty of this journey is that you're taking your life in a conscious direction and I think that is something that we should all do regardless of whether we want to travel or not.

Go forth, enjoy your journey and let me know how you go!

Until next time,

Chris

Disclosure: Some of the links in this post are ‘affiliate links.’ This means if you click on the link and purchase the item, I will receive an affiliate commission. This is however at no extra cost to you. You’d just be helping me out

Mexico always fascinated me as a country for living the remote work lifestyle. The food was a big factor but also, the inexpensive cost of living and warm climate indicated to me that Mexico had a lot of potential.

However, when I began my research on where to go in Mexico, there was only location that stood out and that was Playa del Carmen.

For a country with so much to offer for digital nomads, I'm still in awe at the lack of digital nomad scene here. Playa del Carmen was the only location that I found to have a coworking space that catered to digital nomads and with plenty to do around the area, I decided to book a month in between Medellin and New York City.

The following article is my full evaluation Playa del Carmen as a digital nomad destination after one month of living here.

Cafes and Coworking

The quantity of coworking spaces and cafes suitable for remote work in Playa del Carmen might be limited but the quality is high enough to make up for it.

Before arriving, I already had my ideal coworking space picked out but here are a list of some other spaces for your consideration.

Nest Coworking Space

$250 USD per month | $75 USD per week | $15 USD per day

Nest Coworking Space was a space I'd discovered months ago when fellow digital nomad, Tom Borvan tagged himself at the space on Instagram.

It seemed to be a space that catered to digital nomads and on arriving at Nest, I was pleasantly surprised. The space has a very convenient location on 10th Avenue and I was able to meet a few other nomads during my time here.

Cowork In

$235 USD per month | $65 USD per week | $13 USD per day (converted from pesos at current exchange rate)

Cowork In was the second space I checked out in Playa del Carmen and the best in terms of internet speed.

Situated on the top-end of Playacar between Centro and the airport, Cowork In is probably your best option if you're interested in the fastest internet speeds. Otherwise, if you're staying in Centro, Nest is much closer.

Work Zone

$130 USD per month | $52 USD per week | $10 USD per day (converted from pesos at current exchange rate)

If you're willing to trek over the highway to the area outside of Centro, you have Work Zone coworking space. It's the most affordable coworking space out of the three and with speeds faster than Nest, it might be worth the hike.

The staff there were super friendly and with lots of affordable restaurants around, I didn't mind the area but still too far for me to travel while staying in Centro.

Bendito (Cafe)

Bendito was a tip I got from this Tripadvisor review which stated, 'Best work spot in Playa, perfect for digital nomads'.

It's a few streets off 5th Avenue and it's one of the less touristic coffee options in Playa.

Choux Choux (Cafe)

Choux Choux is probably the most popular digital nomad cafe in Playa del Carmen. At Nest alone, I'd met two nomads who recommended it to me.

For me personally, it's the kind of place I'd come for just a coffee or some breakfast as it can get quite busy. Also, the ergonomics aren't perfect and the power points are scarce.

Cost of Living

Playa del Carmen is a city with a huge disparity of prices. Dining on 5th Avenue (the main tourist street) might cost you $20 USD+ whereas a taco vendor just a few streets away will be serving tacos for about $0.60 USD a piece!

Whilst Playa del Carmen is in Mexico, the prices here can be very American. In Playa, there's seems to be two tiers, the local price and the foreign price, but luckily it's quite easy to stay away from the tourist traps if you make sure to hang out outside of 5th Avenue.

Accommodation

For our month in Playa del Carmen, we booked through our good friend, AirBnB and paid $962 AUD (~$736 USD) for our 28 night stay.

There's always someone who calls me out when I do these destination reports. Yes! We pay extra to use AirBnB but as we only have a short amount of time to spend in each location, we value being able to move in quickly and using AirBnB removes pretty much all the headaches of renting in a foreign country.

Of course, if you can afford the inconvenience, I’m sure the price of renting an apartment like ours would be remarkably lower.

Food & Drink

Let me say first up that the food in Playa del Carmen is simply awesome!

Denise and I value good local food and our month in Playa was the best in terms of food since leaving Thailand. Mexican food is so tasty!

As for the cost, eating local is often quite cheap whereas eating international can cost you an arm and a leg!

Starting at the lower range, you can find street vendors selling tacos for as little as 11 pesos (~$0.60 USD), tortas for 22 pesos (~$1.20 USD) or empanadas for 10 pesos (~$0.50).

At a casual sit-down restaurant, I'd expect to pay somewhere between 50 and 100 pesos (~$2 to $5) for a torta (Mexican-style sandwhich) or plate of tacos. And, at a popular Mexican restaurant, maybe 100 to 200 pesos (~$5 to $10 USD).

For international food, you can spend anywhere from 100 to 500 pesos (~$5 to $25 USD) depending on how touristic the restaurant is. However, the big surprise was Chinese food which cost us less than $5 USD per plate. Amazing value if you ask me!

Here are a few examples of meals I had in Playa with their prices:

• A massive fajita plate at my favourite, El Fogon = 134 pesos (~$7 USD) + tip
• A chicken sandwich at Tortas Santa fe = 48 pesos (~$2.50 USD) + tip
• Fancy brunch at Plank = 450 pesos (~$23.50 USD) + tip
• A large deep-dish pizza at Don Chendon = 170 pesos (~$9 USD) + tip
• Big plate of Chinese food at Hui Hang = 60 pesos (~$3.10 USD)

Groceries

I always struggle to get the sense of how expensive grocery prices are in each location I travel to. So, I try to take a sample in each location in order to compare them side-by-side.

Here is a sample I took from Mega on 30 Avenida:

At first, the prices at our supermarket of choice (Mega) seemed inexpensive but if I compare the above sample with Belgrade and even Las Palmas, it appears to be a little on the expensive side.

Obviously, the more 'Mexican' the item is, the cheaper it will likely cost but in general, prices were comparable to back in Australia which indicates to us that locals mustn't be shopping at these big supermarkets. Otherwise, how could they be selling their food so cheap, right?

Transport

If you stay in Centro, getting around in Playa is generally quite easy.

For those shorter distances to the grocery store, to the beach and to Nest, you can easily walk between them but for longer distances - maybe to another side of town or to nearby Tulum or Cancun - there are taxis, collectivos and ADO buses.

Taxis are everywhere in Playa Centro and cost about 30 to 50 pesos (~$1.50 to $3 USD) to get around the central area. Usually, they are un-metered so be sure to ask up-front what the price is.

For travelling between Playa and nearby cities Tulum and Cancun, you can either take the ADO bus, the Playa Express Bus (Cancun only) or catch a collectivo.

We took the ADO bus to Tulum - which is a large comfort bus leaving from two different stations in Playa -  and it cost us 75 pesos per person (~$4 USD). On the way back from Tulum, we took a collectivo - a small van that travels up and down, carrying locals - for 45 pesos (~$2.35 USD). I'd recommend collectivos over the ADO bus as it's definitely the faster, cheaper and more authentic option.

Finally, for those of you who like to cycle, there's a bike path covering the main part of 10th avenue (parallel to 5th Avenue) and overall, Playa is quite a bike-friendly city.

Coffee and Beer

Playa del Carmen is one of those places where a coffee can cost you as much as a local meal and a beer, around the same as a soft-drink (soda).

For this reason, I didn't drink too much coffee during this trip but I did indulge in a few beers during dinner.

For beer, you're looking at around 15 to 20 pesos (~$1 USD) to buy at a convenience store, 30 to 50 pesos (~$1.50 to $2.60 USD) at regular restaurant and around 50 pesos (~$2.60 USD) at a bar or party.

For coffee, you'll spend anywhere from 25 to 50 pesos (~$1.30 to $2.60 USD) for a cappuccino, depending on how touristic the coffee shop is.

Phone Plans

Denise and I usually like to pick up our sim cards at the airport and this time, we were very glad we did, as we didn't find many phone shops once we go to Centro.

At the Cancun airport, there were only two options, 600mb for 150 pesos (~$7.80 USD) or 1gb for 200 pesos (~$10.50 USD), delivered through AT&T. We both took the 1gb option and I topped-up another 600mb towards the end of the trip for the same price.

Lifestyle & Things to Do

In Playa del Carmen, it's hard to run out of things to do. Whether it's diving in the ocean or at one of the 130 cenotes in the Riveria Maya, checking out the Mayan ruins or hanging out at a beach bar in Tulum, you'll have more than enough to keep you occupied on the weekends.

As for daily life, I thoroughly enjoyed being walking distance from the grocery store, the beach and my coworking space, Nest. We'd eat out on a regular basis, grab a quick meal at one of the many local food shops or stalls or take a quick trip to Mega to grab groceries.

Some of things that Denise and I got up to in Playa and the surrounding area were:

• Enjoying some of the lessor known street vendors and local restaurants on a guided food tour
• Exploring two amazing cenotes and the sea-side Tulum ruins at sunset
• Enjoying a unique culinary experience at the Frida Kahlo Restaurant, and
• Taking our first ever scuba dive of the coast of Playa Centro

But in general, the best thing about living in Playa is the weather and proximately to the beach.

Coming from South East Queensland in Australia, Denise and I are somewhat fussy when it comes to beaches but the coastline here on the Yucatan peninsula is simply stunning. The water is a beautiful Caribbean blue and the sunsets are simply majestic. We definitely have to come back!

Final Thoughts

Playa del Carmen was an awesome introduction to Mexico for Denise and I.

I must admit we had some high expectations - especially about the food and the beaches - but Playa definitely lived up to the hype!

I haven't been anywhere else in Mexico but to me, this country seems to have so much potential for the digital nomad lifestyle. I mean, the cost of living is inexpensive, the food is amazing, the locals are nice and the weather is great. At the very least, Playa del Carmen deserves way more nomads.

Especially for Americans and Canadians, I don't think many of you realise just what a beautiful country you have sitting below you! Perhaps it's the safety concerns -  which I also had before arriving - but at least in Playa del Carmen, I felt very safe.

In the digital nomad world, Thailand still reigns supreme but I think Mexico has just as much potential.

As for Playa del Carmen specifically, I can't really fault it. Apart from being a little too touristic, there's no reason why nomads shouldn't flock here. And, with Nest planning to expand in the next few years, I think we'll see Playa del Carmen start to gain further recognition as a digital nomad hotspot in Latin America.

Until next time,

Chris

In December last year, I created a post on the 8 Most Common Digital Nomad Careers in which I went over the most common Digital Nomad Careers that I'd discovered across my journey.

While I do think it's important to build a career while travelling, I know that a lot of you are looking to just make at least some money online so that you can get started and so, I've decided to create a new post in which I'll do my best to cover every digital nomad job that I've ever heard of someone making money from.

But first, let's clarify what I mean by the word job.

My personal definition:

A job is simply any situation where you trade your skill/expertise and/or your time for money with a client or employer.

I might cover online business ideas in a future post but for now, I suggest to anyone starting out to choose a job that you can do remotely. If you don't know what that job might be just yet, keep reading for a definitive list on each job I've come across.

Web and App Development

Just like I mentioned in my post on digital nomad careers, I still believe that being a developer is the most ideal digital nomad job.

1. Wordpress Developer

Of course, the most obvious digital nomad job is to become some kind of web developer. It's what I personally chose when starting out and with almost every business needing a website these days, it's one of the most in-demand skills you could learn.

In my digital nomad careers post, I interviewed some pretty high-level developers but those of you starting out, it should be much easier to focus on building basic websites like Wordpress combined with a free or paid theme like Divi (recommended).

Given that Wordpress powers approximately 27% of the internet (as of 2016), it's the obvious framework to build simple websites that are both highly editable by developers and easy to use for the client.

Out of all the web work I've done for small business clients, working with Wordpress has been the platform of choice and you can find a ton of Wordpress jobs on freelance platforms like UpWork.

Phil Manning, TravelDeveloper.com

As a Travel Developer, I stick with Wordpress for developing websites to clients because of it’s ease of use, supportive community, and flexibility.  Also, most of my clients want a product that they can learn and not need to contact a developer every time they want to make a simple change (i.e. change of hours of operation) .  The speed with which Wordpress websites can be set up enables me to finish projects in a short amount of time and hand-off the project to the business owners and stakeholders.  This allows me to never feel stuck in one place for a project - and rather be in a more supportive role as I travel the world.

2. Shopify Developer

Shopify is an eCommerce platform that powers 500,000 businesses' online stores and as a Shopify developer, you can tap into the ever increasing amount of small business entrepreneurs who are using the platform to create their own online freedom income.

Specialising in Shopify is a good alternative to Wordpress, especially if you mix with other nomads who are doing eCommerce as you can help them to build their stores and optimise for sales.

Dustin Delatore, whosdustin.com

I became a Shopify developer after I started traveling, as a gap year from my developer career back in America. I've always been passionate about Shopify's platform and how easy it was to work work with. While abroad, I met a lot of people who ran commerce businesses. Everything from socially conscious brands like Feel Good Bali to the dropshippers of Chiang Mai.

Thanks to Shopify's brand reach, serving over 375,000 merchants, I've been able network globally as a freelancer. In addition, I've had the opportunity to build a theme specifically for dropshipping sites (theme coming later this fall).

2024 Update

It's interesting to see that I covered Shopify Development here on my blog 2 years before I became a Shopify developer myself! In fact, I've since created a course on learning Shopify Frontend Web Development (which I'll link below for you to check out)

3. Mobile App Developer

Despite the fact that web apps continue to become more and more powerful, there is a still a strong need for app developers who create native apps for iPhone and Android.

With Google and Apple controlling over 99% of the smart phone software market, your choice of specialisation is either to develop for Android (Java-based programming), IOS (Swift-based programming) or for both (using frameworks like React Native, for example).

When I started out as a developer, I choose to go down the web development path, as I felt there were more options in this area but being able to create software is a valuable skill if you're dedicated to becoming a programmer.

Mirko Kiefer, blackbeltlabs.com

Getting into software is one of the best things you can do to achieve location independence. For the last two years I have been traveling full-time while building a distributed team of developers and designers that help startups and corporates build apps and APIs. With Blackbelt Labs being setup location independent from the start we were able to attract talent we could not reach by being stuck in a single location.

How to Learn Web and App Development

Their are numerous resources online for learning to code including:

• Team Treehouse
• Codecademy
• Code School
• Free Code Camp
• Lynda.com
• Udemy
• Skillshare

For Wordpress development specifically, I learned how to build my own theme with the Lynda course, WordPress: Building Themes from Scratch Using Underscores. While I wouldn't necessarily recommend building themes from scratch with Underscores, it was a good insight in to the Wordpress templating system and was the basis for my future development in Wordpress.

What I would recommend is using a premium theme like Divi to get up and running efficiently whilst also being able to customise exactly to the client's (or your own) needs. This is actually the subject of my second Skillshare.com class which you can access with a free trial here.

For learning Shopify development (my speciality since 2019), check out my own website ShopifyThemeDeveloper.com, a one-stop shop for learning everything about Frontend Shopify Development.

For Mobile App development, Facebook has developed a framework for creating apps for both platforms using Javascript called React Native. A few really good courses that I've taken on React Native are from Stephen Grider on Udemy:

• The Complete React Native and Redux Course
• React Native: Advanced Concepts

Otherwise, popular Udemy courses include:

• The Complete Android N Developer Course by Rob Percival
• The Complete iOS 10 & Swift 3 Developer Course, also by Rob Percival

Finally, for Web Development, I've put together a selection of classes for you to explore on my Skillshare.com page here. Remember: all of my Skillshare.com classes can be accessed for FREE for a whole two months for new members, so check it out!

Sales and Marketing

The driving force of any business is sales and marketing and with audiences moving online, it's creating more opportunities for remote work.

If you know how to drive traffic, leads and customers to a business, you'll always be in demand.

4. Copywriter

Copywriting is a great nomad job to get started in if you're a native English speaker as it's an easily accessible skill to learn and having a command of the English language will put you ahead of a lot the low paid work from developing nations.

What is copywriting? – It’s basically writing with the purpose of persuasion. While a content writer will write blog posts, copywriters will write sales pages. Both are similar but copywriting is much more lucrative as your income is only limited to your ability to write persuasively.

I personally know a bunch of nomad copywriters and it's something they say they've made a good amount of money from.

Julian Goldie, KingPassive.com

A couple of years ago I ditched the corporate office life to work online & travel the world. Nowadays, I'm a freelance copywriter on UpWork, sell info products on Fiverr and run a blog called King Passive - all whilst travelling across South America.

Copywriting is a great skill to have because it gives you the freedom to work online, pick your hours and of course, earn some decent money along the way. Plus every single business needs copy - so you'll always be in demand.

5. Content Marketer

As the Content Marketing Institute describes it, 'Content marketing is a strategic marketing approach focused on creating and distributing valuable, relevant, and consistent content to attract and retain a clearly defined audience'. Put simply, it's a practice involving the creation and distribution of content to market your business.

My friend and fellow blogger Tomas Laurinavicius puts it like this, 'blogging is more like documenting and sharing a personal point of view whereas content marketing has a clear goal to raise awareness, convert, sell, etc'. Content creation might be part of your role as a content marketer but as a marketer, you start with an objective and work backwards.

Ivan Kreimer, ContentFiesta.com

I love working as a content marketer because it has given me the freedom to travel to 15 countries in the past 8 months. None of my clients have had any quarrels about my traveling; in fact, after I told one of them I was in Ubud, he started looking on Google Street View and became amazed at the place.

The time difference can be tough at first, but if you make it clear to the client that you are going to work with some delay while providing the same value than before, they won't care. Still, working remotely as a content marketing has been one of the best things I've ever done.

6. Conversion Rate Optimiser

Further down the marketing funnel sits the discipline of Conversion Rate Optimisation. Commonly referred to as CRO, it's a field in marketing and data analytics that involves increasing the percentage of visitors to a website that convert into customers, or more generally, take any desired action on a webpage.

I've done some CRO in a previous position and from my experience, it involves a sequence of making modifications to pages, setting up tests and analysing data that gets repeated over and over.

It's a quite specialised role in marketing but if you're the kind of marketer who's more data-driven, this could be a good option for you.

Olga Kostova, BlackBeltLabs.com

Back in 2012 I started as a conversion optimisation specialist. I was actively writing articles and giving talks on this topic. That brought me clients which most of the time did not need me on-site. Thus in 2014 I left my hometown and I am traveling since.

There were many businesses I helped during my journey, including two the biggest European cruise lines, a 3D printing, innovative fashion, health and real estate startups.

7. Hubspot Specialist

HubSpot is a powerful marketing automation tool that many businesses use to develop and manage inbound marketing campaigns.

Since it's adoption by over 34,000 businesses, the use of HubSpot has become a marketing specialisation on its own and with businesses spending up to $2,400 USD per month to use it, its a field that can prove quite lucrative.

Kris de Leon, KrisDeLeon.com

I’ve been location independent since 2015, and I make a full-time income through my consulting work. I help my clients develop, launch and manage inbound marketing campaigns using HubSpot. My work includes lead generation, email marketing and social media. I’ve landed consulting projects by positioning myself as a HubSpot expert and working with clients that already use this tool. My work is completely done online, and I’ve managed client projects while traveling in Europe, South America and Asia. I’ve spent most of my time in Latin America since I can easily work U.S. business hours, and also learn Spanish.

8. SEO Specialist

Search Engine Optimisation (or SEO, for short) is a marketing discipline focused on growing visibility in organic search engine results. In simple terms, SEO specialists help websites appear higher up when you search for something on Google, Bing, Yahoo and any other search engines.

Specialising in SEO was in fact, the primary discipline that allowed Sean Ogle (one of the earliest digital nomad bloggers) to live a location independent lifestyle and to this day, I've met a few nomad SEO specialists that are doing well with this particular job.

Jon Parker, Enticery.com

I've been doing SEO consulting in some capacity now since 2010. Apart from a couple of longer stops along the way, I've been nomadic for the majority of this time; living in the UK, Bali, Thailand and Morocco. Back when it was a struggle to get 1Mb/s download speeds in Bali things could be a little difficult. These days, where the mobile data speeds in developing countries often beat wired connections in some parts of the UK, challenges like this are a thing of the past.

Although the world of SEO is ever-changing, I still believe it's one of the best value investments for almost all businesses. That's why this is an aspect of digital marketing that I continue to believe in and feel passionate about.

9. Performance (PPC) Marketer

Performance Marketing is a comprehensive term that refers to online marketing in which advertisers and marketing companies are paid when a specific action is completed; such as a sale, lead or click. PPC on the other hand, stands for pay-per-click, a model of internet marketing in which advertisers pay a fee each time one of their ads is clicked.

Basically, the role of a Performance (PPC) Marketer is to work with online ads. These might be the ones you see at the top of Google, in your Facebook feed or on a website. PPC marketers strategise, create and test these online ads for maximum ROI and if you're good at it, the career potential is limitless.

Ricardo Kehbel, RicardoKehbel.com

Working in Performance Marketing with the focus on Google AdWords and Facebook Ads is the perfect setup for my location independent lifestyle. After earning experience in agencies and in-house for several years I wanted to combine work with more freedom. So I started with online client acquisition and finally became self-employed.

My working time now consists of creating performance marketing strategies and campaigns, monitoring and optimising ad performance and keeping my Google AdWords or Facebook Ads clients up to date via Mail, Skype or Asana. In regular online-meetings, we collaborate on strategies for coming projects. This can literally be done from anywhere in the world. At the moment I'm in Venice in Italy and definitely know that I wouldn't change anything in my work-life-setup.

10. Social Media Marketer

Social Media Marketing is a form of online marketing that involves creating and sharing content on social media in order to achieve marketing and branding goals.

Although most of us engage with social media on regular basis, Anna-Lena (below) says you'd be surprised by how many businesses are totally overwhelmed by managing it on a professional level and don’t know at all how to handle their profiles.

With so many different platforms around these days combined with the pressure to compete against so much content, social media marketers can be a valuable asset to businesses who simply can't manage the time-intensive task of preparing and posting statuses, graphics, photos and other content.

Anna-Lena Eckstein, AnnaLenaEckstein.de

I knew I was only gonna be happy in life if I could work on my own and from anywhere in the world. Social Media always was more to me than just a tool to stay in contact with friends, so I decided to make it my work too. Now I work with solopreneurs and smaller businesses on their kick-ass social media strategy.

It's the perfect job when you want to be location-independent in order to travel the world. Plus, I sincerely believe that my travel-lifestyle enhances my creative process.

11. Virtual Assistant

'Virtual Assistant' (or VA, for short) is a broad term that generally refers to a freelancer who provides professional administrative, technical, or creative assistance to clients remotely.

Theoretically, all the previous sales and marketing disciplines just mentioned could be a part of a virtual assistant's job however, VAs are usually more generalised. You may find a design VA who deals with all creative assistant work, a technical VA who deals with websites and technical marketing aspects or a generalist marketing VA who works across the full stack of marketing disciplines.  It really depends.

Tanja Ba, freivogel.zone

As an online business expert, I don´t need to be where my clients are. Most of my clients have a stationary business and they want to expand into the online world. They can focus on their content while I work on the tech side (website, e-mail marketing, etc). As a VA you can start from scratch and offer your clients what makes them and you happy. And it makes me happy to travel around the world. I am more efficient and productive than ever before because I don´t need to stay in one place.

12. Strategic Consultant

A Strategic Business Consultant works on the high-level aspect of a business. While sales and marketing are usually involved, it's perhaps more appropriate to say that strategic consultants can work with businesses to solve almost any issue and assist decision making at the senior management level of the organisation.

I've met just one digital nomad who identifies as a strategic consultant and his name is Zack Young.

Zack Young, ZackYoung.co

Back in 2015, I was spending almost 3 hours a day commuting to and from the office in London. It was such a waste of time, so I knew something had to change. Strategy consulting can be delivered in person but is more commonly being delivered through digital, making it possible for me to provide strategic advisory to companies all over the world. After becoming nomadic, I can now work with companies all over the world and provide real value - as if I was with them onsite. Slack helps make this possible, as people feel like they’re together all in one space. The world of work is evolving and the rules are for you to write.

How to Learn Sales and Marketing

As a part of my role with Health Guardian in 2016, I was taken through some courses from DigitalMarketerHQ that I thought we really valuable. These were:

• Conversion Funnel Mastery
• Optimisation and Testing Mastery
• Paid Traffic Mastery, and
• Analytics and Data Mastery

All of these are available under the one subscription to Digital Marketer HQ.

Design

Design is another popular location independent field of work as designers often work freelance and of course, their entire job can be done with the use of laptop, some design software and perhaps a digital drawing pad.

13. Graphic Designer

For the artists and creative types among you, you may want to consider a career as a location independent Graphic Designer.

Often times, I meet designers who offer graphics as just a part of their service offerings, as the freelance gigs for graphics can be small and sporadic. However, you're only limited in this career path by the strength and uniqueness of your designs.

Magdalena Theis, MagdalenaTheis.com

Working as a Graphic designer is one of the best jobs you can do remotely because the most important thing in order to do my job is also the thing I never have to pay extra luggage for: my creativity. Then I just need my laptop, pen and paper and headphones, so I can build my office everywhere.

Even though it comes in handy to have good Wifi, there are moments in my creative process where I can work easily without Internet connection, so with some good planning I can work while I am on the road.

It takes a while to build the remote business in this field, but once your clients trust you and see that you are still always available, your portfolio can start to grow quickly.  I can convince my clients to benefit from my lifestyle because I get inspired by designs and cultures from all over the world and never stop getting more and more ideas.

14. Web Designer

Often confused with the term 'Web Developer', a web designer's focus is more on the design aspect of a website and should include working knowledge of user experience design and front-end web development.

Often times, a web designer role includes some web development and many clients expect that web designers actually know how to implement their design. On the other hand, a web designer may simply specialise in the design aspect and pass on the designs to a developer to implement. A common pattern for a lot of small business clients is creating designs in Photoshop and then passing them off to a Wordpress developer to implement.

Sergio Sala, Sergiosa.la

I have always been passionate about design and helping others strive for something better, so I was lucky to have self-learnt coding when I was 14 years old. I've used this skill the last five years to create my own list of clients, where I create websites for online entrepreneurs and professional bloggers who want to up their game with better branding, more signup leads and more revenue.

As I only need a laptop and reliable wifi, I can practically be anywhere, so ever since I worked for myself, I have visited and lived in more than 70 cities around the world.

15. UI/UX Designer

While technically they are separate fields, UX and UI design are often grouped together as they both involve a thorough understanding of how the users interact and behave with technology and design.

UX stands for User Experience and encompasses all aspects of the end-user's interaction with the company, product or service. UI on the other hand, stands for User Interface and is more concerned with the actual design elements that make up a piece of software or hardware.

Both UX and UI design is quite a specialised field but it is growing.

Daniel Lauding, DanielLauding.se

As a traveling UX & UI designer I get to understand the local needs and how the users interact and behave with technology and design. I get more productive by being on the road while working, and it always feels nice to threat yourself with something nice after a good day of working. From a nice dish, great Airbnb or to plan the next destination.

How to Learn Design

Unfortunately, I don't have any specific courses to recommend but I'm sure that by searching the biggest education sites online, you'll be able to find a highly recommended course. These are sites like:

• Lynda
• Udemy
• Skillshare

Foreign Language

Working with foreign languages is a great discipline for digital nomads as both concern foreign travel and cultural exchange.

16. Online Language Teacher

You'll likely find 'Online Language Teacher' on the top of any list of ways to make money living abroad but have you considered offering language training completely remotely?

I'm met a few people on my nomad journey who have funded their travels this way and even interviewed one of them on my YouTube channel.

To me, it requires a certain personality to succeed with online teaching. If the idea of being in constant conversations with people makes your head spin, it's probably not for you. Plus, as it is a job based on meetings, you'll have to be online during certain time zones.

For North Americans, there's a platform called VIP Kid that accepts almost anyone with a college degree and for Brits, Aussies and Kiwis, I hear the equivalent is ABC360.

Ryan Champion, MyTestHero.com

I was in China teaching while learning Chinese when I decided that working on the internet could give me more freedom. Initially I was teaching students I had met face-to-face. Now I work with people from all over the globe. I spend my time between Europe and Asia. The nomad scene is interesting because you get to meet a lot of open minded people who are prepared to work hard to create interesting and fruitful lives.

17. Freelance Translator

Translating is not a field I hear about often in the digital nomad world but for a location independent lifestyle, it makes perfect sense.

If you're bilingual, you already know how to translate to a certain extent so you're off to a great start! And as you'll read below, Marjet was basically able to build a career as translator completely on the road.

Marjet Sorgdrager, bit.ly/MarjetSo

We were already traveling for a few months and I needed to get a job online, so I searched on Upwork for what was most requested for by clients. Coding wasn't something I could do, copywriting was, but there was a lot of competition as well, so I got to translating; I was able to do it because I can speak 2 languages, and there aren't many people around the world that speak Dutch.

I learned that advertisements and marketing texts were most requested for and because of my background in copywriting and journalism, I was able to do it. It was all accidental but still the pieces of the puzzle ended up fitting perfectly. I now have the freedom to work from anywhere and I can pick my own clients. Upwork has been a perfect platform for me since it works with reviews for clients as well, so I can check the experiences from other freelancers. I have 4 regular clients with continuous projects, so I don't have to worry about the next gig anymore.

Other Ideas

The above jobs cover virtually all the positions I've seen nomads use to fund their travels but as this is The Ulimate List of Digital Nomad Job Ideas, here are a few others that I'm sure exist but am yet to verify as a 'digital nomad job'.

18. Accountant or Book Keeper

As a former accountant student and intern, I wouldn't recommend accounting as a location independent job. Number 1, it's not something you can get into easily and number 2, the culture around remote work for this particular field is a bit behind. However, after meeting with Jeff Maddux from The Lifestyle Accountant, I have faith that Accounting will become more of a remote-friendly career in future.

As an alternative to Accounting, perhaps an easier field to turn into a location independent job is the role of a Book Keeper as this role requires little to no formal certifications.

19. Audio Producer

I remember coming across a friend of a friend who's not necessarily a digital nomad but was able to perform his job as a audio producer remotely.

If you think about it, sound design, mixing and mastering can all be done with just a computer but obviously, if you had to record a band or musician live, you'd be stuck in that location.

20. Voice Talent

This is actually a job that I've been paid for on UpWork but I don't think it requires a big mention.

A Voice Talent is simply anyone who is able to record a narration on audio and send to the client. All you need is a good audio recording setup and good voice to get started. Unless you truly have a unique voice however, I don't believe it to be that sustainable.

21. Video Editor

While video editing is another job that I get paid to do remotely, I feel that it is often highly under-valued. Usually, it is the one who shot the footage that gets to edit it and as a video creator myself, this makes perfect sense. The alternative - being an actual videographer - I would not consider to be 100% location independent as it requires being in a particular location.

22. Article and Blog Writer

While it may sound like an ideal location independent job, very few people I know actually make decent money from writing for blogs and other online publications. Most of the articles you'll see on big news websites are written by unpaid contributors and for small blogs, writing is often a low-value task that is outsourced to developing nations and content houses.

23. Customer Service Agent

In actual fact, I do know someone who works as a location independent Customer Service Agent but unfortunately, this role didn't fit into any other category.

Customer Service Agents (or Support Agents) may be required to respond to customer queries via email or phone and both can be done remotely given a strong enough internet connection.

And the list goes on...

I've now found myself scouring online lists for more obscure job ideas and so I think it's a good time to wrap up.

While I'm sure this list could be infinitely long, I think the 23 ideas mentioned previously should cover 99% or more of all jobs that digital nomads are funding their location independent lifestyles with.

As I mentioned, this list does not include the various types of online entrepreneurs who exist in the world of nomads but for that, I might have to prepare another article.

For now, I hope that this article has given you some ideas about the various ways you can fund your digital nomad lifestyle and if you're serious about building a location independent career, I'd recommend you check out my previous post, The 8 Most Common Digital Nomad Careers.

Until next time,

Chris

Disclosure: Some of the links in this post are ‘affiliate links.’ This means if you click on the link and purchase the item, I will receive an affiliate commission. This is however at no extra cost to you. You’d just be helping me out

Click the video below to watch our experience in Medellin on camera.

In the digital nomad community, there seems just one destination that receives more buzz than any other in South America. That is Medellin, Colombia.

Despite the hype and praise, I was almost about to skip this city. It seemed a bit rough around the edges and from a distance, the nomad community seemed a bit of a boys club.

But, after discovering an inexpensive one-way flight from Panama City, I decided 'why not?' and after 10 days in the city of eternal spring, I'm glad I came down.

Keep reading to discover why I believe Medellin truly lives up to the hype.

Where to Stay in Medellin

Before we begin, I need to make an important note.

Medellin is a large city and I didn't get to see all of it. The experience I share in this blog post is based around a particular area in the commune of El Poblado, specifically the area around Parque Lleras.

I decided to stay in this area after a tip from my friend Nick Nerov who recommended the area around Calle 10 (ie. the main tourist street of El Poblado).

Here you'll find a bunch of coworking spaces, cafes and international restaurants, all within walking distance, similar to the Nimman area in Chiang Mai. It's also the home of nightlife in Medellin and one of the nicer areas of the city.

To me, it was the perfect location to stay as a digital nomad and I'd highly recommend it.

Cafes and Coworking Spaces

Important in any good digital nomad destination is the availability of places to work from and in Medellin, Cafes and Coworking spaces are everywhere.

Here are a few Coworking Spaces and Work Cafes that I checked out in El Poblado.

Global Express

Daily Rate: ~$6 USD per day | Monthly rate: ~$160 USD | First Day Free

Without realising, we checked into our AirBnB at the downstairs offices of the Global Express. The building as it turns out, is a bit of a hub that includes a tours desk, rental office and of course, the coworking space on the upper floors.

Overall, it's a coworking space done well, designed perfectly for maximum productivity with a uniform desk design and seating. The cost of space however remains affordable at only $5 USD per day (or at least, that's what they told us) and the first day is free to try out.

As the internet was down at our apartment for most of our stay and the space was literally around the corner, we relied on Global Express twice during our 10 day trip.

Work and Go

Rates starting at around $160 USD per month | First Day Free

Work and Go was the second space we checked out and after Global Express, it had a lot to live up to.

While I can't fault it, there was nothing special about it that would make me return given all the other options, except of course for the high-rise view from the fifth floor.

Selina CoWork

Rates starting at $10 USD per day or $75 USD per month

Selina is a hostel brand that is trying to create a unique experience at their locations in Latin American by offering services and facilities that cater to the new generation of travellers.

Selina CoWork is the coworking branch of Selina and currently there are 6 coworking spaces across the 14 Selina locations (but expanding rapidly).

Selina CoWork in Medellin had some of the fastest internet we experienced in Medellin but it was quite crowded with a surprising number of permanent desk members taking up half the space.

Tinkko

Hourly packages start at around $70 USD for 25 hours to $150 USD for 100 hours, valid over a single month

Situated near the Santa Fe mall, Tinkko was the most corporate of the spaces we visited.

They have proper meeting rooms and a view of the city from the 15th floor.

Mention Digital Nomads Medellin and get a free day pass to the coworking space ;)

Verdeo (Cafe)

Moving onto the cafes, Verdeo is predominantly a vegetarian restaurant but has insanely strong coffee and offers a lush garden environment to get inspired.

Ergonomics are what you'd expect from a cafe and power points aren't all that common.

Urbania (Cafe)

Urbania was a cafe that provided good enough internet but wasn't as practical for remote work in terms of ergonomics and availability of power points.

Cafe Velvet

A surprising winner in our search for the perfect work Cafe was Cafe Velvet, a space that seems to consciously cater to digital nomads and was our saviour during the Día de la Raza, a public holiday in Colombia.

The Cafe has good food and coffee but best of all, a ideal set up for laptop work, especially in the area with the couch and the roll-in desks. I definitely recommend you check it out!

Cost of Living

Much like Las Palmas de Gran Canaria, Americans and Europeans will say that Medellin is so cheap but of course, it still does not compare to our favourite locations in South East Asia like Chiang Mai and Bali.

Accomodation

Given our short stay in Medellin, we booked our apartment through AirBnB and paid $561.79 AUD (~$432 USD) for our 10 night stay.

This modern studio apartment (pictured above) was situated right on Calle 10 in the perfect location for us but wouldn't be ideal for a long term stay as it was small and had no desk or kitchen.

This is obviously not indicative of a rental price in Medellin but I could definitely see some good value for money with friends spending only $3,500 USD for a 5 bedroom penthouse in El Poblado (check the video above for a sneak peak).

Food & Drink

For Denise and I, food is very important and in the cuisine department, we found Medellin to be a little lacking.

Of course, the area we stayed on the main tourist strip is probably a big factor but we found the food to be surprisingly expensive and heavy on the burgers, pizzas and hot dogs on Calle 10.

Just outside Calle 10 was a bit more up-market but at the same time, more expensive. Most of the time, we were paying $7-15 USD per meal, something we'd become accustomed to since leaving South East Asia but were hoping would be less.

Unfortunately, we didn't have a kitchen to cook in but discovered that we'd definitely need one, as eating out every day is not something we'd want to do if we actually lived here.

Some examples of meals we had with prices were:

• Huevos Rancheros at D'Andre - $15,200 COP (~$5.20 USD) + Tax/Service
• Chilli Con Carne at Selina - $17,280 COP (~$5.92 USD)
• Hot dog with the lot at Perritos - $6,500 COP (~$2.16 USD)
• Sushi Dinner for two at Hanami - $90,685 COP (~$31.07 USD)
• Chicken Asado (f0r 2) at a mall food court - $24,4000 COP (~$8.40 USD)

Groceries

Like I mentioned, we didn't have a kitchen this time but I still recorded some grocery prices for you guys.

*Using the current mid-market rate of 3,000 COP to 1 USD

Phone Plans

Our phone plans in Medellin were some of the most expensive we've come across in our travels.

My initial set up with Claro came out to 53,000 COP (~$17.60 USD) for only 2gbs, a quota that I easily surpassed with no wifi at the apartment and had to top up within a few days for 44,000 COP (~$15 USD).

Transportation

Getting around was easy in Medellin with most things coming within walking distance of our apartment but those times when the walk was a little too long, we relied heavily on Uber.

While there is a metro system in Medellin, Uber is so inexpensive that it became the easy choice for us to get anywhere in the city.

Here's a breakdown of all the Ubers we took and their prices:

Drinking and Nightlife

I'm not much a nightlife and drinking guy but the times when I was exposed to alcohol prices, I remember them to be quite inexpensive.

A six-pack of Coronas at the supermarket cost me 20,500 COP (~$6.80 USD) and a beer at the bar, I remembered to be around 5,000 COP (~$1.66 USD).

Lifestyle and Things to Do

Any list of things to do in Medellin will likely include the Medellin Metrocable and the Laguana of Guatape. The metrocable is a gondola lift system that takes you into the mountain-top Parque Arvi and the Laguana of Guatape is an amazing artificial lake generated from the construction of a nearby dam. There's also museums parks and gardens but I'd highly recommend Guatape as it was the highlight of our trip.

Guatape is a small town just outside Medellin that is perfect for a day trip. The town itself is beautiful and traditional, although very overtaken by tourism. Walk out to the water to catch the ferry that will take you around the laguna and then make your way to the giant rock called El Peñón de Guatapé where you'll climb 200 metres to reach the top and check out some amazing views of the laguna.

Back in Medellin, you have all the ammenities of a major city.

Denise and I didn't get up to much except work and hang out with friends but why not attend a dance lesson while in South America? Or perhaps, check the nightlife in Parque Lleras!

Overall Thoughts

Medellin surprised me. My theory on the expat scene of Medellin being a boys club seemed verified but the amount of coworking spaces and cafes within the one small area came at a pleasant surprise.

While for me, it's no rival to Chiang Mai, I did notice three positives that both these destinations share:

1. A thriving expat area - Around Calle 10 in Medellin and the Nimman area in Chiang Mai
2. Year-round good weather, and
3. Surrounded by beautiful lush mountains

The biggest area in which the two cities differ is the food in which Chiang Mai is the clear winner with healthy, delicious and cheap street food. Plus the cost of living is still much less in Thailand.

Unfortunately, once you've been to Chiang Mai and fall in love with it, you end up comparing it with every destination you travel to.

For Americans and Canadians who appreciate the physical and timezone proximity to North America, Medellin is obviously a winner but for me personally, I would like to see a coworking space that caters specifically to nomads and an environment which could attract female nomads as well.

All in all, it was quite a productive and social trip. Thank you Medellin!

Until next time,

Chris

Despite the low cost of living, fast internet and position in EU, Warsaw seems to have failed to make it into any lists of major digital nomad destinations (currently sitting at position 115 on Nomad List) and honestly, I can see why.

One thing I've noticed over the past 18+ months of living the 'digital nomad lifestyle' is a mass migration out of Europe during winter and of course, a mass migration back to Europe when the weather improves.

In Warsaw, the weather remains mild even during the summer months.

The reason I mention the weather up-front is not to deter you from Warsaw but to demonstrate that it might be the only obvious factor afflicting this otherwise nomad-friendly European city.

I personally did not enjoy Warsaw as much as I'd hoped but I can definitely see it's good points.

The city is a modern metropolis unlike anything I've seen in Europe. It's high tech, has great infrastructure and has all the trimmings of a modern city including Uber and UberEATS.

So without further ado, let’s get into my full evaluation of Warsaw as a digital nomad destination

Cafes & Coworking Spaces

Unlike in Belgrade and Sofia - where I researched, tested and compared a collection of coworking spaces - for this trip to Warsaw, I had already decided on one coworking space that I wanted to work out of. That space was Warsaw's Google Campus.

Campus Warsaw

In case you weren't aware, Google has set up free coworking spaces around the world in locations like London, Tel Aviv, Madrid, Sao Paulo, Seoul and London but despite the non-existent price tag, each of Google's spaces are generally well-equipped with modern facilities and incredibly fast internet. The Warsaw version of Google Campus is no exception.

With free, blazing-fast Wifi and plenty of ergonomic office seating, Campus Warsaw seemed like a no-brainer to spend my working days in Warsaw but after two days of closure due to a public holiday in Poland, I found myself getting into the routine of working from home.

The space is brand-spanking new after recently moving locations and the internet did not disappoint. However, I felt the location was a little remote and my decision to base myself near the new location was the biggest mistake of the trip.

Etno Cafe

While I didn't end up whipping out my laptop during my visit to Etno, I saw a lot of others that did.

It's one of those trendy cafes that seems set up perfectly for remote freelancers and I noticed a digital nomad meetup happening there during my last week, suggesting that this might be a bit of a nomad hotspot.

STOR

Situated not far from Warsaw's Nowy Świat, STOR is a quaint little cafe, similar to the look and feel of Etno.

I didn't whip out my laptop here either but the internet speed and abundance of laptop workers demonstrated that this was a good work cafe as well.

Labour Cafe Deli & Coworking

Third on my tour of nomad-friendly work cafes was Labour Cafe Deli & Coworking, which by the name, sounds like the ultimate coworking cafe but in reality was much like any cafe with most patrons stopping by for a coffee or breakfast.

On that note, I'd highly recommend the Shakshuka for breakfast. It was absolutely delicious and a steal at 18 PLN (~$5 USD).

Secret Life Cafe

On my second-last day in Warsaw, I decided to get out of the house and check out the final cafe on my list, the Secret Life Cafe.

It's situated north of the centre of town near the Arkadia mall and seemed to have a mix of normal cafe-goers and laptop workers.

Reaktor Coworking

I decided to check out Reaktor as it was only a short walk from the Secret Life Cafe.

I must admit, I walked past it a few times as I tried to figure out it's location. It's actually just a house in a normal residential area - no signage, just a regular house.

Once you walk inside however, it's obvious the house is a shared space.

I spent a few hours there working on the video for this blog post. The internet was good but the space is definitely more focused on the local startup community as opposed to transient workers like me.

Cost of Living

Accomodation

As we have done all throughout our time in Europe, we booked our apartment through AirBnB and paid $700 AUD (~$550 USD) for our 14 night stay.

Having no connections or previous experience in Warsaw, we elected to take the easy and secure option but of course, if you can afford the inconvenience, I’m sure the price of actually renting an apartment like ours would be remarkably lower.

Food & Drink

After almost two months living in South Eastern Europe, we were happy to find that Warsaw's food selection was a bit more diverse.

You may think that the food in Poland is all meat and potatoes but Warsaw is a world city and brings together all types of cuisines. We especially enjoyed eating Asian food again as the Asian food in Serbia left much to be desired.

As for the prices, I felt that Warsaw was a little bit more expensive than Belgrade or Sofia but this came as no surprise as Warsaw is much more of a modern and world-famous city.

Some examples of meals we had in Warsaw include:

• A 700g selection for a food court buffet = 24.80 PLN (~$6.82 USD)
• A lovely Hache steak at the 4th best dinner spot in Warsaw (according to Foursquare) = 36.90 PLN (~$10.15 USD)
• Asian Noodles with Chicken (pictured above) = 22 PLN (~$6 USD)
• Vegan curry and Rice = 24 PLN (~$6.60 USD)
• Two kebabs, chips and juice (from Kebab King) = 22.81 PLN (~$6.28 USD)
• A dumpling dinner for two including soup at Pelna Para = 95 PLN (~$26.14 USD)

Groceries

We've found grocery prices to be quite similar across the destinations we've covered in Eastern Europe. It's one of the truest aspect of cost of living as unlike AirBnB and restaurants, the prices aren't likely to be inflated by tourism.

The following is a few examples of prices we found at the big supermarket chain Carrefour.

*Using the current mid-market rate of 3.63 Polish Zloty to 1 USD

Phone Plans

Using Johnny FD's article on Warsaw as a guide, we had heard that the company Play was a good telecom provider and funnily enough, their SIMs were the only ones available when we arrived at the airport.

I was astounded to see a SIM card with a huge 30gb data limit for only 19 PLN (~$5 USD) but discovered after one week that the SIM card was only valid for 7 days, after which we had to visit the Play store in order to extend for an extra week for an additional 10 PLN (~$3 USD). For sure, it wasn't expensive but it was quite annoying and left me wondering, who needs 30 gigabytes of data for a single week?

Coffee and Alcohol

I've found that Alcohol is quite cheap anywhere in Eastern Europe and in Warsaw, you can grab a beer from the local store for only 2-3 PLN, which is no more than $1 USD. As for drinking out, the only beer I drank in Warsaw was by the park near Old Town and cost me just 13 PLN (or just under $4 USD).

For Coffees however, I noticed a little bit of hike from what I was paying in Belgrade and Sofia. I'm talking about $2-4 USD as apposed to $1-2 USD. Doesn't sound like a lot but it does add up over time if you're a regular coffee drinker.

Transport

For transport, you've got a range of options.

The most exciting to us is that Uber is here! It's been so long since we've been able to use Uber and it was great to have that convenience again. It wasn't too expensive either. Most trips cost us under 20 PLN (~$5.50 USD) with the exception of our 4omin drive to Modilin Airport which was about 90 PLN (~$25 USD)

The public transport system is also really well done. Trams, Metros and Buses are all at your disposal for the low rates of:

• 3.40 PLN (~$1 USD) for a 20min ticket
• 4.40 PLN (~$1.20 USD) for a 75min ticket, or
• 7 PLN (~$2 USD) for a 90min ticket

With plenty of other options for multiple days and weeks.

Finally, the most unique transport option in Warsaw is the bike sharing system. You can identify the stations by the Veturilo branding and all it takes is a phone number and 10 PLN (~$2.77 USD) to get started.

The bike sharing system is very cheap - maxing out at 7 PLN (<$2 USD) per hour - and once you have an account, you simply scan the QR code on the back of the bike with the Verturilo phone app and click Hire. When you're done, you just insert it into your nearest station.

Keep in mind however that the system can be prone to failures and I had my account blocked twice due to the system not recognising my return.

Lifestyle and Things to Do

At first sight, Warsaw looked like a very liveable city. Modern infrastructure, a lovely riverside and a safe cycling system make Warsaw an impressive modern metropolis but in terms of keeping occupied, Denise and I struggled.

Warsaw's Old Town is obviously a must-see but otherwise, we're not ones for museums and historical monuments. We felt that after one weekend in Warsaw, we'd seen all that we needed to see and Warsaw served more as a low-cost destination to cover time in-between Greece and Las Palmas.

In terms of lifestyle, you can obviously expect a pretty standard modern European lifestyle. The only things that make Warsaw a pain is the language barrier (not a huge deal) and also, just how spread out the city is, making it harder to get around.

Final Thoughts

Warsaw is a low-cost, modern European city with a mild climate and great internet.

Overall, I think my personal experience was tainted by choosing the wrong area to stay (near Google Campus' new 2017 location). I usually like to be walking distance from most of my necessities but unfortunately, I underestimated how big the city was and found myself feeling isolated, being stuck between two train lines and a construction zone in quite a boring residential area.

The centre of the city however, is home to many cafes, coworking spaces, restaurants and malls.

I obviously didn't get the full 'Warsaw experience' and I'd be willing to give it another chance with the right friend or guide but in terms of living conditions for digital nomads, Warsaw seems to offer a standard European city lifestyle. Which, depending on whether you're looking to do business or focus more on lifestyle, might make you either love or hate Warsaw.

Unfortunately for me, the experience was more sour than sweet.

Until next time,

Chris

In the Summer of 2017, my partner Denise and I met up with my Mother for a 10 day tour of Athens, Mykonos and Santorini and Mykonos was by far, my favourite part of the trip.

Watch this video below to see footage of each beaches

The Beaches are 'The Thing to Do' in Mykonos

Check any top 10 list on things to see and do in Mykonos and you'll find the island's list of many beautiful beaches.

Mykonos is the island for beaches.

Realising this, we hired a car for entire trip and went about exploring each of the beaches that our hotel recommended to us. These were:

Here's my thoughts on each of them

Mykonos Town

No trip to Mykonos is complete with a look at the Mykonos Town.

While it does have a small beach, it's more the place to walk the traditional stone streets, dine at the restaurants and check out the shops. A must-do cultural experience!

Ornos Beach

Situated right across from Korfos Beach, Ornus is nothing like its cousin across the strait.

We found the beach to be over-crowded and not exactly family-friendly. We decided to sit away from the beach and grab a coffee but we're interrupted by the loud noises of young party-goers driving recklessly around the bend. Yeah, definitely not the vibe we were going for.

Panormos Beach

Panormos Beach was just what we were after to end our second day in Mykonos.

It's a small beach with hills on either side and a beach club in the middle. To the left of the beach club is a rocky area to take the kids and further left on the hill is a lovely restaurant called Kalosta with great views of the beach. This is where I took the photo above.

Paradise Beach

Paradise Beach is the island's most famous party beach.

This is where all the big name DJs come to play and all the biggest day/nightclubs including Tropicana, Cavo Paradiso and Tru Paradise are located. In fact, this particular beach seems to have its on eco-system of casual food restaurants, hotels and bars, ensuring that you'll never have to leave the beach - if you don't want to.

I'm myself am a huge EDM fan but seeing as I was on a family holiday, we didn't stick around for long.

Platis Gialos Beach

Platis Gialos is the beach we ended up at while trying to get in to the exclusive and elusive Psarou Beach (coming up next).

It's a small and crowded beach but a lot more chill and family-friendly then say Ornos.

We decided to dine at the first restaurant we saw that offered parking as finding a parking spot in either of these beaches was quite the nightmare.

Psarou Beach

Now we arrive at the exclusive Psarou beach, the small cove which seemed to only be accessible through a small section of expensive hotels.

After an intense argument with one of the hotel staff, we decided to park at the next door, Platis Gialos beach instead and walk around the cliff. Suddenly, I was met with an impressive view of super-yachts parked in front of small beach filled with kabanas.

Within Psarou beach, you'll find the Mykonos Blu Grecotel Exclusive Resort as well as one of the world's most expensive beach restaurants called Nammos.

Super Paradise Beach

To me, Super Paradise Beach looked like a rip-off of the before-mentioned Paradise Beach.

Just like Paradise Beach, the beach club in Super Paradise (Pinky Beach) has a pile of empty champagne bottles in front of their sign but that is where the similarities seem to end.

On Super Paradise, there's just the one beach club and a concert venue on the hill that looks like it's about to host some washed-up 80's rock band. It took me 15 minutes to convince Mum and Denise to leave!

Elia Beach

Due to Elia beach being the closest to our hotel, we were able to visit Elia on two separate occasions.

On our first trip to Elia, we found it overly pretentious. There were broke girls trying to look cool drinking cheap soft drinks and Instagram models doing photoshoots on the beach with an iPhone - I mean come on! At least use a proper camera!

The second time however, we noticed a more family-friendly vibe which just goes to show that this beach might just be for everyone.

Ftelia Beach

Now for the chillest and most family-friendly beach we came across on tour of Mykonos beaches, Ftelia.

Ftelia offers the only long stretch of uninterrupted beach space out of all the beaches on this list, made commercial only by a small section towards the hill where the restaurant simply known as Ftelia Restaurant sit.

On this beach, the young hipsters and casual family beachgoers co-exist.

Kalafati Beach

Yet another chilled-out family-friendly beach on the island, Kalafati is the perfect place to grab lunch and look out at the beautiful Mykonos coast.

Kalo Livadi Beach

Finally, Kalo Livadi Beach is one of the more classy beaches on the island.

It's dominated by a beach club and restaurant called Nemo where sexy bikini girls welcome you in front of a tall mesh fence plus there's a few expensive shops to blow your money on a new beach outfit.

The girls did a little shopping while I took some footage and then we were off!

TL:DR

If you can't be bothered to read through my mediocre attempt at trying to describe these top beaches in Mykonos, don't worry! Here's my one line summary on each of them:

• Mykonos Town - Experience that Greek Island culture in an easy tourist environment
• Ornos Beach - Take some Instagram Bangers on the beach and drink at a crowded bar
• Panormos Beach - Eat a nice meal with a lovely view of the beach
• Paradise Beach - Go clubbing and drinking
• Platis Gialos Beach - Get a park to go to Psarou :P
• Psarou Beach - Show off your immense wealth (or your newfound debt if your broke - Mykonos might do that to you)
• Super Paradise Beach - Don't bother
• Ftelia Beach - If you just want to sit on the beach without the restaurants and clubs (maybe bring the kids as well)
• Kalafati Beach - Bring your family and have a nice meal
• Kalo Livadi Beach - If you wanna get classy but don't anyone to see you
• Elia Beach - If you can't decide on any other beach

Anyways, hope that helped.

Until next time,

Chris

Sofia has become a well-known city in the Nomad community (currently #36 on NomadList) due to it's low cost of living, modern infrastructure and position outside the schengen zone. Therefore, it became an obvious third destination of my Eastern European journey from Budapest to the Greek Islands.

Here are my thoughts on Sofia as a destination for digital nomads.

Cafes and Coworking

Much like Belgrade, Sofia has a range of different coworking spaces to choose from. Here's a quick comparison:

* Prices in Bulgarian Lev have been converted into Euros for easier readability (at a rate of 2 lev to 1 Euro)

Betahaus

The Sofia version of Betahaus is located in a rather inconspicuous-looking building, in the middle of a residential area, in South-East Sofia.

Betahaus is a European coworking network with locations all throughout Europe but this was my first exposure to the brand and I was quite happy with what I experienced.

The internet was fast, the seating options were plenty and the building comes with multiple facilities such as the cafe at the foot of the building.

Sofia Holistic Coworking Company (aka SOHO)

SOHO was actually the first space I checked out as it was the most centrally-located space on my list.

According to their website, 'SOHO combines comfortable and practical coworking space with a programme of cultural and social events for a community of creative professionals and entrepreneurs'.

In a city full of coworking spaces focused on tech, SOHO is the exception, providing a space that's more targeted at creatives and freelancers than tech teams.

I found it a comfortable place to work and it offered a nice work environment from the top floor, overlooking the area just east of Serdika.

Work & Share

Work & Share was recommended to me by my friend Vlad, a local Bulgarian who is studying at the adjacent software university.

It's a newly opened space on the outskirts of the city between the Joliot-Curie and G.M. Dimitrov Metro Stations and has quite a warehouse-y feel to it.

Puzl Coworking

Puzl Coworking space touts itself as 'arguably the best IT coworking space' and with the vision of the company's founder Tibault, is growing fast.

The current location is on the upper floors of an old industrial building but is expanding within the next year to the next door building and has plans to drastically increase the space's facilities to include its own restaurant, a market street and a third building in the next few years.

As for now, the building may be very old (as evident by the elevators) but Tibault and the team have obviously done a great job of making a modern space out of it. I found it comfortable and comparable to the other spaces I checked out.

From Barista Coffee and More (Cafe)

In terms of Cafes, Barista Coffee and More was the one that showed the most potential and when I visited the space, I was not disappointed.

It appears a common place to get work done as evident from the amount of laptops and the fact that I was approached by a subscriber who happened to be working there.

It doesn't have the speediest internet but for a short-term stay in the city, it's well-priced, well-located and well-equipped for remote work or study.

Cost of Living

In terms of our experience in Eastern Europe so far, Sofia seems to sit somewhere in the middle of Budapest and Belgrade for cost of living.

Let's run through some common nomad expenses.

Accomodation

For our two week stay in Sofia, we (once again) booked an apartment from AirBnB.

Having no connections or previous experience in Sofia, we elected to take the easy and secure option but of course, if you can afford the inconvenience, I’m sure the price of renting an apartment like ours would be remarkably lower.

Food & Drink

As a more modern European city, we found the selection of food and drink to be a bit more diverse than somewhere like Serbia but still very lacking when it came to Asian food especially.

Walking around the city, the two foods Sofian restaurants seemed to serve most often were burgers and pizza but there are of course, other options.

Here’s some examples of meals I had out:

• Breakfast for 2 at Rainbow Factory = 17.40 BGN (~$10.50 USD)
• A meat dish and a Salad at Happy = 15.98 BGN (~$9.60 USD)
• Sushi dinner for 2 at The Sushi Bar = 57.90 (~$35 USD)
• A big meat plate with Salad & Potatoes (from a shopping mall food court) = 8.90 BGN (~$5.40 USD)
• A burger and fries at Skaptoburger = 10.80 BGN (~$6.55 USD)

Overall, we found the prices quite comparable to Belgrade but when it came to Fast Food chains, the prices were way higher for some reason. We had McDonalds and KFC and both times it came out to 10 lev or more ($6+).

Groceries

I don't know whether it's because it took time for me to get used to the new currency but the super market prices in Sofia felt noticeably more expensive than in Belgrade.

When I decided to convert the prices into USD and compare item-for-item however, I found the prices to be quite similar.

Here are some of the prices I recorded across the two supermarket brands, Lidl and Billa:

*Using the current mid-market rate of 1.66 Bulgarian Lev to 1 USD

Transportation

Unlike in Belgrade where we took taxis everywhere, in Sofia we found it much easier to use public transport.

The route maps may not yet be on Google Maps - Moovit is the app to check metro, tram and bus routes - but the actual system of public transport is very reliable and exapnsive in Sofia.

The only times we needed to catch taxis were to and from the airport as we had our bags and couldn't afford to waste time. Both ways, the journey cost about 13 lev (~$7.80 USD) each.

As for the public transport system, a single journey costs only 1.6 lev (~$1 USD) but be warned! The buses only take coins and don't return any change.

Drinking Alcohol & Coffee, Phones and Gym

I'm lumping these categories together as these were all minor expenses but nethertheless, ones you might be concerned about.

Drinking alcohol as you might expect from Eastern Europe, is quite cheap, especially when drinking beer. Half a litre of beer at restaurant like Happy (mentioned early) was only 3.50 lev ($2.10 USD) and from the store, you can find bottles anywhere from 0.80 to 2 lev ($0.50 - $1.20 USD).

Coffee was just as expensive as it was in Belgrade but a little cheaper than Budapest at around 2.50-3 lev ($1.50 - 1.80 USD).

We got our phone plans from a provider called Mtel for only around $4 USD and it included 4G of data.

Finally for gyms, my friend Vlad helped me get setup at an awesome gym called Pulse Fitness and Spa for one week at only 4 lev ($2.40). The only issue was that it required a bus ride and walk of 20-40mins to get to the gym each time I wanted to go.

Gyms closer in the city include Silver Gym and Fitness Belize.

Silver Gym made me a price on the spot of 20 lev (~$12 USD) per week and when I asked about a month, they said anywhere from 50-80 lev (~$30-50 USD). This was unlike Fitness Belize who had a set price of about 6 lev per session ($3.60 USD) and of course, rates for monthlies as well (Sorry! I lost the price sheet!) .

BTW: You can see a tour of Pulse Fitness and Spa in this video.

Lifestyle and Things to Do

The list of top attractions in Sofia include the Cathedral Saint Alexander Nevsky, the Vitosha Mountain and the Vitosha Boulevard, most of which I came across during chance encounters of walking around the city.

If you like history, there are plenty of historical sites and museums in Sofia but to me, the biggest defining factor of the city is the Vitosha mountain, a sight that follows you almost everywhere you go. Unfortunately, I'm still yet to get a close-up of the mountain but if I was here in Sofia as a tourist, I would have definitely checked it out.

In terms of long-term lifestyle, it's a pretty standard European city. The metro is great for getting around, there's plenty of cafe/restaurants in the city centre and very good internet. Not much to complain about!

Final Thoughts

Sofia is a historical, yet modern Eastern European city that lies within the EU but not in Schegen zone.

As I mentioned in the introduction, what makes Sofia of interest to digital nomads is the low cost of living, the great infrastructure (including the internet) and the position outside the Schegen zone. All of which make Sofia a great option to spend more time in Europe while getting work done with a comfortable standard of living.

For me personally, there's nothing overly special that draws me to the city as there's no organised nomad community or networking opportunities. That being said, there are a bunch of digital teams flooding here for the excellent conditions as evident by the booming tech scene.

The only major downside to living in Bulgaria is the Cyrillic alphabet that they use in their writing, as apposed to Latin alphabet that we use in English. It's not a huge deal but it does make translating and understanding signage much more difficult.

Overall however, Sofia was great for a bit of time outside of the Schegen zone and good contrast to Belgrade and Budapest.

Until next time,

Chris