Skip to content
Before Editing Create a Backup
Before you begin to do the customization and editing of your theme always create a backup file of the theme. If you made some changes in your theme but after saving it you want to discard that changes. In this type of situation, use the duplicate theme which you edit without affecting your live theme.
Following are the steps to create the backup of your theme:
Steps:-
- From your Shopify Admin, select the Online Stores and click on -> Theme
- Select the theme that you want to create a duplicate and click on Actions > Duplicate. The name of your duplicate theme will be as “Copy Of + the name of the theme” of which you create a backup.
How to Edit your Theme Setting
You can customize the design of your store and edit the theme settings through Shopify admin. Using its built-in theme editor you can start doing customization of your online store’s content, colors, and layout of the theme.
You change the look and feel of each theme on Shopify without editing any code. First, go to your Shopify Admin -> Themes and then select the Customize as shown in the below image for making the changes in the theme.
Each theme includes different pages like Home, Blog, Collection, Contact us, Product, About us, Login pages. Every page contains different theme sections. Select the page of your theme in which you want to edit the changes from the drop-down menu at the top bar.
The theme editor mainly has two parts such as Sections and Theme settings as shown below:
Sections settings
Utilize the part of the section, where you can modify the layout and content of the various pages in your store. Make use of Theme Editor for editing the design of your theme in Shopify. If you want to add the images in the header to your store theme then click on the header section and click on the image as shown below.
- You can add the new image or click on the image you want to edit and then all settings will get open one after another.
Theme Settings
The best thing about the Shopify Theme Editor is after editing your theme you can view the live previews of your changes. Click on the Theme settings tab to customize your store’s fonts and colors. Also, make changes to the checkout page designs as well as to social media links. After making the all changes click on the Save button on the top right corner.
How to Safely Edit Theme Code
You can also edit the theme code of your online store. Each theme consists of HTML, Javascript, Liquid, and many more files. Following are the steps to edit the code of your theme
Steps:
- From the Shopify admin, select the Online Store and click on Themes
- Select Click Actions and then Edit code.
You can see a directory of themes on the left side of the code editor and on the right side, you edit the file options that are available.
- Click on the following icon if you want to expand the code editor into the full screen:
- Click on the following collapse icon for returning the page to normal.
- You can open and perform editing on the multiple files at the same time. The file you select to modify will identify with the purple dot display before the file name. This will help you to maintain the record of in which file you have made the changes.
- After clicking on Save, if you want to revert the changes of that particular then open the file and select the Older Versions. You can see the date and time in the drop-down menu for each save that you have made. Select the version that you want to make revert to, and then Save it.
- You can also expand the code editor to the full screen. If you want to edit the color scheme between Light and Dark then just simply click on the buttons at the bottom of the page as shown in the following image:
The Custom CSS file
There are mainly two files in the theme. Liquid file and custom.scss.liquid file.
- The master file that loads with every page is the theme. liquid
- File that overrides your theme styles is custom.scss.liquid
If you not have the custom CSS file then select Add a new asset and create a blank file called custom.scss.liquid. Put this file into your theme.liquid under the styles.scss.css file.
Remember don’t use the .css extension to the files, use the .scss.liquid extension to the files which perform the auto-minify of files on the server. In this way, your all files become lighter.
SCSS means Sassy CSS. Write down the CSS code in your custom stylesheet as shown in the image.
Shopify Theme Features
The major unique features of your Shopify themes will make your website looks clean and attractive for your all visitors. Every Shopify theme has the following features:
- Each theme is modern, neat, and can easily customizable
- Design of the theme should be responsive in all devices
- The theme also includes every field such as customer support and reviews
- Themes use custom settings panel so you can easily modify the template.
- All Shopify themes contain the field of Shopify support.
Conclusion
Remember always make the backup file of your theme so your work doesn’t get an effect on your live site. The Shopify owners who use free themes but not make any changes to the design of the theme. If you want your store to look unique between hundreds of other stores, then you should edit the theme design and performs customization.
Hopefully, you are now able to safely edit your Shopify theme for your wholesale store, after reading this blog. In case if you have any queries regarding editing of the theme, you can contact us as we are always ready to help you.
