Customize the Charge Workshop homepage

Let's customize the homepage to make it look like the Charge Workshop demo. Go to Online Store - Themes and click on Customize. You will see customization settings on the left side of your screen, and the live preview of your store on the right side. When customizing the homepage, you will be able to address the available documentation for every section of the Charge theme.

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

Note 2: Right here in the article, we show you settings applied for each section to make it look like our demo!

Now we move to the sections of the Workshop homepage. Remember to select the homepage at the top.

Let’s go from top to bottom. 

Customize the Top bar section

See more details about the section in the article. We added the announcement message and chose the Link value as a Link appearance to make the top bar look like the demo.

Customize the Header subsection

Stay in the Header area. The Charge Workshop theme offers advanced settings to customize a header according to your requirements.

• Pay attention that you've got the opportunity to show two menus at the same time. The first one is a Slideout menu that is available on all devices. The Menu 2 enables the horizontal navigation menu, and it is available on the desktop only. In the Header configuration, you have to select the Combined value in the Menu type to show the menu like on our demo. Read more about the Header configuration.
• To change the logo position, go to the Theme Settings - Header. To change the logo, set its width and visibility, refer to the Header configuration.
• The search bar is expanded on the desktop and shown as an icon on mobile by default. To change these settings, please go to the Theme settings - Header.
• To enable search by collections, make sure you set up the required settings. Read the article  to get the search results based on the collection name. 
• To show the language switcher, you should set up the languages in the Shopify configuration first. Then you can easily enable the display of the language selector in the theme Header configuration. 

Navigation menus

On the Workshop demo, you can see the menus with the banner, product list, and other dropdown content.

In the article, we explained in detail how to add menus. 

Now you can see what settings we applied to make the Header look like on the demo.

Applied settings for the section:

• In the Header general settings, we enabled the following options: Center logo on mobile, Justify logo at Start, Show language selector, Show country selector, Enable sticky header, Show switcher language flag, Show icons line divider, and Show border for a search field. 
• The Container width is 1400px, the logo width is 130px on both the desktop and mobile is 130px.
• In the Navigation settings, we chose Megamenu as a Dropdown menu type and pointed out by commas the on sale, brands in the Megamenu items name field. We have chosen the Combined value in the menu type.
• We enabled the next options: Show top level items menu in uppercase, Highlight the first menu item permanently on the desktop, and Show collection icon with a width of 75px. The top-level menu is activated on hover. 
• In the Megamenu settings, we set 4 in the Main items per row and limited the number of categories to show up to 5.
• We added 3 blocks: the Banner, the Product list, and the Dropdown content. 
• The first menu is the Sale. This is the product list block. We enabled 4 in the Maximum products to show and the Item's width of 24%. We set up 2 in the Index of the parent-item menu. (Top-level menu) and the Button in the "View all" appearance.
• The second menu is the Banner. Remember to disable the option Remove menu links. We set up 1 in the Index of the parent-item menu. We added the image with a width of 100% and the Cover image position. We have chosen the Button in the "View all" appearance. We added a background and played with colors.
• The third menu is based on a dropdown content block. 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%.

Customize the Icons bar

We added two Icons bar sections to the Workshop homepage. Here is another one.

See more details about the section in the article. Now have a look what settings we applied make the Icons bars like the demo.

Applied settings for the 1 section:

• We enabled Swipe on mobile and On-scroll reveal animation.
• The color theme is Background 2 with the visibility Always.
• We chose the Center for aligning items inside a flexbox.
• The container max width is 1400, and the Icons width is 1.5 rem.

Applied settings for the 2 sections:

• We enabled Swipe on mobile and On-scroll reveal animation.
• The color theme is Background 2 with the visibility Always.
• We set 2rem in Control vertical margins and chose Center for aligning items inside a flexbox.
• The container max width is 1200, and the Icons width is 2 rem. No color.

Breadcrumbs section

In Breadcrumbs, we enabled both options - Show breadcrumbs on the mobile screens and Show border bottom. 

Template sections

We move to the stage of customizing the homepage template. It includes the Top bar, Slideshow, Multicolumn, Featured collection, Scrolling text, Image banner, Collection list, Compare products, Collage, Newsletter, Blog posts, and Icons bar sections. 

First, you can see another Top bar section with the announcement message in the center. No other options are enabled.

Customize the Slideshow

The Workshop homepage includes a one slideshow. Still, we recommend using two slideshow sections to deliver better image sizes for the different screens. Read more about the Slideshow section.

Applied settings for the section:

• We enabled a continuous loop and set a Scroll transition effect with a delay of 10 seconds. 

• The next settings are Slides per view - 1, Slide height - Adapt to the first image, Visible on All screens.

• We enabled the Show navigation buttons with the Slides value in the Navigation position.
• We enabled Show pagination content, Preload first slide, and Animate slide content.
• In styles, we set a max width of the container to 1400px, B4B3AC as a background color, Linear gradient as a background gradient color, and the FFFFFF color for the buttons.

Customize the Multicolumn

We added two Multicolumn sections to the Workshop homepage. Here is another one.

You can customize them both using the settings of the Multicolumn section. You can also hide a column or, conversely, add a new one.

Applied settings for the 1 section:

• In the general settings, we enabled Heading size 2, half-width of the column in the Image width field, Left in the Column text alignment, Inline reverse in the Column content arrangement, and chose an Adapt to image value in the Image ratio. 
• We enabled On-scroll reveal animation.
• We used an uppercase heading.
• We chose the Image link in Link appearance.
• We added three columns with images, headings, subheadings, and links for all columns. 
• For each column, we set up a 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.

Applied settings for the 2 section:

• In the general settings, we enabled the Heading size 2, half-width of the column in the Image width field, Left in the Column text alignment, Inline in the Column content arrangement, and chose an Adapt to image value in the Image ratio. 
• We enabled On-scroll reveal animation.
• We chose the Image link in Link appearance.
• We added three columns with images. No 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 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.

Customize the Featured collection

We added two Multicolumn sections to the Workshop homepage. Here is another one.

You can customize them both using the settings of the Featured Collection section. 

Applied settings for the 1 section:

• We added the Heading and made its size H2. 
• We set the maximum products to show 12, and 4 products are shown per row.
• We enabled Swipe on Mobile, Show slideshow buttons, and On-scroll reveal animation. We set Buttons as UI type.
• We enabled Show View all. See the Button as View all appearance, and the Near heading as View all position.
• We added a Magazine cover with the Cover image position.
• We added the image with the 544 cover height.

Applied settings for the 2 section:

• We added the Heading and made its size H2. 
• We set the maximum products to show 5, and 5 products are shown per row.
• We enabled Swipe on Mobile, Show slideshow buttons, Show box shadow, and On-scroll reveal animation. We set Buttons as UI type.
• We enabled Show View all. See the Text link as View all appearance, and the Near heading as View all position.

Customize the Scrolling text

Read more about the Scrolling Text section.

Applied settings for the section:

• We chose the Work Sans Semi font with the size 24px and a Space value as the Icons separator.
• The Animation duration is set to 15s.
• No color for the background and text background.
• The text color is#000000 and the background color is #DAD9D7.

Customize the Image banner

The Image banner section has a lot of settings. Learn more in the article. 

Applied settings for the section:

• We set up the first image only.
• For the text position, we chose the Top and Center values accordingly.
• We enabled the next options: Stack images on mobile, Adapt the section height to the first image size, and On-scroll reveal animation.
• The title font size is 3rem, and the background color is C0C0C0. No background opacity.
• We selected three spotlight products and enabled the following options: Show product image, Show price, and Show card in a row.
• In the Spotlight block, we set a spot position left 51%, spot position top 40%. The text position is Right.
• We added a Heading. No subtitle.

Customize the Collection list

Read more about the Collection list section configuration. 

Applied settings for the section:

• We added a Heading with size H2.
• We selected collections and sorted them alphabetically.
• We linked the section to the page. The View all appearance has a Text link value.
• We set 10 collections to show, and 4 per row.
• The Image position is Cover, the Title position is Bottom, and the Text alignment is Left.
• We enabled the next options: Show slideshow buttons, Show design elements, and Show as slideshow on the desktop. 
  

Customize the Compare products

We added the Compare products section directly to the Workshop homepage. See more details about its settings. 

Applied settings for the section:

• We added a Heading with size H2.
• The background has a FFFFFF color. No color for the background gradient.
• We selected products and enabled the next options: Show add to cart, Show product description, Show product vendor, Show product SKU, Show product rating.
• The truncated description is 50.

Customize the Collage

To the Workshop homepage, we added a video block to the collage section. Still, you can also add the Image, Product, and Collection blocks. See more about the Collage section.

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 Collage for the Mobile layout.
  
• We enabled the card border and the section in full-width.
• We added the video from the internal source (Shopify admin->Content) with the width 100%. In the block, we specified the Cover text and enabled the Autoplay option.
• We added a link to the external video and added a video alt text.

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. Here we enabled the Center for the Content position, 6rem for the Button size, 4.5 rem for the Font size, Text color #FFFFFF, Cover background #C0C0C0, 0 for the Background opacity, and 6rem for Inner paddings.
• We enabled Bold text and Text in uppercase.

Customize the Newsletter

The Newsletter section will help you build long-lasting relationships with the clients by sending regular emails. See more details about the section. 

Applied settings for the section:

• In general settings, we enabled the following options: Enable on-scroll reveal animation and Show section in full-width.
• The content has a max width of 400 px, and the Right position.
• The cover background color is 000000, the cover foreground color is FFFFFF. No color for the cover background gradient.
• We added a Heading with size H2. We added a Subheading, too.
• We enabled the Show Minimal form in the Email form.

Customize the Blog posts

Read more about the Newsletter section. 

Applied settings for the section:

• In general settings, we added the Heading with its size H2.

• We added 3 blog posts.

• We enabled the following options: Show featured image, Show slideshow buttons, Show the "View all" button with the Button value for "View all" appearance, and On-scroll reveal animation.

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

Customize the Section border separator

Pay attention to a section border separator that is added under the blog posts section on the Workshop homepage. Still, you can drag the section to other places. The section is configurable. Click on the Section Border Separator to see the settings. On the Workshop homepage, we use a 1px Border height and a transparent Border color.

Customize the Footer

With the Workshop preset, we added the new options to the Footer settings. Please follow the guide. You can also learn more about the advanced configuration of the footer for Charge designs.

Applied settings for the section:

• In general settings, we enabled the following options: Heading uppercase, Use background image, and Show payment icons.

• The container width is 1400px. The control image's bottom padding is 20rem. The gradient color stop value is 30%. The gradient transparency value is 45%. The control line height is 2.4px. The menu is aligned to the left.
• The payment icon width is 40%.
• In the Footer Contacts, we enabled the following options: Show support picture, Show contact email, Show newsletter form, Show contact phone. The support picture's width is 130px and it is aligned to the top.
• We added four menus.

Recommendations

• You may notice the same product quantity in the row for all sections. 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. See the image sizes used in the Charge theme. 
• See the way to find extra sections: