Home Web DevelopmentHTML How to add HTML, CSS, and Javascript to Shopify

How to add HTML, CSS, and Javascript to Shopify

HTML, CSS, and JavaScript are all front-end web development languages. If you have a website, it will be supported by these languages in one way or the other. Shopify is an e-Commerce platform for all businesses. It is a subscription-based subscription that allows anyone to set up an online e-Commerce store and sell their products. For example, let’s say you need an online business to sell clothes. Shopify allows you to create an online store, add images and their prices and start selling. With Shopify, you can also build your store offline.

As discussed in what HTML explained with examples, we can also say that HTML is Hypertext Markup Language that creates static web pages displayed on the World Wide Web. CSS is a Cascading Stylesheet that describes the presentation of the webpage by adding styles that make the web pages attractive and appealing to the human eye. Lastly, as described on How to Add and Link JavaScript to HTML, JavaScript is a high-level programming language that makes web pages dynamic and interactive.

In this tutorial, we will discuss how to customize your Shopify and add in HTML, CSS, and JavaScript. But before we dive in, let’s look at a brief description of the pros and cons of Shopify.

Pros and cons of Shopify

Pros of Shopify

  • The admin dashboard is much detailed – Shopify allows you to get all reports on how your store is performing. These reports may include; the number of orders, best-selling products, and also the real-time view of your website visitors.
  • Free features – Although Shopify offers paid subscriptions. They offer a free theme in your store that you can fully customize and add in HTML, CSS, and JavaScript. There are also free images, free fonts, and color themes that you can use to make your store look better and more powerful.
  • Tons of apps and low barrier to entry – Spotify has so many apps in its app store that are free to use. With Shopify, it’s easy for you to start your dream business and start selling no matter where you are.

Cons of Shopify

  • Stiff learning curve – Making your website powerful on Shopify is really stiff. Making the business profitable can also take you a lot of time hence before you figure out how to make this Shopify store profitable will need a lot of experimentation.
  • Does not guarantee success – Though Shopify guarantees the creation of an online store which is easier than building from scratch, it does not guarantee the success of your store. Success is in your hands and hence at times can also be hard to maintain.

Now, if you do not have an account, you Sign up for a 14-day trial on Shopify here. You will be asked to enter your email, a preferred password, and the name of your store.

Start-14-day-trial
Start-14-day-trial

The next will be for you to input your online store details. Click on next, and you will be redirected to your store dashboard.

Adding HTML, CSS, and JavaScript on Shopify

HTML forms the structure of the webpage; hence you may realize that adding HTML might be a little different from adding JavaScript and CSS. With CSS and JavaScript, you can add an external file and then link it to the main HTML file. Shopify files have a ‘.liquid’ extension though this might depend on the version.

Steps

Step 1: Sign in into your Shopify dashboard.

First of all, head to Shopify sign-in page and input your Shopify address followed by the password to log in.

shopify-sign-in-page
Shopify-sign-in-page

After entering these details, you will be able to have full access to your admin back-end, as shown below.

Shopify-admin-backend

Step 2: Accessing the theme folder

In the next step, click on ‘Online store.’ This will open a list of option menus. Go ahead and click on ‘Themes’ to make it highlighted. Then proceed and click on ‘Customize.’

Clicking-on-themes-and-customize
Clicking-on-themes-and-customize

Step 3: Editing code

After clicking on customize, a new window will open. On the left menu at the button click on ‘theme actions,’ a new pop-up will appear below. Go ahead and click on the ‘edit code’ option.

Clicking-on-theme-options-and-edit-code
Clicking-on-theme-options-and-edit-code

Step 4: Opening the Layout folder.

After clicking on ‘edit code,’ a new window will open with the theme folders. The main file of the theme is the ‘{/} theme. Liquid.’ This holds the home theme code. Go ahead and click on it, and a code will be generated on the left.

Cicking-on-theme-liquid
Clicking-on-theme-liquid

Step 5: Adding HTML

To add your own HTML code, go ahead and locate the body starting tag. From here, you can go ahead and insert your HTML code. The HTML code should be between the body opening tag and closing tag. i.e <body>Add HTML</body>

Adding-HTML
Adding-HTML

Step 6: Adding CSS and JavaScript

We will add CSS and JavaScript externally. Under the Asset folder, you will find a list of various files, that is, JavaScript and CSS. The main CSS file is the ‘{/}theme.css’ that holds your CSS files. You can add any CSS at the end of this CSS code and save it. The main java file is the ‘{/}theme.js’. You can also add your JavaScript here.

Adding CSS

To add your own customized file of CSS. Click on ‘create a new asset.’

Clicking-on-asset-folder
Clicking-on-asset-folder

Go ahead and browse the file if it already exists on your PC, or you can ‘Create a blank file’. Then, provide the file’s name and select the extension the click on ‘Add asset.’

Saving-your-file
Saving-your-file

In this pop-up window, you can upload a file from your computer directly by using the browse button or create a file in the admin panel directly. After you are done, it will be possible for you to add your customized codes.

Adding JavaScript

This will follow the same procedure only that at this time file extension of your file will change from .css to .js

Adding-Javascript
Adding-JavaScript

The next step is to add the added assets to your theme.

Adding Assets to theme

After creating these two files, you can now go ahead and add them to your theme to make sure your customized codes are loaded. First, go to the layout folder, and under the main theme file, i.e., ‘theme.liquid’, scroll down to the body closing tag. Just before that, add this code to add your JavaScript.

{{ 'script.js' | asset_url | script_tag }}

To add the CSS file, input this code:

{{ 'style.css' | asset_url | stylesheet_tag }}

Conclusion

HTML is the building block of a website. Adding CSS and JavaScript makes the webpage improve appearance and interactiveness. Every site including CMS(Content Management System) uses HTML code. In this tutorial, we have covered how to add HTML, CSS, and JavaScript to Shopify. It’s also a good habit to add comments to let other people understand your code and make your code easier to read for future reference. Adding CSS and JavaScript at the end of the main theme files is also possible only if you update your theme. All your customized code might get wiped out; hence it’s safest to have them on a different file as we have done.

You may also like

2 comments

Mohamed Mohammed August 3, 2021 - 4:49 am

A very Informative Article

Reply
Roddy Mandel August 4, 2021 - 4:36 pm

Awesome work

Reply

Leave a Comment

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More