Azzel Home Page

Azzel 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 textInput, button shadow

  • Options for auto-playing content in the header top block and displaying the "country/region selector" and "language selector."

A screenshot of a phone Description automatically generated

Adding an Item in Header Top:

  • Enter display content.

  • Assign a link if applicable and select to display the link in a new window; if unchecked, the link will display in the current window.



3. Menu items


Before creating a menu item, users should configure the header block as follows:
  1. Sticky Header: The menu block remains at the top of the page when the user scrolls, applicable only on desktop displays.
  2. Color Scheme: Choose the menu block color display.
  3. Make Header on Slide Show: When selected, the header is included in the slider show. Set the header block display color when in the slide. Upon hovering over the block, it will display the default color. If the header is not in the slide, it shows the default color as per the color scheme selection.
  4. Logo: Select the logo image.
  5. Mobile Menu Color: Choose the display color on mobile.
Customize spacing in section configuration.


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.





In the Footer, configure settings as follows:

  • Color Scheme: Choose the color scheme for the footer.

  • Logo: Select the logo image and set its display size.

  • Enable or disable options for displaying the “country/region selector,” “language selector,” and “payment method” as needed.

  • Set the number of columns displayed on desktop, mobile, and tablet screens.

A screenshot of a computer Description automatically generated

To create blocks within the footer, select Add Block and choose Menu, Newsletter, or Block Liquid:

A screenshot of a computer Description automatically generated

  • Menu Block:

    • Heading: Enter a name for the block.

    • Menu: Choose the footer menu created in the navigation settings.

  • Newsletter Block:

    • Enter the title in Heading and detailed content in Description.

  • Block Liquid: Allows users to create a custom block using code within the footer.

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 width is set for them. If a section does not have a width setting, it will default to the full width chosen in theme settings.

    • Related Articles

    • Azzel Theme - Contact Page Config

      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. I. Create the Contact Page Go to Online Store in Shopify. Access Pages. Click Add Page and ...

    • 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

      I. Create the About Page Go to Online Store in Shopify. Access Pages. Click Add Page and enter a title. In Theme Template, select the about-us template. II. Configure the About Page Access Themes → Customize → Page → About. Breadcrumb: Set up page ...

    • 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 FAQs You can ...

    • Azzel Theme - Product Page Config

      The Product Details are displayed in three main blocks: Product Image: Displayed at the top, right below the header. Product Information Block: Shown on the right side of the screen. Product Name and Options Block: Displayed on the left side of the ...