Theme Customization

.

Before you customize your theme

TIP

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.

Customizing themes

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 Online Store > Themes
  • Find the theme that you want to edit and click Customize

Edit your theme settings

The theme editor toolbar is divided into Sections and Theme settings. Theme Editor

  • Theme settings like 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 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.

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.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > 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 Save.