Before you customize your theme
Before you customize your theme, it’s a good idea to do the following tasks:
- Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.
You can customize your theme settings from your Shopify admin by using the theme editor. The theme editor includes a theme preview and a toolbar that you can use to add and remove content, and to make changes to your settings.
Go to Theme Editor
- From your Shopify admin, go to
- Find the theme that you want to edit and click
Edit your theme settings
The theme editor toolbar is divided into
Theme settingslike backbone of a theme included settings default for your Shopify store at all pages. .You can edit your theme settings to customize your online store’s content, layout, typography, and colors. Each theme provides settings that allow you to change the look and feel of your store without editing any code.
You can use
Sectionsto modify the content and layout of the different pages on your store. You can use theme settings to customize your store’s fonts and colors, and make changes to your social media links and checkout settings.
Different types of pages have different
theme sections. When you first open the
theme editor, the settings for the
home page are shown. To access the settings for other pages, select the page type from the top bar drop-down menu:
You can use sections to modify the content and layout of the different pages on your store. You can use theme settings to customize your store’s fonts and colors, and make changes to your social media links and checkout settings.
Select Themes to Customize
|Shopify Theme||Version||Theme Settings User Guide|
|Electro||5.0||Electro 5 User Guide|
Editing theme code
You can edit the code for your theme.
- From your Shopify admin, go to Online Store > Themes.
Edit code. The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right:
When you click a file in the directory on the left, it opens in the code editor. You can open and edit multiple files at once. Any files that you modify will show a purple dot next to the file name:
This can help you to keep track of where you have made changes.
If you want to revert any changes to a file after you click
Save, then open the file and click
Older versions. A drop-down menu shows the date and time for each save that you’ve made. Select the version that you want to revert to, and click