The Podcast
Help the Podcast
Transcript
Hello. Scott Austin here. In this episode, I want to de-mystify some of the technical terms that may hear related to your Shopify store. My goal is to give you a little bit better understanding of the technology around Shopify and the various pieces work. How I'm gonna do this is just walk through step by step what is going on when a customer goes to your online Shopify store. As I bring up a new concept or term. I'll try to explain it right then and there. So let's start with a customer sitting at a web browser.
Now web browsers are applications that most people are probably familiar with. Browsers exist on every computer -- PC, Mac, Chromebooks and mobile phones these days. Common browsers are Internet Explorer by Microsoft, Chrome by Google, Safari by Apple and Firefox. And these browsers what they do is they collect all the files for a web page that we're going to talk about here in a second and then render them on the screen in a certain way, that is the design of the webpage you are looking at. So a browser is an application that takes a bunch of files from a web server and renders them on your computer or phone.
So, your customer goes to their web browser and types in a URL. URL is an acronym for Uniform resource locator. A URL starts off with a domain like JadePuma.com, and then it can also have a file or a path after that like JadePuma.com / pages / about us. Now a domain is unique on the internet. Only one person or company can have ownership over any given domain. So the URL is a customer-friendly address on the internet. It is customer-friendly because it is in text that people can easily understand and remember. And then what happens when your customer types your URL into the browser is that the browser goes off and looks for the DNS entry for your domain. DNS is an acronym for domain name server. So when the customer types in JadePuma.com / pages / about us, the first thing the browser needs to do is understand which server on the internet to talk to with respect to the JadePuma.com domain. So the browser goes off to wherever your DNS server is and says, hey tell me what server to go to for JadePuma.com.
Your DNS server needs an entry for the different uses of your domain. Different uses can be email and web servers. And you can host content on more than one server for different sub-domains that you are using. In other words, you can have more than one website under your domain. For example, there could be a website for JadePuma.com, and a different website for blog.jadepuma.com and a different website for podcast.jadepuma.com. In this example, blog and podcast are sub-domains of JadePuma. Now your DNS server needs an entry for each of your domains and sub-domains. DNS entries are pretty simple. We won't go into the details here, but basically they associate a domain, the customer-friendly text like JadePuma.com with an IP address of the server for that domain. IP is an acronym for Internet Protocol. And an IP address is a set of numbers that routers on the internet use to find a given server. In summary, a DNS server is going to convert the customer's inputted URL into a server IP address. And your DNS server is most likely hosted by your Domain Registrar. A domain registrar is the company you registered your domain with. Like GoDaddy.
There's one last thing to mention about URLs and that is SSL. All Shopify stores operate under SSL. SSL is an acronym for Secure Sockets layer. Its the S in the HTTPS at the start of your store's URL. And when a web browser is connected to a server under SSL, a little padlock shows up in the browser next to the URL so the customer knows that the connection is secure. A secure connection is one that is encrypted. So if anyone was to get access to these encrypted files as they travel from the server to the browser, they would not be able to read them. This makes it safe to transfer things like credit card numbers across the internet.
So the server-side of things for your store is hosted by Shopify. And a server is just a computer running software that is specialized for servers. Your store is hosted on one of Shopify's servers along with a bunch of other Shopify stores. And actually your store is on a set of servers, not just a single server. That set of servers is called a cluster. Server clusters are used for redundancy purposes, so if one of the servers in a cluster were to fail like let's say the hard drive died on it or it has a bad connection or bad software, whatever the reason. If that one server was to fail it can be dropped out of the cluster and you and your customers don't know the difference as the cluster keeps running smoothly.
So your Shopify store is on one of Shopify's servers which happens to be in a Google Data center.
So the customer. Types in the URL to their browser. The DNS servers look it up and say oh that's located at this IP address over here and then the browser makes a query to the server cluster and says, hey deliver me the web page at this URL. And then what the server does is what is called server-side processing. The server then says alright I know what to do. In the end, what the server is going to do is deliver a set of files to the browser. This is called client/server architecture. The server side of things is up in the Goggle cloud on the Shopify servers the client side of things is all precessed in your customers' web browsers. The server has to tell the client what to do and it does that by sending it a whole bunch of files that the browser uses to render the page. The way the server does it is to go through a series of steps. The first thing would be the Shopify code in their platform that we never see or edit that the Shopify developers have put together. This code has a bunch of logic at the Shopify level. And then there is your theme which is something that you purchased from a theme developer or got one of the free themes from the Shopify theme store. Your theme is also a series of code. That code happens to be in a Language called liquid. Liquid is a scripting language that is used in Shopify themes and in other services on the internet. Any developer or Shopify Expert who is going to edit your Shopify theme is going to be editing liquid code. And then there are also apps that you have added to your store from Shopify's App marketplace. Apps give incremental functionality to your store that is not provided by Shopify or your theme. A great example is customer reviews. Reviews are not built into the Shopify platform. So if you want reviews in your store, you'll need to add a reviews app.
So back to our Shopify server. The customer's browser is saying hey Shopify server gives me the code for this page. That code is a set of files. The main file that it's going to send down is the HTML code for the page. So Shopify is going to consolidate all the different information given to it by its own code, the code from your theme and the code from all of the apps. The Shopify server renders all of that logic into an HTML file that is the basic structure and content for the requested page.
So remember we talked before about how your Shopify theme is written in liquid. Well, none of that liquid code ever gets down to the browser. A web browser does not know how to interpret Liquid. So the server is translating that Liquid code into an HTML file for the browser. Here's an example of a Liquid code works. In theme's code for a product template, there's probably Liquid code that says product.title. The Shopify server sees that product.title code and looks up the title of the product in the Shopify database and puts that text string into the HTML to be delivered to the browser. And all of the other code from the various apps and the Shopify platform are rendered into the base HTML file for the page. The Shopify server sends down this HTML file to your customer's browser, but it's also going to have links in that HTML file to a whole bunch of other files that are needed to render this web page. In today's world, a web page is way more complex than just a single HTML file. I actually built my first website in 1994. Back then, every page was just a single HTML file and whatever images were being presented. Today there are dozens and many times hundreds of files involved in just a single web page. And the base file is HTML, which stands for Hyper Text Mark-up Language. The HTML file is basically the content of your web page.
One of the other important pieces of that package that's going to be delivered to the browser is called a CSS file which stands for cascading style sheets. A CSS file is basically telling the web browser how to format the content in the HTML page. For example, you may have on your web page, a product title. Add its in an H1 tag, which means its a top-level heading for that page. By the way, that H1 tag was code from the theme.
Well, it's the CSS file that says, hey if the tag for a line of text in HTML is H1, then I want you to render that text in 35 point Helvetica Bold. That connection of HTML tags to CSS styles is happening in the browser. So it is client-side processing.
So you've got an HTML file and a CSS file and you actually have multiple of them. A web page might have five or six or a dozen or more HTML files and CSS files that are used to bring the page together. The reason for that is you've got all sorts of web services out there adding value to the whole process. So you might have Shopify saying or your theme says here's one or multiple CSS files that I'm going to use when rendering this page. But you can also have a CSS file, for example for your review app so that the formatting of reviews get done through that review apps CSS file.
And then another really important file type that is used a lot in our stores is JavaScript. An HTML file is a static file that the browser renders and shows to the customer. But that file can't do anything else. There's no logic, no code behind it -- it's a static page. Yet we know that a lot of our websites are interactive. If you hover over an element on a page something happens, or if you click on an element on a page a bubble pops up. That interactivity comes from javascript files.
So JavaScript is a language that gets interpreted by your browser it's client-side code. All the server does is deliver the JavaScript file, it's the web browser that is saying all right. I've got this JavaScript file, now what am I going to do with it. And most of the JavaScript logic happens after the HTML page has been rendered through your browser by the HTML and CSS files that are presented to it. And then any interactivity that the customer can have with the page comes from that JavaScript logic that is being interpreted by your customers' web browser. JavaScript is used for more than giving the customer interactivity with a page. Here's another use of JavaScript. Let's say your Shopify store has the concept of wholesale customers that get wholesale pricing of your products. Well Shopify, at least below the Plus level plan, does not support the concept of wholesale pricing. So you'll need to add an app for that functionality. And what happens is that Shopify will deliver the price for a product in the HTML. And then after that price gets rendered in the HTML in the customer's browser. The wholesale pricing app's JavaScript will come along and change the price from the Shopify price to the Wholesale price.
And here's a good time to introduce another acronym. This one is API which stands for Application Programming Interface. When we have the Shopify servers analyzing the code and rendering the HTML, the server has access to the Shopify database. That's how in the earlier example, the server turned the liquid code product.title into the actual title for the product. Well, our wholesale app and any other app that doing its calculations client-side in the browser can't benefit from the Shopify server's direct access to the database. So these apps use APIs. APIs allow apps to read, write and edit information in the Shopify database.
Now HTML files are static and interactivity of the page is created by JavaScript. Another way that pages can be interactive is AJAX. Ajax stands for Asynchronous JavaScript and XML. AJAX is not a programming language but a way that JavaScript is used to allow a web page, say your Shopify Cart, to interact with the Shopify server without having to re-load the page. This allows the page to respond more quickly to changes made by the customer. For example, customers can adjust the quantity on items in the cart and total cart price will be updated through AJAX without a full page reload.
So the next thing I want to talk about in this realm right now of a server delivering code to the customer's web browser is some concepts of where data gets stored. Let's start with caching. There are different types of caching. The first caching we'll cover is called CDN. And CDN is an acronym that stands for content delivery network or content distribution network. what this caching is happens on the server-side. Shopify has servers located in the Google cloud. they are probably in multiple data centers. Let's just imagine a customer of your store in Australia. So when they go to your store, they are talking to servers in North America. Even though things are moving at the speed of light, it still takes a bit of time to get from Australia to North America and then back again. So what a CDN does is cache a lot of those files used in your store. Think about it as forward deploying a lot of those files closer to customers than the servers are.
For example, let's look at your banner image. And images are a great example of where caching and CDNs become very useful. So a CDN will take all of your images and push them out from the main servers to all of the CDN locations. And Shopify has CDN locations all around the globe. So when your customer's browser requests all of these different files, the browser will get them from the closest CDN. So CDNs are server-side caching.
Another type of caching is local caching. That is caching done on the computer or phone by the web browser. Here's how it works. Let's say a customer to your store is on a page with ten images. Those ten images get added to the customer's cache. And then the customer goes to a second page. Let's say that the 2nd page has 8 images, four of which were also on the first page. The browser is smart enough to say, hey, wait. I've already got a copy of those for images in my local cache. I'm not gonna call out to the internet to go grab that file. I'm gonna use the file that I've got here in my local cache. So you've got server-side caching done by Shopify and their CDNs and you've got local caching done by your browser. You get the benefit of both of those without doing anything, they are built-in.
Now here's one thing to note about local caching. Many stores look at their site speed. And site speed tools do not measure the impact of caching. They assume that the browser has never been to your store and has not cached any of the files needed for the web page. And for files specific to your store, that a good assumption - most customers to a given page are probably there for the first time. But one of the heaviest files affecting site performance is the YouTube code to stream videos. If your page has a YouTube video, the site speed tool will assume the browser does not have the YouTube code, which is a big file. But in reality, YouTube is so ubiquitous that your customer probably already has the YouTube code in their cache.
Let's move onto the storing of information. Data can be stored when the customer does something in your store like add a product to the cart or create an account. The information can be sent back to the server to be stored in Shopify's database. And much of the data does get stored in the Shopify servers. Things like customers and orders. There's also a time and place for storing the information locally with the browser. This local storage is done in files called cookies. Your store creates a lot of cookies in your customer's browser. These cookies are happening by apps and services added to your store. For example, if your store has Google Analytics, they create a cookie that gives your customer a unique ID, so when they come back next week or the next day that cookie says, oh we've seen this person before. That way, Google Analytics knows that this browser today is the same browser as yesterday and counts them as the same user.
A common Shopify use of cookies is saving the customer's cart. When customers are adding products to their cart that gets stored in their local cookie. So if they come back tomorrow, the cart will still contain the products they added. But if the customer were to come back on a different browser or device, that browser or device does not have access to the original cookie. The result is that the customer's cart would be empty.
Next, I want to cover some terms used in the design of your store. Let's start off with UI and UX. UI stands for User Interface and UX stands for User Experience. They're confusing at first but here's an example to illustrate the difference. Let's say your looks great and it's easy to understand and it's highly functional. It's clear to the customer how to make an educated purchase decision. This is great UI. The User Interface is good. Now let's say that your store sells shoes and the customer wants a particular shoe in the color black and the size 13. If your store doesn't have that particular variant, that would be a bad user experience. So, great UI doesn't necessarily mean great UX.
The next terms to talk about as we're talking about design is the concepts of responsiveness and mobile-first. Responsive means that your website's layout changes according to the size of the screen that it is being viewed on. For example, on a collection page. There could be 4 products per row on a desktop, but that gets reduced to 2 per row on mobile. Responsive means that your store changes its layout according to the screen size. Years ago, we actually used to make separate websites for desktop and mobile phones. But today, because of responsive web design, we can have one website for both screen sizes. Most of the themes in the Shopify theme store are good for responsiveness.
The next concept is mobile-first. The first time I heard of the concept of mobile-first was around 2011 when mobile phones were becoming increasing popular as web browsing devices. Today I have many clients who have more than 80% of their traffic on a phone. And most stores are over 60% of traffic on mobile. Because more than half of your customers are on mobile, you should design for mobile-first. What I do with my clients is when we review a website design that I'm working on for them is we only look at it on the phone. That's because you can make an absolutely beautiful page on a desktop, let's talk about a product page for example, with lots of really interesting compelling information. But when you put that on to the phone, it becomes much more confusing for the customer. So if you design that product page and optimize it for the phone experience, you may not have some of those bells and whistles you can add to a desktop experience but that's good mobile-first design.
So that's my quick walk-through of the glossary of terms for Shopify technology. I hope that this was helpful for you.
Thanks for listening.