Your Shopify theme can dramatically impact how visitors see your brand and how they interact with it. Changes you make to your theme can impact conversion rates and SEO, so it's important to know how to work with themes in Shopify. In this post, we discuss how to change, add, publish, and edit themes in Shopify.
How To Add A Free Shopify Theme
Shopify themes are separated into free and paid themes.
To add a free theme, go to the Online Store section of the left sidebar under Sales Channels and click on Themes. On the Themes screen, scroll down to the More themes section and click on the Explore free themes button.
A window will open that displays all of the free themes available for Shopify.
From this window you can click on a theme to see more details.
The window includes a brief summary of the theme at the top, a list of features that come with the theme, and if available, a list of different styles for the theme. You can select which style you like by clicking the radio button for the style you are interested in.
On the left, an image displays a preview of what the theme looks like. This will change when you switch the style to show you what each style looks like.
To change your theme to this one, click the Add [theme name] button at the bottom right corner of the window. If you want to preview other themes, click the Back button to go back to the Explore free themes window.
Once the theme is successfully added to your store, a You successfully added [theme name] notification will appear at the top of the Themes screen. You can click on the Customize theme button here to make some preset changes to your theme. More on this later.
You will now find your new theme listed under the More themes section as one of the themes you can use on your site.
How To Add A Paid Shopify Theme
To add a paid theme, navigate to Sales Channels > Online Store > Themes in the left sidebar, then scroll down to the More themes section from the Themes screen, and click the Visit Theme Store button under Shopify Theme Store.
A new tab will open in your browser that will take you to the Shopify Theme Store.
The Collections drop down in the top navigation menu allows you to view themes that all share the same property. Options include:
- Trending this week
- Grid-style layout
- Big, beautiful imagery
- Great for large inventories
- New theme releases
- Fun and lively
- Minimalist style
- Great for small inventories
From the Industries drop down, you can select themes that were built with a specific industry or market in mind, including:
- Art & Photography
- Clothing & Fashion
- Jewelry & Accessories
- Food & Drink
- Home & Garden
- Health & Beauty
- Sports & Recreation
- Toys & Games
If you click on the All Themes link in the top navigation, you will be taken to the Browse all themes page, where you can sort and filter themes to find one that fits your needs.
The left sidebar allows you to filter themes based on properties by checking and unchecking check boxes. To open a section in the left sidebar, click the drop down arrow for that section. Sections you can filter by include:
- Number of products
- Layout style
- Product page
- Home page
- Marketing and social media
There is also a Sort drop down menu at the top right which allows you to sort themes from top to bottom by:
- Most recent
- Price: low to high
- Price: high to low
When you find a theme that looks promising, you can click on it to see more information about the theme. You will see the price and a brief description, as well as an image that summarizes what the theme looks like. You can click the radio buttons listed under [number] Styles Included to see previews for the different styles.
Clicking View Demo will take you to a fully interactive demo of the theme in the style that you selected, allowing you to get a feel for what users will see when they interact with your store on the front end.
Clicking the Buy theme link will take you directly to the checkout process for buying and adding the theme. After buying the theme, it will be added to More themes in your Themes screen as one of the themes you can use on your site.
Clicking Try Theme will take you to a fully interactive preview of the theme as it would look and function if added on your own store. It will also add the paid theme with a Theme trial note to your More themes section on the Themes screen:
If you are satisfied with the theme, you can click the Buy theme button at the bottom of the screen. You can also click the Customize theme button to customize your theme through a point and click interface (more on this later). Or you can click Close preview to return to the previous screen and look at your other theme options.
How To Upload And Install Your Own Theme From A Zip File
If you have a custom theme or a copy of a theme saved to your computer, you can install it by uploading it to Shopify. To do so, you will need a .zip file containing all of the theme files.
To install your theme, navigate to Sales Channels > Online Store > Themes in the left sidebar, scroll down to the More themes section of the Themes screen, and click the Upload theme button.
An Upload theme window will open. Click Choose File and select your theme's .zip file from your computer's file system, then click the Upload button to install your theme. This will add your theme to the More themes section of the Themes screen.
How To Publish A Shopify Theme
Adding a theme to Shopify using one of the methods above will add it as one of the themes you can choose from, but it will not automatically update your store's theme and be visible to users.
For the theme to be visible on the front end, you will need to publish it.
To do that, navigate to Sales Channels > Online Store > Themes in the left sidebar, scroll down to More themes in the Themes section, and click the Actions link next to the theme that you want to publish. A drop down menu will appear. Click Publish from the drop down menu.
A Publish [theme name] window will appear asking if you want to publish the theme, and warning that users will no longer see the old one. To publish the theme, click the Publish button in the bottom right corner of the window, or click the Cancel button if you don't want to publish the theme.
Once the theme is published, a temporary notification will pop up at the bottom of the screen, and the new theme will replace the old one for your shoppers.
How To Update Your Shopify Theme
If you installed a Shopify theme and never made any changes to the theme code, and never installed an app that altered its code, then your theme will update automatically whenever new patches, fixes, and features are updated in the theme.
If you made changes to your theme code, it will not update automatically. This is because an update to your theme will remove any changes you made to the code.
You can update your free or paid theme by adding and publishing it as discussed in the sections above. Make sure any changes you made to the code are documented and can easily be added back into your theme if desired. If it is a paid theme, you will not need to pay for it again if you have already installed it previously.
Customizing Your Shopify Theme
After adding a Shopify theme, you have the option of customizing it through a point and click interface. This is where you can do important things like:
- Change your Shopify banner
- Change your Shopify logo
- Add images to a slideshow
- Change theme colors
When you add a theme, a You successfully added [theme name] notification appears in your Themes screen. You can click the Customize theme button here to customize your theme.
This notification is only visible immediately after adding a theme, but you can still customize your theme anytime if this notification is no longer visible.
To do so, navigate to Sales Channels > Online Store > Themes in the left sidebar. If it is your currently published theme that you want to customize, click the Customize button next to your theme name under the Current theme section on the Themes screen.
If you want to customize a theme that you have added to Shopify but haven't yet published, scroll down to the More themes section and click the Customize button next to the theme you want to personalize.
No matter the method, you will be taken to a customization screen. On the right hand side is a fully interactive preview of your store as your users will see it. In the left sidebar you will be able to make changes to your theme by filling out the fields for each theme property.
The left sidebar includes two tabs, one for section's of the theme's design that you can customize, and another for adjustable theme settings.
A drop down arrow appears next to the text Home page which you can use to select other pages to preview (password page, Collection pages, Collections list, Blogs, Cart, 404 page).
At the top right is a Save button that you can use to save any changes you made to the theme. Bear in mind that if the theme is published and you click the Save button, the changes you made will become visible to users. A Live notification appears next to the Save button to remind you of this if this is the case.
Custom options available in the Sections and Theme settings tabs are different for each theme, depending on what features are available. Some common settings under the Sections tab include settings for:
- Logo and menu
- Announcement bar
- Rich text
- Featured collections
And Theme settings options often include:
- Favicon (icons used throughout the theme)
- Cart page
- Social media
- Change theme style button to switch between the styles that you would have seen when you previewed the theme
Clicking any of these elements will open a slide-out window with all of the required fields. For example, clicking on the Featured collection section will take you to a slide-out window like this:
You can click the back arrow up top to return to the primary customization interface.
All of the settings in any section are easily changed by filling out text boxes, clicking buttons, choosing files from your computer's file system, selecting options from drop down menus, clicking check boxes and radio buttons, using sliders, and other visual interface elements you are probably familiar with.
Remember to click the Save button to make your customization permanent. You can also click the Shopify icon at the top left corner of the page to leave the Customize screen and return to the Themes page in Shopify.
How To Edit Your Shopify Theme Code
If you have web development experience or access to a developer, you may want to edit your theme code directly to make more fundamental changes to the theme. Keep in mind that if you do this your theme will not automatically update when new patches and features are released.
To do this, navigate to Sales Channels > Online Store > Themes in the left navigation, then click the Actions drop down button next to the theme that you want to edit (either in the Current theme section or the More themes section) and select Edit Code from the drop down menu.
An inner left sidebar will appear allowing you to select the theme files that you want to edit from a folder tree.
You can open several theme files in separate tabs here, and save any changes you make to the code with a Save button at the top right corner of the screen.
What Code Does Shopify Use?
Shopify theme files are .liquid files, and liquid is an open-source template language created by Shopify and written in Ruby. It is limited by design, has no concept of "state," and doesn't allow you to get too far under the hood of the platform. That said, if you are familiar working with PHP, working with liquid should be fairly straightforward as the syntax is very similar.
How To Get Rid Of "Powered By Shopify"
The text "Powered by Shopify" appears at the bottom of your Shopify pages by default.
If you want to remove this text, start by navigating to Sales Channels > Online Store > Themes in the left sidebar, then click the Actions drop down button next to the theme you want to remove it from and click the Edit languages selection from the drop down.
Under the Search Results tab, type "powered by shopify" into the Filter field and wait for the results to load.
You will see that the text "Powered by Shopify" appears in several places throughout the theme. The two that you want to remove are:
- Footer: Powered by Shopify field within the Checkout & system / Checkout remember me modal section
- Powered by shopify: Powered by Shopify within the Checkout & system / Links section
Simply delete the "Powered by Shopify" text from these text boxes, then click the Save button at the top right corner of the page.
You may want to edit the text in the other sections to remove references to Shopify as well, but these changes will not be as straightforward as simply deleting the text.