Customize the homepage

Now we begin to work with the Charge theme. Go to Online Store - Themes and click on Customize along the Charge theme. Now you may see customization settings on the left side of your screen, and the live preview of your site on the right side. To modify the template of your shop, you should stay in the area of the Charge theme. 

Right after you install it, you can see the homepage like this:

In the article, we will configure the template step by step to get your store to look like the Charge demo version.

Our template has a lot of customizations for different sections and blocks. Some of them are enabled by default on the demo version. Still, the Charge theme allows for using more benefits to highlight your store products and services, so we will show you how to enable the features. 

Note: You can play with the settings according to your wishes. It will help you get the required functionality.  

Let’s go from top to bottom. 

The way to edit the logo image and change the currency switcher

To replace it with your own, choose the homepage from the drop-down on the top of the dashboard and go to the Header section in the sidebar. Follow the instructions to change the logo image. 

Stay in the Header section settings in order to change the currency (language) switcher. Earlier in the article, you could see how to set up the language and country in the Shopify configuration. So, when you put a checkbox in the Show language selector and Show country selector fields, the already chosen values will pull up in your store. 

In the screenshot, you can also see the Demo announcement message. You can change it to your own in the Top bar configuration. 

The way to edit the top navigation menu

Right after the theme is installed, you can see the following menu bar:

Still, on its demo, the Charge theme's top navigation bar looks different from the default Shopify theme. You may see the last menu items aligned to the right. We decided to place the upmost navigation menu items on the right side of the desktop design.

If you want to have the same look, go to the Header section and follow the next steps:

• Go Online Store - Themes. 
• Click Customize. 
• Choose the Header section. At the bottom of the section properties panel, you can see a Custom CSS field. Add the following code:

.list-menu--inline > li:nth-child(3) { margin: 0 auto 0 0; }

• Click Save.

As a result, you will see the top menu items after 3rd one to the right.

If you want to make more changes to the top navigation menu, you can return to the article about the Charge theme Header section. To edit the Top navigation menu items, please click on the Main menu and follow the instructions from the KB article. And thus you will get the megamenu in your store that is offered in the Charge theme demo.

The way to change images

Now you have to replace the Charge placeholder images with custom images perfect for your online shop.

Pay attention to the image standards permitted by Shopify. Here, in the KB article, we show you the image sizes used in the Charge theme demo. Still, you can always edit them according to your wishes, but within the acceptable range offered by Shopify.

Stay in the area of the homepage. You may see a full-screen slider with images. Next, you should customize a slideshow according to your wishes. Look at the instructions on the Slideshow section settings page to configure a slideshow.  

We keep customizing the homepage. As a step in your actions flow, you can see a pop-up banner.

The Charge theme Overlay section is in charge of the area. You can see it at the bottom of the sidebar under the Footer section. There you can create a new popup or configure the existing one - Subscribe to our emails. Check the Overlay (pop-up banner) section article to learn more. It will help you to get the result:

Your next steps 

Customize the Icons bar section

To configure the Icons bar that shows the available services of your brand, check the article about the Icons bar section.

Customize the Multicolumn section

You may see the next columns on the page:

To edit the section and make it look like our demo, please follow the instructions on the Multicolumn section settings page. You can configure every column. 

Customize Featured Collection sections

And then you see the 4 Featured collection sections. This is a unique feature of the Charge theme, with the benefit of promoting new products to generate excitement and drive sales.

To make it look like our demo, follow the recommendations written in the Featured collection settings article. For example, you will be able to add a magazine cover to make the section look like this:

Customize Our favorite products section

To edit the next section Our favorite products, you have to use the settings of the same Featured collection section.

Click on Featured collection and specify the text Our favorite products in the Heading field. Now, press Change the collection and select the store collection you’d like to show in the section Our favorite products. Then you can configure the section according to suggestions from the Featured collection article.  

For instance, you can select the Activity Trackers collection and get the following result: 

Customize the Collage section

Now you may see the Collage section. It can include a video, image, product, or collection block.

To make it like our demo, use the guidelines mentioned in the KB article.

Customize the Browse our collections section

To edit the Browse our collections section, please use guidance from the Collection list section article.  

Keep in mind that you’ve already replaced the placeholders with your own images.

Customize the Image with text section

To create the section Modern Gadgets like on our demo, or add any other image, products, or link them to the collection page, go to the Image with Text section article. 

Customize the blog posts section

To beautify the section - show the View All button, for instance, use recommendations written in the Blog posts section article. With the Charge theme, you can also create a page to show blog posts more engagingly and edit the article page. 

Customize the Rich text section

To make changes in the section, please look at the Rich Text section article. It describes how to add attractive details about your brand shop.  

Now we come to the latest sections on the Charge homepage.

Customize the slideshow

On our demo, you can see it as a brand logo slider. 

To create an additional slideshow at the bottom of your homepage, please refer to the Slideshow section article. 

Customize the footer

To edit the Footer section, click on the Footer in the sidebar. Here you will be able to add a support picture and enrich the quick links footer menu. 

To edit the Footer links menu, you should have already created menus in the general Shopify configuration. So, now you may select the menu you want to show at the bottom. Click on Quick Links and then press the Change menu button. You will see a drop-down with created menus. Select the one you need. In our case, we have been adding the Get Help menu.

Follow the instructions to learn more details about the footer. It will result in a footer like our demo. If you want to use our support picture, please use this file.

You may also see social media icons in the footer. To enable social login on your store for users with their accounts on Instagram, Vimeo, Snapchat, Tumblr, TikTok, Pinterest, Facebook, Twitter, and YouTube, go to the article page.