How to Edit Shopify Theme Code

If you want to make a detailed adjustment for your online shop, you can edit Shopify theme code, which includes HTML, CSS and JavaScript files. Coding is quite complicated and it can affect the whole page of your store that it is recommended that you should know about it before practicing these steps. For more information, follow this topic to know how to edit Shopify theme code.

Related Posts:

To Edit Shopify Theme Code

Step 1: Head to Themes

Sign in to Shopify account and click on the Online store which stays under the Sales channels section. Normally, the system will automatically head to Themes after selecting Online store then you can move on to the next step.

edit Shopify theme code

Step 2: Edit theme code

There are two smaller categories in the Themes which are Current theme and More themes that you can pick one theme from these. Next, press on the Action beside your chosen theme and select Edit code which is near the end of the drop-down menu.

After that, the editing page will appear with the menu on the left and a space showing the adjustment next to it. If you want to expand the code editor, you can click on the icon on the right of the screen, which is below the Expert theme help. Meanwhile, if you want to minimize it to the original size, you can choose the collapse icon at the similar place as the former one.

edit Shopify theme code

To open a file, press on its name in the directory on the left. You can open and adjust more than one file at the same time. If any file is edited, there is a small dot will appear next to its title in the list then you can track which one is recently changed.

After you complete your adjustment, choose Save to store it. However, if you want to reverse back to the previous version, click on the Older versions and select one from the drop-down list. Once you pick your version, remember to press Save to record your change.

edit Shopify theme code

When you edit the theme code in the fullscreen mode, you can turn the page into dark color if you want by clicking on the Dark at the right end of it.

edit Shopify theme code

To edit Shopify theme code on iPhone & Android (Click here)

  • Step 1: Tap Manage themes Open the Shopify app on your phone and go to Store at the bottom bar. Next, choose Online store which is under the Sales channels and Manage themes respectively.

    edit your theme code edit your theme code
  • Step 2: Select Edit code Decide a theme that you want to adjust in the list of Themes and tap on Action. A drop-down menu will appear then select Edit code afterward. You will see a directory of theme files and a space which is for viewing and editing the files next to it. When you clicking on a file's name, it will appear on the mentioned space which is called code editor. You can open multiple files at the same time and select on each tab to change between the editing pages. Be noted that a file with a purple dot next to it is the one that had been edited. Moreover, you can bring your old version back even after saving by pressing on Old versions and pick the one which you want to apply then choose Save. You can also maximize the size of the working space by tapping on the expand icon which is below the Expert theme help. If you want to back to the normal page, press on the collapse symbol at the right side. In the fullscreen mode, you can change the color scheme between Dark and Light by selecting one at the bottom of the page.

Conclusion

In short, this writing has provided you with the instruction on how to edit Shopify theme code for both laptop and smartphone use. There are just two steps in total that it will not take much of your time to practice. Therefore, I hope you find this post interesting and helpful for you. You can also read more Shopify theme tutorials if you’re interested.

Google Tag Manager for Enchanced eCommerce and improved Shopify performence store

Get it FREE

Themes

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 your 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

Comments for Edit Theme 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