Azzel Theme Sections / Home Page

Azzel Theme Sections / Home Page

Themes use Sections to create your ideal layout, accessible from the left-side menu in the Theme Editor. Most sections are made up of blocks that serve a specific function, such as header, footer, single images, a collage of images, or links. Using sections and blocks in your templates provides more flexibility in how you arrange your store's content, enabling you to control the look and feel of your online store without the need to edit code. Each template can have up to 25 sections.



I. Header

In the Logo, you can upload your business's logo to your online store and customize it through the size, position, and styling to ensure it complements your overall store design. Your logo shows in areas:

  • Header across all pages

  • Password page

Logo images can reach up to 300 px of width.


How to customize your logo

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Theme settings.

  4. Click Logo.

  5. In the Logo area, click Select image, and you have 03 options:

  • To use an image that you have already uploaded to your Shopify admin, click an image to select it and then click Select.

  • To use an image from your local computer, click Upload. Choose an image from your computer and click Open to start the upload. It will be automatically selected when the upload is finished. Click Select.

  • To select a free image, click Explore free images and search for or click an image to select.

  1. Add alt text to your logo image:

1. Click Edit alt text.

2. In the Edit image window, enter a brief description of the image.

3. Click Save.


How to customize your logo width 

  1. Click Theme settings.

  2. Click Logo.

  3. In the Desktop logo width area, toggle the slider to the pixel width you want.



2. Header top:

In this section, you can simply choose the theme color as well as the text color. 

  • Choose a premade Color scheme.

  • Or you can edit your theme's colors by selecting theme settings - Add Scheme. Here you can customize the color scheme in sections such as:


  • Background

  • Background gradient

  • Text

  • Link

  • Link hover

  • Border default

  • Block title


  • Theme primary color

  • Text on primary

  • Input background

  • Border input

  • Text input


  • Primary button background

  • Primary button border

  • Primary button text



  • Secondary button background

  • Secondary button border

  • Secondary button text

  • Input, button shadow


In Header top, you can add multiple items by clicking Add item.



Items are displayed as slides. You can choose to enable or disable Auto play functionality.




3. Menu items


To have a menu displayed in the Header, you first need to do the following:

  1. Click Add block 

  2. Click Horizontal item menu 


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.

At Dropdown configuration, you can customize the display of menu items in dropdown format by selecting Enable and Disable in the Enable dropdown item section.




Then you can choose to customize: 

  • Dropdown color scheme - menu item color displayed when hovering the mouse.

  • Dropdown width - size displayed.

  • Dropdown align - display item and container on the theme.


For categories to display in the menu, you first need to select “Enable” or “Disable” in the Enable category block section. Then select the menu to be displayed.


To create a menu, at the online store, click on Navigation and select Add menu. (in  theme setting)

 



After creating and selecting a menu, you can customize Block width from 1 to 6 in column, and Category column from 1 to 6.

You can also choose to display the image, image link and description, width in column format for each Top block and Bottom Block.

II. Template

  1. Tapita - Slidershow

You can customize the configuration for each item for Slideshow as follows:

- Section Header:
  1. Heading: Enter title
  2. Heading size: Title display size options
  3. Sub-heading: Enter subtitle if any
  4. Description: Enter detailed description information
  5. Alignment: Align display information

- Section Body:
  1. Image ratio: Select image display ratio

  2. Navigation: navigate to another page.

  3. Dots: displayed for the number of sliders created, you can move sliders by clicking on each dot.

  4. Auto play: Slider moves automatically.

  5. Loop: Slider moves in a loop.

  6. Effect: customize the slide transition effect such as: Slide, Fade, Cube, and Flip.




Next, you customize the remaining two configurations: Section Layout and Section Optimize.

- Section Layout:
  1. Color Schema: Select a background color for the section if the section does not display a background image.
  2. Background: Select background image if available
  3. Select or unselect Section full width (if not selected, you can customize the desired size at Section max width)
  4. Select or deselect Content full width (if not, you can customize the desired size at Content max width )
  5. Adjust padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).

You go to Add Slide item, and then select the image for the slide displayed on desktop and mobile. You can customize information displayed on slides such as: 

  • Heading

  • Short description

  • Text in the link button

  • Select the link to open in a new window or open in the current window if not seclected





You can customize the configuration for each item for Slideshow as follows:

- Section Header:
  1. Heading: Enter the title
  2. Heading size: Select the size of the title display
  3. Sub-heading: Enter the sub-title if any
  4. Description: Enter detailed description information
  5. Alignment: Align the display information
  6. Enter text and select the link for the button at the button label and button link.
- Section Body:
  1. Image ratio: Select image display ratio
  2. Select the number of columns to display the banner item on mobile, desktop and tablet screens at Columns number

- Section footer: Enter text and select the link for the button at button label and button link.
Next, you customize the remaining two configurations: Section Layout and Section Optimize
- Section Layout:
  1. Color Schema: select the background color for the section if the section does not display a background image
  2. Background: select the background image if available
  3. Check or uncheck Section full width (if not, you can customize the desired size at Section max width)
  4. Check or uncheck Content full width (if not, you can customize the desired size at Content max width)
  5. Adjust the padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).

At Banner Grid, you add Item Banner, select the display image, item link and customize the display configuration as follows:

  1. Postion: Select to display all content contained in the banner item
  2. Fill in information in Heading and Short description
  3. Enter a name for the button at Button label
  4. Button type
  5. Select the link to open in a new window or open in the current window if not seclected

  1. Image with text

This section is divided into 2 layouts: image and content. And to complete this section, users need to configure the following items:


- Section Header:
  1. Heading: Enter the title
  2. Heading size: Select the size of the title display
  3. Sub-heading: Enter the sub-heading if any
  4. Description: Enter detailed description information
  5. Alignment: Align the display information
  6. Enter text and select the link for the button at button label and button link.
- Section Body:
  1. Click to select or not at Show box shadow
  2. Select the displayed image, image ratio, image size
  3. Select the left or right image display position at Desktop image placement
  4. Link: the target destination when clicking this image
  5. Select the distance between information and image at Information spacing


- Section footer: 
  1. Enter text and select the link for the button at the button label and button link.
  2. Select the link to open in a new window or open in the current window if not seclected
Next, you customize the remaining two configurations: Section Layout and Section Optimize
- Section Layout:
  1. Color Schema: select the background color for the section if the section does not display a background image
  2. Background: select the background image if available
  3. Check or uncheck Section full width (if not checked, you can customize the desired size at Section max width)
  4. Check or uncheck Content full width (if not checked, you can customize the desired size at Content max width)
  5. Adjust the padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).

    To display the content, in the Image with text section, click add block and select add as well as enter information for the following items
  1. Title
  2. Content
  3. Button



  1. Marquee text


  • At Marquee text - add marquee item: Enter the marquee text and link (optional). Select the link to open in a new window or open in the current window if not seclected.


  • Under Marquee text

    • Size: marquee text size

    • Speed (seconds): sliding speed to show all of the marquee text

Next, you customize the Section layout and Section optimize configuration


- Section Layout:

  1. Color Schema: select the background color for the section if the section does not display a background image
  2. Background: select the background image if available
  3. Check or uncheck Section full width (if not checked, you can customize the desired size at Section max width)
  4. Check or uncheck Content full width (if not checked, you can customize the desired size at Content max width)
  5. Adjust the padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).


  1. Look book slider


The lookbook slider includes a main lookbook image on the left side of the screen and on the right are the products that are optionally displayed in the lookbook in slide form. And you customize the configuration according to each of the following items:

- Section Header:
  1. Heading: Enter the title
  2. Heading size: Select the title display size
  3. Sub-heading: Enter the sub-title if any
  4. Description: Enter detailed description information
  5. Alignment: Align the display information
  6. Enter text and select the link for the button at the button label and button link.
  7. Select the link to open in a new window or open in the current window if not seclected
- Section Body:
  1. Select image to display

  2. Navigation: navigate to another page.

  3. Dots: displayed for the number of sliders created, you can move sliders by clicking on each dot.

  4. Auto play: Slider moves automatically.

- Section footer: 
  1. Enter text and select the link for the button at button label and button link.
  2. Select the link to open in a new window or open in the current window if not seclected

Next, you customize the two remaining configurations: Section Layout and Section Optimize

- Section Layout:
  1. Color Schema: select the background color for the section if the section does not display a background image
  2. Background: select the background image if available
  3. Check or uncheck Section full width (if not checked, you can customize the desired size at Section max width)
  4. Check or uncheck Content full width (if not checked, you can customize the desired size at Content max width)
  5. Adjust the padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).

- Item Lookbook
  1. Select products to display
  2. Adjust Offset top, and Offset left

6. Product tab



In the Product tab, customize the configuration for each item as follows:

- Section Header:
  1. Heading: Enter the title
  2. Heading size: Select the size of the title display
  3. Sub-heading: Enter the sub-heading if any
  4. Description: Enter detailed description information
  5. Alignment: Align the display information


- Section body
  1. Select the number of columns to display the product on desktop, mobile and tablet
  2. Enter a name for the button in the button label

Note:
  1. To customize the number of products displayed on the page, you can go to Theme settings - Section product tabs and customize the total number of products displayed.
  2. Under Theme Settings - Product card, you can configure button on-hover display, and also button styles on mobile.




- Section Layout:
  1. Color Schema: Select the background color for the section if the section does not display a background image
  2. Background: Select the background image if available
  3. Check or uncheck Section full width (if not, you can customize the desired size at Section max width)
  4. Check or uncheck Content full width (if not, you can customize the desired size at Content max width)
  5. Adjust the padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).

Note: You can set the display of product details in theme settings. After setting in theme settings - all products in the store will be displayed in detail as set.


How to add Product tab:

  1. Add tab.

  2. Enter a name for the tab (Tab name).

  3. Select collection for tab.




You customize the configuration for the Gallery section according to the following items:

- Section Header:
  1. Heading: Enter the title
  2. Heading size: Select the size of the title display
  3. Sub-heading: Enter the sub-heading if any
  4. Description: Enter detailed description information
  5. Alignment: Align the display information
  6. Enter text and select the link for the button at the button label and button link.
  7. Select the link to open in a new window or open in the current window if not seclected

- Section Body:
  2. Image ratio: Select the image display ratio
  3. Select the number of columns to display the banner item on mobile, desktop and tablet screens at Columns number

- Section footer: Enter text and select the link for the button at button label and button link.
Next, you customize the two remaining configurations: Section Layout and Section Optimize

- Section Layout:
  1. Color Schema: select the background color for the section if the section does not display a background image
  2. Background: select the background image if available
  3. Check or uncheck Section full width (if not checked, you can customize the desired size at Section max width)
  4. Check or uncheck Content full width (if not checked, you can customize the desired size at Content max width)
  5. Adjust the padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).

How to add Gallery:

  1. Add Gallery item

  2. Select a photo for gallery item


  1. Newsletter



Section Newsletter is divided into two layouts including images and form submission. And you need to customize the configuration as follows:
  2. Enter information in Heading and Description
  3. Select the distance between images and content displayed in the form submission layout

Next, you customize the remaining two configurations: Section Layout and Section Optimize


- Section Layout:

  1. Color Schema: select the background color for the section if the section does not display a background image
  2. Background: select the background image if available
  3. Check or uncheck Section full width (if not checked, you can customize the desired size at Section max width)
  4. Check or uncheck Content full width (if not checked, you can customize the desired size at Content max width)
  5. Adjust the padding and margin ratio on mobile, desktop and tablet screens.



- Section optimize:

  • Section lazyload - lazy loading speed (a section will only load on the page when you scroll down to that section).


10. Product slider



Product slider includes information and products, displayed horizontally on the desktop. And need to customize the configuration as follows:

- Section Header:
  1. Heading: Enter title
  2. Heading size: Select the size of the title display
  3. Sub-heading: Enter sub-heading if any
  4. Description: Enter detailed description information
  5. Alignment: Align the display information
  6. Enter text and select the link for the button at button label and button link.

- Section body
  2. Select Collection
  3. Select the number of products to display on the page
- Section configuration

  1. Navigation: navigate to another page.

  2. Dots: displayed for the number of sliders created, you can move sliders by clicking on each dot.

  3. Auto play: Slider moves automatically.

  4. Loop: Slider moves in a loop.

  5. Select the number of columns to display products on mobile, desktop and tablet screens




When customizing the Footer configuration, you can set The display of language options and region/country codes by checking Enable country/region selector and Enable language selector. And check to display payment methods. The footer is divided into 1 block, for each display item you need to choose the number of columns to display for that item.

It is possible to adjust the distance between columns in the footer in Spacing and Section padding.


  1. Block store

How to add store information: 

  1. Add block - block store.

  2. Upload your logo and set the image width

  3. Enter a description

  4. Column: set the number of columns to show


How to add menu:

  1. Add block - menu.

  2. Fill in Heading.

  3. Set the number of columns to show.



    • Related Articles

    • Azzel Theme - FAQ Page Config

      To create a FAQ Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select FAQ template To configure FAQ Page: Access Themes → Customize → Page → FAQ Breadcrumb ...

    • Azzel Theme - Blog Page Config

      1. To create a Blog Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Blog posts 3. Click Add blog post 2. After completing the content for Blog, in Organization, fill in the following information: Author: Name of the author ...

    • Azzel Theme - About Page Config

      1. To create an About Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select about-us template 2. To configure About Page: Access Themes → Customize → Page → ...

    • Azzel Theme - Contact Page Config

      To create a Contact Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select Contact template To configure Contact Page: Access Themes → Customize → Page → ...

    • Azzel Theme - Product Page Config

      To customize the Product page, you need to access Default product → Products. In Product Information, you can customize the display configuration: Check “Enable sticky content on desktop” to add sticky status to product information. Check "Enable ...