How to Edit Shopify Theme

May 13, 2020

143 Denis Husachok

How to Edit Shopify Theme

Looking for a way to give your website a unique look? Want to find out how to edit a Shopify theme? Read the article to find out how to change colors, fonts, social network icons, create new Shopify sections (blocks in PageBuilder) and new templates. Here you will also learn how to customize a checkout page and add a product.

How to edit Shopify theme
How to create new Shopify sections (blocks in PageBuilder)
How to create new Shopify templates
How to create a Shopify checkout page
How to add a product to Shopify

How to edit Shopify theme

If you decide to create your own theme, you need to register on the Shopify service, and then set up your own store following the instructions.

Once you enter the basic information, such as store name, currency, country and others, you can start customizing a standard theme or use ours. If you choose the second option (our theme), go to the Online store -> Themes.

How to edit Shopify theme and add new shopify sections

Click on Upload theme and select the archive with our theme. Now you can customize our theme and then choose it as the main one.

Here we demonstrate how you can edit Shopify theme at the example of FoodStore theme by BelVG. It’s parent theme is the standard one. Customization of themes created by other developers might slightly differ.

edit Shopify theme

To start customizing the theme, you need to click on the Customize button. It will open the page builder with the main page of your store.

To change the visuals of your theme, you need to click on Theme settings. It opens the fields where you can change the visuals.

Shopify theme customization

The visuals include:

  • Color (Heading and links, body text, price, buttons color, fields color, image overlays and page background).

customize shopify theme

  • Fonts (font-family and fonts size for heading, buttons and body text).

How to edit shopify theme - fonts

  • Social networks. Here you can specify links to your store in social networks. The icons of these networks will appear in footer. Besides, you can indicate social networks to share products.

how to edit shopify theme - social networks

  • Favicon. Here you can change or add your site’s favicon.

how to edit shopify theme - favicon

  • To change the header visualization, go to Section and select the Header block. In this block, you can add a logo, change its location and adjust the size of the logo. Moreover, in this block you can choose what menu to display in the header.

how to edit shopify theme - header

  • To change the footer type, go back to the Section and select Footer. In this block you can choose whether to display payments icons, language and currency selection. You can also change the name of the blocks and choose the menu to display in the footer.

how to edit shopify theme - footer

Return to the Section to modify the content on the main and other pages. You can move blocks in this section or, by clicking on the block, change the content in the block.

how to eidt shopify theme - shopify sections

For instance, select the Call to actions block. In this block, you can simply select the parameters, such as picture, background color, title text, text for the block, button text, and a link when pressed. With such simple manipulations, you can add content to your site.

how to edit shopify theme - call to action

To add a new block to the page, you need to return to the section with all the blocks and select Add section. It will bring up a list of blocks that can be used in your theme.

How to create new Shopify sections (blocks in PageBuilder)

Let’s create a new block, identical to the Call to Actions one but with the ability to change the color of the header text. To create a new block, go to Online store -> Themes -> Actions -> Edit code in the admin panel. Click on the Add a new section button and enter a name for a new template.

how to add new shopify sections pagebuilder

Then, you need to copy the code of the Call to actions block to our file.

add shopify sections

First, we need to add a color picker for the title in this block. To do this, you should add the following piece of code to our template:


If we want  to apply settings to the title, we need to add a unique class to the h1 tag:

<h1 class="little-image-text--tittle color-text-{{ section.id }}">{{ section.settings.text-box }}</h1>

To use the color variable exactly with the title that we change, we need to add the following code to the HTML part:


To make our block unique, change its name. It will make it much easier to find:

shopify theme customization

As a result, the code of our template will look like this:


To add our block to the site, you need to open the needed page in the Customize mode. Click on Add sections and select the block. Add the main information and see that the title text changes depending on the one you’ve selected.

how to add shopify sections - customization

How to create new Shopify templates

To create or edit page templates, open the Template tab in the code editor. In this section, select an existing file or create a new one. For instance, create a new Collection page template with static text below the title. To do this, create a file called collection.width-static-text.liquid. In this file, the standard collection section will be displayed by default.

{% comment %}
The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% section ‘collection-template’ %}

You need to create your new section to display the static text. To do this, create a new section called collection-template-width-text, copy the code from the standard section of the collection into this section and edit it.

Change the path to the section file in the new collection template:

{% comment %}
The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% section ‘collection-template-width-section’ %}

To apply these settings to a specific section, go to Products -> Collections in the admin panel. Select the needed collection and change the template of our page to the previously created one. Save all changes. And now the page of the selected category will look like this:

shopify theme customization - sections

How to create a Shopify checkout page

To change visuals of the checkout page, open the cart page in PageBuilder mode. The basic Shopify version provides several settings to change visuals. To add your blocks to the checkout page or add your own css styles, you need to operate the Shopify Plus version.

The basic Shopify plan provides the following settings to change the checkout visuals:

  • Add a logo.
  • Change background of columns.
  • Change font family for title and text.
  • Change the color of text, buttons and errors.

how to edit shopify theme - checkout page

how to edit shopify theme - shopify chechout

How to add a product to Shopify

To add a product to the catalog, open the Products -> add product tab in the admin panel. You will see the page where you can enter the basic information about the product.

how to add a product to shopify

how to add a product to shopify in admin

Besides that, you can create combined products with different prices for each characteristic.

shopify customization - add products to shopify

You can also change the title and description for SEO.

how to edit shopify page title and description

As a result, the page with the created product looks like that:

create product in shopify

Wrapping it up

Now, you can professionally develop and design your Shopify theme following our step by step guide. We did our best to keep all the information and steps simple but if you still need some assistance or want to rely on a dedicated developer, the BelVG team is here to help. Contact us to get the perfect solution for your online business.

Have any questions? Feel free to ask anything in the comments below!

Vlad Yunusov

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Vlad

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *