Azzel Theme Setting

Azzel Theme Setting

To access the theme settings in the theme editor, click on the second icon beside the template options.


Now, let’s see all the components on the theme settings one by one!

1. Color
You can create and customize unique color palettes and apply them to different sections across your entire online store. You follow these steps
  1. Click the Theme settings gear icon
  2. Click Colors.
  3. In the Schemes section, click an existing scheme or click Add Scheme to add a new color scheme.
  4. To edit the color scheme, click the color swatch to change the following content type colors
    1. General

    2. Background

    3. Background gradient

    4. Text

    5. Link

    6. Link hover

    7. Border default

    8. Block title

    9. Theme primary

    10. Primary color

    11. Text on primary

    12. Input

    13. Background

    14. Border

    15. Text

    16. Button

    17. Background

    18. Border

    19. Text

    20. Input, button shadow

  1. To set your color, enter a hex color code or choose the color from the color picker. To set the color to transparent, delete the hex color code from the text field.
  2. Click Save.

2. Typography
The Typography gives you access to the font settings for your theme. You can use these options to customize the headings and body font style as well as size on your site.
  1. Click the Theme settings gear icon.
  2. Click Typography.
  3. To change a font type for your store's headings or body text, click Change in the Headings or Body section.
  4. Click the name of the font that you want to use, and then click Select.
  5. Click Save.


3. Layout
The Layout options give you control over the theme layout. You can adjust the page width as well as spacing between sections and grids using the Layout settings.
  1. Click the Theme settings gear icon.
  2. Click Layout.
  3. Locales right to left: This is the right to left configuration, you can enter the language code here, and the right to left configuration will display the language you choose
  4. Use the Page width range slider to choose a page width between 1000 px and 1600 px. The default setting is 1600 px.
  5. Optional: Use the range slider to add vertical Space between template sections on your pages. You can add up to a maximum of 100 px between sections.

4. Animation 
Animations allow you to add movement and visual interest to your online store. You can activate a fade-in animation that reveals your store's sections on scroll, and a hover effect for your cards and buttons.



5. Button
You can customize the settings for call to action buttons on your online store by adding shadows, changing the spacing or opacity, and adjusting the shape of your buttons.


  1. Click the Theme settings gear icon.
  2. Click Buttons.
  3. Customizable options for borders are:
  1. Thickness, which changes the outline of the item.
  2. Opacity, which sets the visibility of the item outline.
  3. Corner radius, which rounds the corners of your item.
  1. Customizable options for shadows are:
    1. Opacity, which changes the visibility of the item's shadow. A shadow opacity of 0% removes the item's shadow entirely.
    2. Horizontal and Vertical offset range sliders, which move the location of the shadow around the item.
    3. Blur range slider, which changes the opacity of the item's shadow.
6. Variant Pills

Variant pills allow you to display the variants of a product on a product page or a featured product section. Customers can select the desired variant to add the product to their cart without needing to change product pages. You can customize how your variant pills display on your online store.

  1. Click the Theme settings gear icon.
  2. Click Variant pills.
  3. Customizable options for borders are:
    1. Thickness, which changes the outline of the item.
    2. Opacity, which sets the visibility of the item outline.
    3. Corner radius, which rounds the corners of your item.
  1. Customizable options for shadows are:
    1. Opacity, which changes the visibility of the item's shadow. A shadow opacity of 0% removes the item's shadow entirely.
    2. Horizontal and Vertical offset range sliders, which move the location of the shadow around the item.
    3. Blur range slider, which changes the opacity of the item's shadow.

7. Input
Inputs are interactive areas that require customer input, for example, a quantity selector, an email signup form, or cart notes. You can adjust the appearance of your online store inputs.

  1. Click the Theme settings gear icon.
  2. Click Inputs.
  3. Optional: Use the range slider to change the appearance of your input Border.
  4. Optional: Use the range slider to change the input Shadow. Setting the shadow Opacity to 0% removes the shadow.
8. Product card
The product cards let you customize how you want to display the product cards in your online store.


  1. Click the Theme settings gear icon.
  2. Click Product card.
  3. Select image aspect ratio
  4. Turn on/off the display of product card effects
  5. Product button:
    1. Background
    2. Text
9. Collection card
These options let you change the way you want to show the collection cards in your store.


  1. Click the Theme settings gear icon.
  2. Click Collection card.
  3. To choose a card style, use the Style option.
  4. Optional: To add space around your card images, use the Image padding range slider.
  5. Optional: Choose between Left, Center (default), or Right for the Text alignment of your cards.
  6. Optional: In the Color scheme section, click Change to select a color scheme for your cards.
  7. Optional: Use the range slider to change the appearance of your card Border.
  8. Optional: Use the range slider to change the card Shadow. Setting the shadow Opacity to 0% removes the shadow.
10. Blog card

Similar to the product cards and Collection cards, the blog cards will let you customize the blog cards in your Shopify store.



  1. Click the Theme settings gear icon.
  2. Click Collection card.
  3. To choose a card style, use the Style option.
  4. Optional: To add space around your card images, use the Image padding range slider.
  5. Optional: Choose between Left, Center (default), or Right for the Text alignment of your cards.
  6. Optional: In the Color scheme section, click Change to select a color scheme for your cards.
  7. Optional: Use the range slider to change the appearance of your card Border.
  8. Optional: Use the range slider to change the card Shadow. Setting the shadow Opacity to 0% removes the shadow.
11. Product label
To configure these labels, go to Theme Setting - Product Label and adjust settings as follows:
New label:
  1. Show New Label: Enable or disable. When enabled, new products added will display a “New” label in the top-left corner of the product image.
  2. Color Scheme: Choose the label color.
  3. Label: Enter the label text.
  4. End Date After: Set the number of days for displaying the label.
A screenshot of a computer Description automatically generated

Sale label: 
A screenshot of a computer Description automatically generated
  1. Show Sale Label: Enable or disable. When enabled, products with two price levels will display a “Sale” label in the top-left corner.
  2. Color Scheme: Choose the label color.
  3. Label: Enter the label text.
  4. Display Sale Percent: Enable or disable percentage display of price difference. If disabled, only the “Sale” label will appear
A screenshot of a computer Description automatically generated

Best Seller label


  1. Show Best Seller Label: Enable or disable. When enabled, a “Best Seller” label will appear in the top-left corner of the product image.
  2. Color Scheme: Choose the label color.
  3. Label: Enter the label text.
  4. Best Seller Tag: Enter a tag name. Then, go to Product - any product - Tag and enter the “best seller” tag to display this label on the product image.


12. Content Containers
Containers are used for the text element of content sections, for example, the text box on a slideshow, on an image banner, or in the columns of multicolumn sections. You can customize the appearance of content containers for your online store.

  1. Click the Theme settings gear icon.
  2. Click Content containers.
  3. Use the range slider to change the appearance of your content container Border.
  4. Use the range slider to change the content container Shadow. Setting the shadow Opacity to 0% removes the shadow.

13. Media
Media is the visual component of sections, for example, product media or an image in the Image with text section. You can add borders and shadows to your media.

  1. Click the Theme settings gear icon.
  2. Click Media.
  3. Use the range slider to change the appearance of your content container Border.
  4. Use the range slider to change the content container Shadow. Setting the shadow Opacity to 0% removes the shadow.
14. Dropdowns and pop-ups
You can adjust the appearance of drop-down menus, pop-up modals, and cart pop-ups on your online store.


  1. Click the Theme settings gear icon.
  2. Click Dropdown and pop-ups.
  3. Choose colors for dropdowns and pop-ups
15. Drawers
Drawers are hidden, interactive containers that display when tapped or clicked, such as a collapsible menus or collection filter options. You can customize the border and shadow of the drawers on your online store.


  1. Click the Theme settings gear icon.
  2. Click Media.
  3. Use the range slider to change the appearance of your content container Border.
  4. Use the range slider to change the content container Shadow. Setting the shadow Opacity to 0% removes the shadow.
16. Social Media
You can add links to your social media accounts that display in the footer of your online store.

  1. Click the Theme settings gear icon.
  2. Click Social media.
  3. To add links to your social media accounts, enter the website addresses for your accounts in the relevant Social accounts fields. 
17. Search behavior
These options allow you to choose whether you want to show product suggestions when shoppers search any term. You can also show vendors as well as prices along with the products.


  1. Click the Theme settings gear icon.
  2. Click Search behavior.
  3. To activate or deactivate search suggestions, select or deselect Enable search suggestions.
  4. Optional: To display or hide the product vendor in search suggestions, select or deselect Show product vendor.
  5. Optional: To display or hide the product price in search suggestions, select or deselect Show product price.
18. Currency format
You can choose to have the currency code displayed with prices on your products.

  1. Click the Theme settings gear icon.
  2. Click Currency format.
  3. To display currency codes, select Show currency codes.
19. Cart
You can change the style of the cart on your online store. When a customer adds a product from your store to their cart, the cart can be displayed as a drawer, a page, or a pop-up notification. To keep the customer on the product page, use the drawer or pop-up notification option. To take the customer to the cart page, use the page option. When the customer's cart is empty, you can display a featured collection in the cart drawer.

  1. Click the Theme settings gear icon.
  2. Click Cart.
  3. Use the Cart type drop-down menu to select the Drawer, Page, or Popup notification cart style.
  4. Optional: To display the vendors of the items in a customer's cart, select Show vendor.
  5. Optional: To provide customers with a text box where they can enter special requests or add extra order information, select Enable cart note.
  6. Optional: If you select Drawer as your Cart type, then you can display a collection in the cart drawer when it's empty:
    1. In the Cart drawer area, click Select collection.
    2. Click the name of the collection that you want to display, and then click Select.
  7. Optional: If you select Drawer as your Cart type, then you can change the color scheme of your cart drawer by taking the following steps:
    1. In the Cart drawer > Color scheme area, click Change.
    2. Select a color scheme that you want to use for your cart drawer.
  1. At Cart drawn, you can customize vendor display, quick view, product rating
20. Newsletter popup


You need to scroll on the page past the banner section to see the newsletter button displayed on the left side of the screen. And when you click on the button, the newsletter will be displayed from bottom to top.
And to configure, you need to do the following steps:

  1. Click the Theme settings gear icon.
  2. Click Newsletter popup.
  3. Select newsletter display on page
  4. Select button and popup color
  5. Enter text for button, newsletter title, description
  6. Select image display and image ratio and image link if available
  7. Choose to display social media in newsletter

21. Gift Card



  1. Click the Theme settings gear icon.
  2. Click Gift Card.
  3. Select image.

22. Compare



When you want to compare any product, just click the compare icon on the product. The added product will be displayed in a popup on the left side of the screen. And to configure you need to do the following steps:
  1. Click the Theme settings gear icon.
  2. Click Gift Card.
  3. Select compare display on page
  4. Enter content at compare empty


23. Back to top
Back to top is displayed as an arrow icon, when you scroll down, the back to top icon will be displayed. And it helps you to return to the top of the page without having to scroll up.



  1. Click the Theme settings gear icon.
  2. Click Back to top.
  3. Select back to top display on page
  4. Select the color to display the back to top icon


24. Mobile


  1. Click the Theme settings gear icon.
  2. Click Mobile
  3. Choose to display sticky menu when scrolling on mobile screen
  4. Select sticky bottom display color

25. Custom CSS
The Custom CSS section allows you to enter your own CSS code, for example to customize the appearance of your online store's buttons beyond the default settings that are available, or to apply unique styling to specific text elements.
Custom CSS in your theme settings affects all pages in your online store, except your checkout.

26. Theme Style
A theme style is a collection of settings chosen by a theme designer. You can apply a theme style to your store to give it a polished look and feel. All themes have a theme style applied by default. The other theme style options that you have depend on which theme you use.
  1. Click the Theme settings gear icon.
  2. Click Theme Style
  3. Select the theme style that you want to use, and then click Change style

    • Related Articles

    • Azzel Theme - Compare Config

      You can notice the Compare section displayed as an icon of two opposite arrows ? on the right side of the screen. With each product image, when clicking the icon of two opposite arrows ? on the image, it means that the user is adding the product to ...

    • Azzel Theme - Collections Config

      Collections List Page The Collections List Page displays all collections in the store in a list format. How to Create a Collections List Page: Access the Collections List section. Choose how to display collections in Sort Collections By (e.g., ...

    • 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 ...

    • Azzel Theme - Lookbook Config

      To create Lookbook 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 Lookbook template To configure Lookbook Page: Access Themes → Customize → Page → ...

    • 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 ...