To fully understand how Shopify works, it is useful to look at some functions including JavaScript. It is an essential scripting programming language in the development of Shopify themes. Just like Shopify’s liquid code, JavaScript only runs on the server side. By understanding how JavaScript works on Shopify, there are a lot you can do. Typically, any front-end interaction you see on your Shopify store relies on JavaScript code. So in this article, we’re going to talk about how JavaScript works in Shopify themes.
Shopify: What is it?
Before we understand how Shopify works, let’s first introduce the platform. The Shopify CMS is a solution that allows you to create and manage an e-commerce site. Being a hosted platform, as soon as it is installed, you can manage everything from your web browser. That is, you won’t need to install Shopify on your computer before opening your online store.
In addition, Shopify works in SaaS (Software as a Service) mode and allows you to open a store without much technical knowledge. For this, you will invest in a monthly subscription. What remains interesting is that the platform offers 14 days of free trial. During this time, you won’t have to sign up for a package. Thus, you can test and configure your store, without losing the work done. Then you’ll take out a subscription starting at $29.
Depending on the package chosen, you will have the necessary elements to create and develop your online store. First of all, you get an ergonomic interface, as there is an emphasis on ease of use. Similarly, the platform offers a wide range of features as well as free and paid themes. Thus, you can customize your online store. In reality, Shopify allows you to change just about every aspect in order to get a store at your convenience.
How does Shopify work?
How Shopify works is very simple. This is done in different stages.
Find the product for sale
First, you will have to choose a product. The first step before opening a Shopify store will be to find a product to sell. For this, you need to identify a niche and know the products you want to sell. What to sell on Shopify? There are several strategies for finding winning products. You have tools such as Google Trends and others that allow you to find ideas for products to sell.
Moreover, it is not enough to find a trendy product and evaluate it. It is necessary to know how and where to obtain said products. Whether you’re dropshipping or not, it’s important to find a good supplier.
Of course, there are other steps that follow how Shopify works. You would have to study the competition, write your business plan, etc.
Choose a name for your store
Your online store is your business. It is therefore important that you find a name for it and choose an available domain name. Then, you will have to create a logo for your store. A logo allows you to quickly identify your company. The next step will be to choose a company status and you can register.
How Shopify Works: Create a Store from A to Z
Are you looking for free Shopify training in French? It’s possible to find a great training to build your Shopify store from scratch.
Register on the platform
To start the actual creation of your store, you will register on the platform. For this, head over to Shopify’s official website to get started. Then, follow the instructions. Generally, you will have to insert your email, then add personal information (surname, first name, address, city, postal code, etc.).
Then you will also have to give information about your activity. Enter them and validate them to continue. After that, you’ll go to the Shopify admin to start setting up your store. This space allows you to customize the look of your store. Then, you set up everything necessary for its proper functioning.
Choose a theme
This is a very important step to give the aesthetic look you want to your shop. Shopify offers a variety of themes (free and paid) carefully worked out by professionals. By choosing a theme, you have the option to make changes to it without necessarily coding anything. Of course, you have more customization possibilities with the premium versions. However, with a free theme, you can create a shop that looks professional.
At the same time, if you want to edit your theme in detail, then you need to understand how Shopify works and its HTML, CSS, and more specifically JavaScript. A section is devoted to this in the rest of the article. After choosing your theme, you will have to validate it and install it on your Shopify store. Note that afterwards, you can change the theme depending on how your business evolves.
Import products
Sign in to your Shopify admin and click “Products” in the menu on the left. Then, click on the “Add products” section to add your products. As you import your products, they will appear on your site. As part of dropshipping, you can use apps like Oberlo, Importify, Dropified, Modalyst, to import your products.
, CSS, and more specifically JavaScript. A section is devoted to this in the rest of the article. After choosing your theme, you will have to validate it and install it on your Shopify store. Note that afterwards, you can change the theme depending on how your business evolves.
Import products
Log in to your Shopif admin
From the Shopify admin, you can also access the “Orders” section. Once a customer makes a purchase, you will see an order in this section. You will capture the payment to receive money. Then you will ship the product. In the concept of dropshipping, you will pay your supplier to send the product directly to the customer.
Write descriptions for your products
Write captivating, compelling and concise descriptions for your products. This will only increase your sales. A quick way to get an uncertain visitor to buy your products is to put social proof in your descriptions. Don’t forget to draw the eye to your products through the attractive and quality visuals.
Create pages for your store
You can add pages to your store. To do this, go to the “Online store” section, then to “Pages”, and finally click on “Add Page”. Here are some pages to have on your store:
- General terms and conditions of sale;
- Privacy Policy;
- Legal notice;
- Refund policy;
- About;
- Contact us;
- Etc.
After adding content to your pages, save them by clicking “Save” and then publish them.
Add payment methods
Shopify offers several payment gateways (PayPal, Stripe, and many others). Thus, you can recover payments made by your customers on your store. Depending on the gateways chosen, the price and transaction fees will vary. Choose your processors taking into account the transaction fees charged, the types of cards accepted, offline payments, etc. It’s important to know that Shopify’s payment processor which is Shopify Payments saves you from transaction fees.
Set up shipping costs
This is an important step to avoid cart abandonment. By setting up shipping costs correctly, you gain more customers and make more sales. To do this, you can implement several strategies:
- offer free shipping (perhaps from a given order amount or quantity of items purchased);
- add carriers and charge the fees you are charged;
- offer fixed shipping costs;
- etc.
Install apps
In the “Apps” section, you have the option to add additional apps for Shopify to work properly. Shopify offers a multitude of apps to enhance the functionality of your store.
The last important steps to finalize the configuration of your store will be to go live, promote and generate traffic.
How Shopify works: What is JavaScript?
The fundamental concept that you need to understand before we can tackle JavaScript, is the difference between the front-end and the back-end. To give you a brief overview, know that the front-end code is what you can see and edit in your browser. So when you use code development tools, you’re able to see CSS, HTML, and JavaScript in your browser. Thus, you can edit them instantly. In this case, Shopify’s liquid code from the background code never makes it to the browser.
How Shopify Works: Understanding JavaScript
It is a language that allows you to manage the intelligence part of your web pages. With JavaScript, you can make your pages more active and easier for people to understand. So, if you want to improve your web pages and offer an easy-to-use site, you must use JavaScript. So you can use it to insert or calculate a value, improve the user interface part or others.
How Shopify works: How does JavaScript work?
JavaScript works in a set of three elements: HTML, CSS and JavaScript. The entire source code page is made in HTML. This helps illustrate everything that happens on the page. CSS is everything that will make the beauty of your website. It decides how this or that element will appear on the page and thus allows you to customize your page.
Now that we’ve laid the groundwork for JavaScript, let’s talk about how it works. So, as with any website building project, you can include an open and close script tag wherever you include HTML in your code base. Another possibility is to store it in a separate JavaScript file and include it if necessary. Also, if the execution of JavaScript is based on an event, you can insert it directly inside an HTML element. It should be noted that this method is not a very common option.
First possibility
When you take for example the Start theme and enter “Actions” and click on “Edit code”, you can at least find the first two examples. So what you’ll be looking for, as far as the first example is concerned, is any .liquid file that contains HTML. So, all the files you’ll see should contain a mix of HTML and shopify liquid. If you look in “theme.liquid”, scrolling down, you will find that there is an opening script tag and a closing script tag. Inside, there is JavaScript. By way of illustration, we can see it like this: <script src=”javascript.js”></script>. So you can practically put JavaScript anywhere you can put HTML in your theme files.
Second possibility
Another way to insert JavaScript is to have a dedicated JavaScript file. For example, in the DEBUT theme, you can see this in the Assets folder. So when you scroll down to “theme.js”, you will be able to see a file filled with JavaScript. Now, how to include this JavaScript in your current code base. It’s pretty simple. Just go to the search bar and search for “theme .js”. You will then see a script tag that loads an external resource. The theme file.js, looks a bit like this:
<script src” ” { { ‘ theme.js’ | asset_ url }} ” defer” “defer“></script>
Remember in your code base, to use the name of the file itself and not the full URL. So these are two ways to use JavaScript to understand how Shopify works.
Third possibility
The third possibility, less common by the way, is to insert a JavaScript function into an event handler on the element itself. For example, if you go to “product.template.liquid”, and click preview, you will go to your store. Now, if you have products in the “Catalog” section, go to this option and then select a product. Then, right-click and tap on Inspect. In the paragraph that will appear, you will select this part: “product-single_description”. So you’ll go and look for this in your code base. Then you can put an event handler directly on the item. So this should be very familiar to you if you already know how to use JavaScript in another project. It’s pretty much the same on Shopify.
You just need to know where to include the external JavaScript files. So those are the three ways you can insert JavaScript into your Shopify theme. Similarly, as we said, wherever you insert HTML that is on one of these “.liquid” files, you can also insert JavaScript. That’s how JavaScript works on Shopify.
How Shopify works: What to remember?
Shopify positions itself as the service that allows you to very easily create an e-commerce or dropshipping site. Understanding how it works is very easy and goes through several steps.
