How to edit HTML Code on Shopify?

Hailey
Hailey January 09, 2019

Share:

Welcome to this article about how to edit HTML in Shopify. In the beginning, I will briefly introduce what HTML is and its importance to your online shop.

In simple terms, HTML stands for HyperText Markup Language used to create a web page, on a website may contain many pages and each page is referred to as an HTML document.

HTML is a hypertext markup language, so it will play the role of building hypertext structure on a website or declaring digital files (media) such as images, videos, music. It can be said that if the website is a complete body, HTML is the skeleton of the body. Therefore, editing HTML for your online store on Shopify is extremely important. Below is a detailed tutorial to help you do this.

How to edit HTML Code on Shopify

1. What programming language does Shopify use?

Programming languages are considered powerful supporters for web designers and web operators. This is no exception for online shop owners of the Shopify e-commerce platform. To be able to build a store and develop it on Shopify, you should know about the Shopify uses programming language. Visit our post What programming language does Shopify use? now to understand more about these programming languages.

You might be wondering why do you need more than one programming language? I am very pleased to explain this. Each programming language has its own strengths and meets a certain array. They give the best performance but cannot perfect them all. It is a simple explanation to help you understand why there are many different programming languages. Therefore, you need to be knowledgeable about the many different programming languages that Shopify uses in order to optimize your store. This will contribute a significant part in building customer trust.

2. How to edit HTML and CSS files In Shopify?

Step 1: Go to Theme

Make sure that you’ve logged in your Shopify account. Afterward, tap on the Online Store section on the left of your admin page and go to Theme.

How to edit HTML in Shopify

Step 2: Select Edit code

You are in the Theme page now. There is a list of all the themes you have. What you need to do is tap on the Actions button next to the theme’s name you want to edit. Select Edit code in the drop-down list.

How to edit HTML in Shopify

Step 3: Choose the file

There are lots of HTML and CSS files on the left sidebar. Take a view of them and choose the file you expect it to be edited.

How to edit HTML in Shopify

Step 4: Click Save

After you complete making changes to the file, click Save to save all of them.

How to edit HTML in Shopify

Step 5: Go to Add a new asset

Besides editing an HTML/CSS file, you can add a new one also. In order to do this, you go to the Assets directory and select Add a new asset.

How to edit HTML in Shopify

Step 6: Create a file

You will have two options to create a file:

  • If you’ve already had a file on your computer and want to upload it. You can choose to Upload a file and tap on Browse. A new dialog will be shown to let you select the file from your computer. Afterward, click Upload asset to have it done.

How to edit HTML in Shopify

  • If you only need to add a blank file, choose Create a blank file and name the file. Then, select the file’s type and click Add asset.

How to edit HTML in Shopify

3. Edit Shopify theme using HTML and CSS

One thing you should keep in mind is that you should save backups of the theme you edit.

3.1. Custom CSS

This is one of the simplest and most effective ways to help you make adjustments. Custom CSS is the least damaging method to your theme. So, choose this option if you need to adjust the color, font, spacing, or size of elements that cannot be customized using the theme’s options panel. Below are some simple steps for you to follow.

Step 1: Go to Theme

First, tap on the Online Store section on the left of your admin page and go to Theme.

How to edit HTML in Shopify

Step 2: Click Edit code

You are in the Theme page now. There is a list of all the themes you have. What you need to do is tap on the Actions button next to the theme’s name you want to edit. Select Edit code in the drop-down list.

How to edit HTML in Shopify

Step 3: Go to Assets

From the left sidebar, scroll down to find the Assets directory and tap on it.

How to edit HTML in Shopify

Step 4: Select the styles.scss.liquid file

Take a look at the styles.scss.liquid file in the Assets field. Afterward, click on it. The file will be open instantly. What you need to do now is scroll down and add your custom CSS code to the end of this file.

Step 5: Select Save

Don’t forget to select Save before you leave.

3.2. Customize code and template modifications

Unlike the Custom CSS method, this method will help you make customizations of more complex things like adding a block of text or functionality. To use this method, you need to do the following:

Step 1: Go to Edit code

Firstly, you should go to Edit code as described above to view all the files.

How to edit HTML in Shopify

Step 2: Click Add a new snippet

Afterward, access the Snippet directory and click Add a new snippet.

How to edit HTML in Shopify

Step 3: Name your snippet

What you should do first to add a new snippet is typing a name for it. There is a tip for you to create an easy-to-use and consistent name. You should use lowercase letters and connect them with dashes instead of spaces. Furthermore, use the descriptive name to know which snippet is.

How to edit HTML in Shopify

Step 4: Tap on Create snippet and fill it

In this step, you need to tap on the Create snippet button. Then, enter any HTML code which can include Liquid tag in the blank file you’ve made.

How to edit HTML in Shopify

Step 5: Locate the file

What you need to do is locate the Template folder. Next, locate the file that controls the type of page you expect to add this custom code to. For example, let look for the product.liquid file if this custom code will be added to your product page.

Step 6: Enter the custom code

Click on the file to open it. Take a view of the code on the right of the screen. Then, decide the best location for the custom code. After you’ve placed the custom code, add the following code next to it:


{% include 'snippet-name' %}

Next, replace the snippet-name with the name in step 3.

7: Click Save

Finally, click save to finish your work. You can preview your work to see if it meets your requirements.

3.3. Edit your theme code

If you already know how to edit HTML in Shopify, you may want to learn how to edit theme code. Because theme files also include HTML and CSS and editing the theme code will make your store more perfect and more advanced. Come to our post How to Edit Shopify Theme Code to view a detailed guide about it.

Read more: How to find out which theme a website is using

Final words

In conclusion, this article provides you with the way to edit HTML in Shopify quickly and easily. More than that, to help you make detailed changes to your online shop, the editing Shopify theme using HTML and CSS section is extremely helpful. I do hope that you feel interested in this post and make your store the best.

Themes

Shopify Theme Detector- Find out what Shopify theme a website is using Build a Shopify theme from scratch About Us page templates & examples Install Shopify theme Shopify blog featured image size Add Products to Drop-down Menu in Shopify Add Sliders in Shopify To Add A Quickview to Shopify Store To add affiliate links to your Shopify store How to Add Fonts to Shopify Theme Add About us page in Shopify Remove Powered by Shopify from your Shopify store Create a Landing Page Backup Shopify theme What Programming Language Does Shopify use Put Shopify store Under Construction Edit Checkout Page In Shopify Add Adsense to Shopify Change Shopify theme Remove Shopify Payment Icons from Store Footer Shopify Payment Icons Add a Logo to Shopify Store on all page Customize Shopify Themes Add Shop Now Button in Shopify Store Edit HTML Code Add Social Media Icons on Shopify store Edit Theme Code Change Language in Themes Register a Google Maps API Key Add Favicon Create Translation for Theme Choose Language for Theme Add Alt Text to Theme Image Edit the Code Templates for Password Page Hide Store Name on Password Page Hide Footer on Password Page Remove Content From Dynamic Section Add Google Maps API Key to Theme Edit Password Page Settings Remove Password Protection From Online Store Show Dynamic Checkout Buttons For Some Products but Not for Others Publish Themes from Theme Editor Publish Theme from Admin Add Password Set the Social Sharing Image Remove Dynamic Sections Rearrange Dynamic Sections Hide Dynamic Sections Add Dynamic Sections Add Google Translate Widget


Hailey
About Author: Hailey
I'm a detail-oriented, honest and hard-working of Shopify Expert, ready to work with you to find solutions to help you start your business or grow it. We offer fast deliveries without compromising quality. Fast and effective!
Recommend for you
Image Description
SEO Suite [FREE]

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Proofo - Social Proof [FREE]

Use Social proof to boost sales

Learn more
Image Description
Size Chart [FREE]

Stunning size guide for great shopping experience

Learn more
Image Description
Free Shipping Bar [FREE]

Increase customers’ shopping cart size with free shipping offer

Learn more

Comments for Edit HTML Code



People also searched for

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up