Customize the homepage

Now we begin to work with the Charge Default 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 Default 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 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 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 language and country in 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 to your store. 

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

The way to edit the top navigation menu

Right after the theme installing 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. Our decision was to place the utmost top 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 Charge placeholder images with custom images perfect for your online shop.

Pay attention to 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 popup 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 (popup banner) section article to learn more. It will help you to get the result:

Your next steps 

Icons bar section

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

Multicolumn section

You may see the next columns on the page:

To edit the section and make it look like on our demo, please follow the instructions on the Multicolumn section settings page. You can configure every column. You can also change the number of columns to add a Mosaic section to your store page. 

Featured Collection section

And then you see the Featured collection section. 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 on 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:

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 should configure the section according to your requirements by using suggestions from the Featured collection settings article. 

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

Browse our collections section

To edit 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.

Image with text section

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

Featured recent 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. 

About ChargeShop 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.

Logo slider

The Charge theme allows for showing an additional slideshow at the bottom. On our demo, you can see it as a brand logos slider. 

To make your store page get the same slideshow, use the Image block and Slider Content settings of the Charge theme Slideshow section.  

Footer section

To edit the Footer section, click on the Footer in a 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. 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.