Understanding Sections and Blocks
- 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.
- 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.
Logo
- 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.
- Your logo appears in the header on all pages and on the password page.
- Logo images can be up to 300 pixels wide.
Customize your logo:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and click Customize.
- Click Theme settings.
- Click Logo. In the Logo area, hover over the logo Select image. You have 3 options:
- To use an existing image from your Shopify admin, click on an image to select it.
- 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.
- 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.
- In the Logo area, hover over the favicon image.
- Click the image.
- You will have 3 options to select your favicon image
- To use an existing image from your Shopify admin, click on an image to select it.
- To use an image from your computer, click Upload. Select the image you want to use from your computer.
- 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.
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:
- 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.
- 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:
- Enter the text you want to display.
- Assign a link (if applicable) and select whether you want the link to open in a new window or the current window.
Before adding menu items, you can configure the header block. These options will affect the entire header:
- Sticky Header: Enable this to keep the menu at the top of the page when scrolling (only on desktop).
- Color Scheme: Choose a color scheme for the menu area.
- 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.
- Logo: Choose the logo image to display in the header.
- Mobile Menu Color: Choose the display color for the mobile menu.
- Spacing: Customize the spacing of the header block.
Add a menu item:
- In the Theme Editor, click Add block.
- Select Horizontal item menu.
General settings:
- At the selected Horizontal item menu, you need to fill in the title for the menu at the Horizontal title.
- Under Target, you can choose whether to open the link in the current window or in a new window.
Dropdown configuration settings:
- Enable Dropdown Menu: Enable or disable dropdown menus for this menu item.
- Dropdown Color Scheme: Choose the color scheme for the menu items that appear on hover.
- Dropdown Width: Set the width of the dropdown menu.
- 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:
- Set the Block width, which controls the width of the menu container, from 1 to 6.
- Set the Category column width, which controls the amount of columns that the categories will be displayed in, from 1 to 6.
- Content Display: Enable the display of images, image links, and descriptions of the categories.
- Top and Bottom block width: You can customize the width, in column format, of each of the top and bottom blocks.
The footer is the section at the bottom of your store's pages, often used to display important information such as contact details, links, and payment information.
Configure Footer Settings:
- Color Scheme: Choose a color scheme for the footer.
- Logo: Select the logo image and set its display size.
- Country/Region Selector: Enable or disable the display of the "country/region selector".
- Language Selector: Enable or disable the display of the "language selector".
- Payment Methods: Enable or disable the display of payment method icons.
- Columns: Set the number of columns displayed on desktop, mobile, and tablet screens.
Add Footer Blocks: You can add different types of content blocks to your footer by selecting "Add Block". You can choose from:
- Menu Block:
- Heading: Enter a name for the block.
- 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.
- Newsletter Block:
- Heading: Enter the title for the newsletter section.
- Description: Enter a detailed description for the newsletter section.
- 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.
Full-Width Layout Note: To make the entire homepage full-screen, go to Theme Settings > Layout and select "Make layout full width." However, individual section widths will take priority if a width is set for them. If a section does not have a specific width, it will default to the full width set in theme settings.
Related Articles
Contact Page
The Contact Us page is divided into two sections: the left side displays the contact form and information, while the right side shows the store's location. Creating a Contact page Go to Online Store in Shopify Access Pages Click Add Page and enter a ...
Blog Page
Create the Blog Page Go to Online Store in Shopify. Access Pages. Click Add Page and enter a title. Add introductory text or information for your blog page in the Title and Content field. Add a Title and Description in Search Engine Listing to see ...
Compare Page
A Compare Page allows customers to view a comparison of different products in your store. Customers can add products to the comparison list by clicking the compare icon (two opposite arrows ?) on the product image. With each product image, when ...
About Page
An "About" page is a dedicated section of your website that tells your brand's story, introduces your team, and explains your mission, values, and what makes your business unique. It's an essential tool for building trust, connecting with your ...
FAQ Page
An FAQ (Frequently Asked Questions) page is a dedicated section of your website that answers common questions customers may have about your products, services, policies, or company. It's a valuable tool for providing quick and accessible information, ...