Customize the Charge Gorpcore homepage

Let's customize the homepage to make it look like the Charge Gorpcore preset demo. Go to Online Store - Themes and click on Customize. 

First, go to Theme Settings - Theme Style and choose Gorpcore. Click Change style.

Now we go to the configuration of the sections which have their settings. Don't forget to select the homepage at the top. 

Note: the Gorpcore preset has another sort order of homepage sections than the Charge default theme. 

Follow our instructions here to make the Home page look like this one.

 

Well, you may see customization settings on the left side of your screen, and the live preview of your site on the right side. 

Let’s go from top to bottom. 

1. Edit the logo image and change the language switcher

To replace it with your own, follow the instructions.

We stay in the Header section area. In the settings, you must simply put a tick in the Show language selector field. 

Note: you should set up the languages in the Shopify configuration first. In the guide, you were told how to do that. 

2. Top navigation menu

On the Gorpcore demo, you can see various menus like this one

or this one

We explained in detail how to build various menus in the article. You must stay in the Header - Dropdown content area to make more changes to the top navigation menu. 

Applied settings for the section:

• In the Header general settings, we enabled the following options: Show language selector, Show country selector, Enable sticky header, and Show the box shadow at the bottom (it has an animation effect and will be visible on scrolling to the bottom and hidden on scroll to top). 
• In the Navigation general settings, we chose Megamenu as a Dropdown menu type and pointed by commas the collections, sale in the Megamenu items name field. 
• In the Megamenu settings, we set 4 in the Main items per row. We put a tick in the Show overlay field. 
• You can see 3 added blocks. Two of them have the type Dropdown content and the one is the Product list. 
• The first menu is the Shop. You can see a banner with the list of collections. We enabled the Available for "Megamenu" dropdown type option. We selected the banner image with an Image width of 50%. For collections, we set up the Button in the "View all" appearance and the Item's width is 30%.
• The second menu is the Collections. We enabled the Available for "Megamenu" dropdown type option. No banner image but selected many collections. For collections, we set up the Button in the "View all" appearance and the Item's width is 20%.
• The third menu is the Sale. This is the product list block. We selected the collection products. We enabled 4 in the Maximum products to show and the Items width of 18%. We set up 3 in the Index of the parent-item menu. (Top-level menu). We added the link to the collection list, and set the Button in the "View all" appearance.

3. Slideshow

We move to the template customizations. The first Gorpcore section is the Slideshow. 

Note: We recommend using two slideshow sections to prepare better image sizes for the different screens. You can also use the different slideshow settings according to the screens and instructions given here. For example, you can set a slider Fade transition effect on the desktop and a slider scroll effect on the mobile screen separately. Please follow the link to customize both sections.

Applied settings for the sections:

• You can see a separate configuration for the first slideshow section. The main difference is that we enabled the Mobile-only value in the Visible on field. Accordingly, the other slideshow configuration includes the Desktop-only value in the Visible on field.
• We set up Right as the Navigation position and added the Button color #FFFFFF in the Navigation Styles.

4. Multicolumn sections

The next visible section on the homepage is the Multicolumn. It will be repeated on the homepage twice. The first one is Special Offers:  

and the second one is:

You can hide a column, or, conversely, add a new one. The Multicolumn settings article will help you to understand.

Applied settings for the Special Offers section:

• In the general settings, we enabled the half-width of the column in the Image width field and chose a Square value in the Image ratio. 
• We added three columns with the text Fall in love with the best deals, Travel with Gorpcore essentials, and Stay protected on your next outdoor adventure with images and links for all columns. Use the Heading field to show the text for each block. The Subheading and the Description fields are blank.
• For each column, we set up a Button secondary value as the Link appearance, Shop Now as a Button Label, and Cover as the Image position. 
• In Colors settings, we enabled the Background #E13124, Heading color #FFFFFF, Text color #FFFFFF, Subheading background #1C73F5, and no color for the Background gradient and Subheading background gradient. We also enabled the Use bold heading option.

Applied settings for the Moments made Memories section:

• We added three columns with images only.
• For each column, we set up an Image link value as the Link appearance, and Cover as the Image position. 
• In Colors settings, we enabled the Background #E13124, Heading color #FFFFFF, Text color #FFFFFF, Subheading background #1C73F5, and no color for the Background gradient and Subheading background gradients. 

5. Section Border Separator

Pay attention to a section border separator under the multicolumn section and one more slideshow. It is also configurable. You should click on the Section Border Separator to see the settings. On the Gorpcore homepage, we use a 1px Border height and a transparent Border color.

6. Featured collection sections

By default, the Gorpcore design includes four Featured collection sections on the homepage. You can see the New Collections sections:

and a little way down the page the Our Favorite Products section:

The Featured collection is a unique feature of the Charge theme. Use it to promote New, Favorite, Special products or any other collections you want to showcase. With our theme's settings, you can change the heading of the section, the collection images and their position, the colors, the product card settings, etc. Read more in the article.

Applied settings for the New Collections section:

We applied the Magazine cover for 3 sections.

• In general settings, we enabled the following options: H5 for Heading size, 3 for Maximum products to show, 3 for Products per row, Enable swipe on mobile, Show slideshow buttons,  Scrollbar for UI type, Show "View all" with the Button value for "View all" appearance, and Near heading for "View all" position.
• In the Product card, we enabled Show "Add to cart", a Small value for Badge Size, and the Theme default value for Image ratio.
• We added the Cover value for the Image position in the Magazine cover. Here we also enabled Text color #FFFFFF, Background color #1C73F5, Button text color #333333, Button background #FFFFFF, and no color for the Background gradient and Button background gradient.
• The Featured collection section includes the block Title that can be used to highlight the section with a Section title.

Applied settings for the Favourite products section:

• In general settings, we enabled the following options: H2 for Heading size, 4 for Maximum products to show, 4 for Products per row, Enable swipe on mobile, Show slideshow buttons, Show box shadow, Scrollbar for UI type, Show "View all" with the Button value for "View all" appearance, and Near heading for "View all" position.
• In the Product card, we enabled Show "Add to cart", a Small value for Badge Size, and the Theme default value for Image ratio.
• We also chose the Contain value for the Image position, Text color #FFFFFF, Background color #1C73F5, no color for Background gradient, and the Button Background gradient, Button text color #333333, and Button background #FFFFFF.

Note: in our theme, we control the following settings for the product card: height for the item card has 372px. You can edit the value by moving to Theme Settings - Product card - Control grid items height.

7. Scrolling text section

On the demo homepage, you may see a scrolling text with the seasonal sale alert. 

Feel free to update the colors, font, content, icon separator, etc. with the recommendations given here.

Applied settings for the section:

• In the general settings, we enabled the font Work Sans Semi Bold with 32 px as the Font size, 15s in the Animation duration field, Text color #000000, Background color #F0F2F2 and no color for the Text color gradient, and Background gradient.
• In the Text block, we created Content and chose the Dot in the Icon separator field.

8. Collage section

The Gorpcore preset has the added Collage section on the homepage. By default, you may see the added video block. 

Still, you can also add the Image, Product, and Collection blocks. See the configuration settings here. 

Applied settings for the section:

• In the general settings, we enabled the H2 value for the Heading size, the Left large block for the Desktop layout, and the Column for the Mobile layout.
  
• We added the only video block from the internal source (Shopify admin->Content). In the block, we specified the Cover text and set up the Video width and Autoplay option.

Note: in case of using the Internal video source and video link (external link) at the same time, the Internal video will be shown on the front end.

• Then under the Video, you can see the Content styles customizations. Here we enabled the Right for the Content position, 4 rem for the Font size, Text color #FFFFFF, Cover background #C0C0C0, 35 for the Background opacity, and 1.5 for Inner paddings.

9. Featured product section

The Charge Gorpcore design includes the Featured product section. It makes a featured product stand out on your Shopify store homepage, product pages, or any of your pages. 

We called the section Explore our new item. The Featured product section article will help you to understand how to change the heading, show images, change colors, customize the product layout, etc.

Applied settings for the section:

• In general settings, we enabled the following options: Show section in full width, Show thumbnail images, Separate info with border, H2 value for Heading Size, Image background color #FFFFFF, and Accent 2 for Color Scheme.
• In the Title block, we enabled Show rating, Show SKU, Show price on the desktop, and Show badges on the desktop.
• In the Media Gallery block, we enabled Show product badges in the gallery, 100 for the Control image size and the Large value for the Badge size.
• In the Description block, we put a tick in the Enable collapsed and enabled 3 lines in the Lines visible when collapsed field.
• In the Pricing and Installments block, we enabled Show badges on the desktop.
• In the Variant picker block, we enabled the Mark unavailable variations with a border color and the Color swatch value in the Type.
• In the Buy Buttons block, we enabled the Show dynamic checkout buttons and Preorder button labels.

10. Newsletter section

The Charge Gorpcore preset includes a Newsletter section added on the homepage. It will help your business to build long-lasting relationships with the audience by sending regular emails.

You can see the perfect picture of the section that attracts visitors's attention. Read the article to see how to customize a newsletter section.

Applied settings for the section:

• In general settings, we enabled the following options: Accent 1 for Color Scheme, Make the section full width, Right value for Content position, and custom image to cover the section.
• In the Subscribe to our amazing newsletter block, we enabled Enable heading style and H3 value for the Heading size.
• We added a description to the Subheading block.
• We enabled the Show Minimal form in the Email form.

11. Blog post section

The Charge Gorpcore design includes the Blog posts section enabled on the homepage by default.

You can edit the section by using the article instructions.

Applied settings for the section:

• In general settings, we enabled the following options: 3 blog posts, Show featured image, Show slideshow buttons, Show the "View all" button with the Button value for "View all" appearance, the H2 value for the Heading size, and Scrollbar for UI type.

• In the Title block, we enabled Title size 20px, Show date in Title, and the DMY value for the Date format.

We're mostly done customizing the Charge Gorpcore homepage. A little bit and you will have the look like the Charge Gorpcore preset demo.

 

12. Icons bar section

The Icons bar section is placed at the bottom of the Charge Gorpcore homepage.

You can change the general settings of the icons bar, add a new icon, and modify the existing icons. See the article to see the possible customizations.

Applied settings for the section:

• In general settings, we enabled the following options: Background2 for Color scheme, Always value for Visible, Enabled swipe on mobile, 3 rem for the Control vertical margins, Baseline for Alignment items inside a flexbox, and Scrollbar for UI type.
• We added three custom icons with the text Free Shipping above $50, 90-day Return Policy, and Flexible Delivery Time with the Bottom text position for all icons. 

   

13. Footer section

This is the last section you must edit on the Charge Gorpcore homepage. 

We offer so many footer customizations for Charge themes. To edit the general section settings or change footer contacts and footer menus, read the full article for details.

That's it. Be sure that you can customize all sections according to your store requirements. It will help you get the required functionality and look. Open the Online store and see the way to find extra sections.

 

 

Recommendations

• You may notice the same product quantity in the row for all sections. For example, the Featured collection sections show three items per row. We recommend following this as our standard for other sections, too. It makes the pages look elegant in unison with the design.
• Be certain you replaced placeholder images with custom images. There are some image standards by Shopify. You may review our article to see the image sizes used in the Charge theme.