Understanding Sections and Blocks

1. Sections are the building blocks of your store's layout in Shopify, providing a flexible way to arrange content on each of your store's pages. Accessible from the left-side menu in the Theme Editor, sections are made up of blocks that provide the content of your website.
2. Each block serves a specific purpose, such as adding a header or footer, showcasing single or multiple images, displaying links, showing product information, or adding text. Using sections and blocks in your templates gives you the freedom to control the design and feel of your online store without writing any code. You can add up to 25 sections to each template.
   

Header

Logo

1. The logo is an essential part of your brand identity, and can be customized in size, position, and style to fit the overall design of your store.
   
2. Your logo appears in the header on all pages and on the password page.
   
3. Logo images can be up to 300 pixels wide.
   

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and click Customize.
3. Click Theme settings.
4. Click Logo. In the Logo area, hover over the logo Select image. You have 3 options:
   
5. To use an existing image from your Shopify admin, click on an image to select it.
6. To use an image from your computer, click Upload. Select the image you want to use from your computer. The image will be automatically selected after the upload is finished.
7. To select a free image, click Explore free images, search for or click on an image to select it.
   

Customize your favicon image:

A favicon is a small icon that appears in the browser tab next to your website's title.

1. In the Logo area, hover over the favicon image.
2. Click the image.
   
3. You will have 3 options to select your favicon image
   
4. To use an existing image from your Shopify admin, click on an image to select it. 
   
5. To use an image from your computer, click Upload. Select the image you want to use from your computer.
   
6. To select a free image, click Explore free images, search for or click on an image to select it.
   

Note that the favicon image will be scaled down to 48 x 48 px.

Header top

The header top is the area at the very top of your store's pages, and can be customized with color options, text content, and other interactive elements.

To customize the colors:

1. You can select a pre-made color scheme for your header top, or you can create a new color scheme by going to Theme settings > Add Scheme.
   

1. Once in the color scheme customization page, you will be able to customize:
   

General	Background, Background Gradient, Text, Link, Link Hover, Border, Block title
Theme library	Color, Text on primary color
Input	Background, Border, Text
Button	Background, Border, Text
Input, Button shadow	Shadow

Optional: You can also enable auto-playing content on the header top, or enable the "country/region selector" and "language selector" to appear.

Add an Item in the Header Top:

1. Enter the text you want to display.
2. Assign a link (if applicable) and select whether you want the link to open in a new window or the current window.
   

​

Menu Items

Before adding menu items, you can configure the header block. These options will affect the entire header:

1. Sticky Header: Enable this to keep the menu at the top of the page when scrolling (only on desktop).
2. Color Scheme: Choose a color scheme for the menu area.
3. Header in Slideshow: Enable this to include the header in the slideshow. When enabled, the header will use the chosen color, but will revert to the default color on hover. If disabled, the header will always use the default color from the chosen scheme.
   
4. Logo: Choose the logo image to display in the header.
5. Mobile Menu Color: Choose the display color for the mobile menu.
6. Spacing: Customize the spacing of the header block.
   

Add a menu item:

1. In the Theme Editor, click Add block.
2. Select Horizontal item menu.
   

General settings:

1. At the selected Horizontal item menu, you need to fill in the title for the menu at the Horizontal title.
   
2. Under Target, you can choose whether to open the link in the current window or in a new window.
   

Dropdown configuration settings:

1. Enable Dropdown Menu: Enable or disable dropdown menus for this menu item.
2. Dropdown Color Scheme: Choose the color scheme for the menu items that appear on hover.
3. Dropdown Width: Set the width of the dropdown menu.
4. Dropdown Align: Choose how the dropdown menu aligns with the header (e.g., left, center, right).
   

Category block settings: You can choose to display product categories as a block in the menu, by enabling the "Enable category block" setting. Then, select the menu you would like to display.

Create a Menu in Shopify Navigation: To create or edit the menus you are going to use in your theme, go to your Shopify admin and click on Online Store > Navigation > Create menu.

Menu customization:

After selecting the menu you would like to use in the theme editor, you can further customize the appearance of the menu by:

1. Set the Block width, which controls the width of the menu container, from 1 to 6.
2. Set the Category column width, which controls the amount of columns that the categories will be displayed in, from 1 to 6.
3. Content Display: Enable the display of images, image links, and descriptions of the categories.
4. Top and Bottom block width: You can customize the width, in column format, of each of the top and bottom blocks.

Footer

1. Color Scheme: Choose a color scheme for the footer.
2. Logo: Select the logo image and set its display size.
3. Country/Region Selector: Enable or disable the display of the "country/region selector".
4. Language Selector: Enable or disable the display of the "language selector".
5. Payment Methods: Enable or disable the display of payment method icons.
6. Columns: Set the number of columns displayed on desktop, mobile, and tablet screens.
   

1. Menu Block:
1. Heading: Enter a name for the block.
2. Menu: Choose a footer menu previously created in your Shopify admin. To create a footer menu, go to your Shopify Admin, then click on Online Store > Navigation.
2. Newsletter Block:
1. Heading: Enter the title for the newsletter section.
2. Description: Enter a detailed description for the newsletter section.
3. Block Liquid: Use this to create a custom block using HTML and Liquid code, which allows you to add unique functionality and features to your footer.