Jack
Jack Jack is the creator of Neat A/B Testing

How To Customize Your Shopify Theme The Easy Way Part 1

How To Customize Your Shopify Theme The Easy Way Part 1

Building an e-commerce store with Shopify is awesome. It’s easy, you get a great looking site and you’re up and running in no time.

But, sometimes, you want just a little more out of your theme.

Luckily, making small tweaks to your Shopify theme is easier than you might think. For small changes, you don’t have to hire a developer if you’re willing to roll up your sleeves.

In this 2-part series, we’re going to look at a few ways to make small changes to a Shopify theme by walking through a few examples. You can use these on your own shop, or use them as a jumping off point towards your perfect store.

So let’s dig in!

Is it a structural change or a style change?

The first thing to figure out is whether the change you want to make is a structural or a style change.

A style change modifies the visual appearance of something already on the page

Some examples:

  1. Changing font size, color, or style or alignment.
  2. Making a background image transparent so text is easier to read.
  3. Changing button colors.
  4. Centering elements.

Usually, style changes are going to be a little easier.

A structural change modifies or adds to the underlying framework of your website, and requires additional HTML code.

Some examples:

  1. Adding a link to an image.
  2. Showing a sizing table on every product page.
  3. Creating a totally new homepage section.

In part 1, we’re going to look at simple style changes.

Making our hero image awesome

I’ve created a Shopify store, selected the Brooklyn and added a header image. Here it is:

This looks pretty good, but I don’t like the text over the puppy’s head. It makes it hard to read. It would look a lot better if we could move that text over to the left in all that empty space.

My first stop is the theme’s settings. If I can change it there, then there’s no need to dig into the code.

I don’t see anything about the text positioning. So we’re going to have to get a little creative.

The easiest way to modify the style on an element is to start off in Chrome Dev Tools. To do that:

  1. Open up the site in Chrome
  2. Right click near the element you want to change.
  3. Select Inspect

You should get a screen that looks like this:

Believe me, it’s not as scary as it looks.

What’s showing here is the underlying structure (the HTML and CSS) of the page.

Find the area you need to change by moving your mouse pointer up and down the code in the Elements view of Chrome Developer tools. You should be pretty close already if you right clicked the element you wanted to change in the last step.

Here’s what it looks like for the text we want to shift over.

Now, we start playing around. You’re going to be using CSS code to make tweaks to the page. Don’t worry if you don’t know CSS, it’s not too hard and there are some great resources.

We’re going to use a cheat sheet made by Adam Marsden available here to get our text positioned properly.

First, what are we changing? We want to move the text over to the left. Sounds like Text Style, so click on that.

Would changing the horizontal alignment do the trick?

Let’s try text-align: left and see if that does it. Go back to Chrome dev tools and in element.style, we’ll add text-align: left and hit enter.

Now our page looks like this.

Not bad for a first try! But, you might notice that text isn’t centered anymore. So maybe using left align isn’t the best option here.

No problem, we’ll just refresh the page to clear our change and try something else.

Margins, borders, and padding

When it comes to spacing, there are 3 properties to be aware of:

  1. Margin
  2. Border
  3. Padding

This diagram from w3schools.com shows how these work. By the way, w3schools will also be a huge help for you if you’re just getting started with CSS.

Most elements won’t have borders on them, but you’ll see margin and padding used quite a bit.

On our cheat sheet, these properties are listed under Box Properties.

Let’s try using the padding property to shift that text over while maintaining the center alignment.

You can use the padding-right property to only affect the padding on the right for this element. padding-left, padding-top, padding-bottom will also work.

We add padding-right: 600px to the element, and success! This looks pretty good.

Feel free to try different things if you’re not sure. You’re not going to mess anything up because you’re not actually editing your theme right now. If it all goes south, just refresh the page and try again.

Let’s check it on mobile to make sure we didn’t mess anything up there. To do that, click the Toggle Device Toolbar button in the upper left of developer tools.

Click through a few of the different devices to preview your shop on various mobile devices.

This looks pretty good!

Integrating the change into your theme

Now we know the CSS we need to add to get our text aligned property, so we need to add it to theme.

Copy your theme

Head over to your Shopify admin and Click Online Store > Themes in the sidebar. Find your current theme and click Actions > Duplicate.

We’re copying our theme so that if we mess anything up, we always have a backup copy we can restore.

Add the CSS

Next, find the copy in your theme library and click Actions > Edit code.

We need to change our CSS to match the change we made in Chrome dev tools. Search for .scss in the search bar.

A few files will come up. The file your looking for is probably called theme.scss or something similar. Open that up and scroll all the way to the bottom.

Start by adding a comment explaining why you’re doing what you’re doing. Trust me, if you decide to change it later, this will be really helpful.

/* Adding to change the alignment of hero headline */

Next, we create a CSS class to house our change. It looks like this:

/* Adding to change the alignment of hero headline */
.scheduler_hero_padded_left {
  padding-right: 600px;
}

You can call it whatever you want, just be descriptive and I suggest putting your shop name in there just to make extra sure it won’t conflict with anything.

Apply the class in the HTML

Next, we have to apply that class to the text. This part can be slightly tricky, so bear with me. We need to find the template that houses your header.

The easiest way to do this is

  1. Click on Themes in the left sidebar.
  2. Next to your theme copy, click Customize
  3. Navigate to the page you’re modifying and find the section in the sidebar.

Here, we can see that the section we are trying to edit is called Slideshow.

Head back to the Edit Code section, and enter Slideshow into the search box.

This is probably our file! Click to open it. Remember from Chrome dev tools that this is the line we want to add our class to.

So, let’s look for that line in slideshow.liquid.

And now we’ll add our new class to it.

Click Save. Then Click Preview in the upper right.

Boom! Our change is there and it looks great. Now that we’re happy with our changes, we can publish them by going back to Themes in the Shopify admin and clicking Actions > Publish.

Wrapping up

Miles of code and developer tools can seem a little scary at first. But when you know how to make small tweaks like this to your store it gives you a lot more power to make your shop exactly how you envision it and optimize your conversions.

And remember to always test your changes. Make sure that you’re making positive, revenue increasing changes to your shop. You can use Neat A/B Testing to make this a breeze.

In the next part, we’ll look at making a structural change to our store by adding a new section to the product page. If you want to make sure you don’t miss it, just enter your email address below and it will be delivered straight to your inbox. Happy tweaking!