Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1 hour
How to create an online store with shopify 400x277
  • Overview
  • Transcript

3.2 Editing the Theme Code

Let’s say you found a great theme that you really like, but there are one or two small things you want to change. What do you do then? Well, with a little bit of coding knowledge, you can edit the theme code right from the Shopify admin.

3.2 Editing the Theme Code

So let's say you found a great theme but there are just one or two minor things that you wanna change. Well, what do you do then? Well, actually Shopify grants you access to the theme files, so you can edit pretty much any of these theme files to make that change. Now, I know I said in the beginning that you don't need any kind of coding knowledge to create an online store, and you don't. This is the only time when you would actually need this coding knowledge. And this refers to basically making custom changes to a theme. But if you're just going with the default theme, then you're basically good to go. So to access the theme files, you would go back to the admin. You would go to Online Store > Themes > Customize. Or you would click on Actions > Edit code. Okay, so here basically you have access to layout files, templates, and so on. And you can open any one of these. These have the extension of liquid, which is the, I guess, templating engine for their themes. So you can edit the existing ones or you can add new ones if you're feeling adventurous. So let's have actually a look at how a collection looks like, so we're gonna hit this. Yeah, this is what it looks like. Let's click on Section, and open collection-template. It's the one you see here. So a template like this is basically a combination of their own templating language with just plain HTML that you can see here. And you can edit this to your liking. If you wanna remove certain parts of a template, you would simply select it from here, delete it, and then save it. You also have access to the CSS, right? So you'd open theme.scss.liquid. And you have access to the entire CSS for that particular theme in SCSS format, or in SASS format. So you can change stuff like the grid break points, you can change their values here. You can change the colors. Let's search for footer, for example, right? Let's see what kind of styles we have for footer, right? So for site-footer, we have a margin and we have text-alignment center on small screens. But maybe I want the text align to be center all the time, so I'm gonna say text-align center here. And I'm gonna hit Save. And then when I refresh, That text will now be aligned in the center. So that's how you can edit the CSS or simply add your own styles. You also have access to JavaScript. And you can also see all of the JavaScript plugins that are being used. Here, this is using Lazy Sizes, which is a plugin for lazy loading images. Match Media, Password, I think this is custom-made. But anyway, this is the place where you have access to all of the theme files. Now a great thing about Shopify is the actual localization, which means translation to other languages. So with Shopify, you can switch between languages. You can edit the existing ones or simply add your own languages. That's fantastic, we're gonna have a look at that in the next lesson. See you there.

Back to the top