Azzel Theme Setting

Azzel Theme Setting

On the customization page, click on the second icon to access the theme settings.

Now, let’s explore each component in the theme settings one by one!

Color

With the Colors setting, you can create and customize unique color palettes for different sections across your online store. Follow these steps:
  1. Click the Theme Settings gear icon.
  2. Select Colors.
  3. In the Schemes section, click an Existing scheme (1) or click Add Scheme (2) to create a new color scheme.


  1. After you choose a color scheme, you can change the color for the following content types:
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



To set your color:
  1. Enter a hex color code to select your desired color.
  2. To make the color transparent, delete the hex color code from the text field.
color-set
  1. Once you’ve finalized your changes, click Save to apply them.


Typography

The Typography settings allow you to customize the font style and size for your store's headings and body text. Follow these steps:
  1. Click the Theme Settings gear icon.
  2. Select Typography.
  3. To change the font type for your store's headings or body text:
  4. In the Headings or Body section, click to browse and select the font you want to use.
  5. Once you’re satisfied with your selections, click Save to apply the changes.

Layout

The Layout settings allow you to customize your store's overall layout, including page width and spacing between sections and grids. Follow these steps to adjust the layout:
  1. Click the Theme Settings gear icon.
  2. Select Layout.
  3. Right-to-Left Locales: 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. Adjust Page Width:
    1. Use the Page Width Range Slider to set a page width between 1000 px and 1600 px.
    2. The default width is 1600 px.
  5. Add Vertical Spacing (Optional):
    1. Use the Vertical Space Range Slider to adjust the spacing between template sections on your pages.
    2. You can add up to a maximum of 100 px between sections.
  6. Once you’ve made your adjustments, click Save to apply the changes.
layout-settings

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

Button

You can personalize the look and feel of the call-to-action buttons on your online store. These customizations allow you to control the button's appearance by adjusting settings like color, spacing, shape, and the presence of shadows.
  1. Click the Theme settings gear icon.
  2. Click Buttons.
  3. Customizable options for borders are:
    1. Thickness: Adjust the width of the button's outline.
    2. Opacity: Set the visibility of the button's outline.
    3. Corner Radius: Round the corners of the button.
  4. Customizable options for shadows are:
    1. Opacity: Adjust the visibility of the button's shadow. A shadow opacity of 0% removes the shadow entirely.
    2. Horizontal Offset: Use the slider to move the shadow horizontally around the button.
    3. Vertical Offset: Use the slider to move the shadow vertically around the button.
    4. Blur: Use the slider to change the blur of the button's shadow.
button-settings

Variant pills

Variant pills allow customers to easily select product options (like size or color) directly on the product page or in featured product sections. This lets them add the desired variant to their cart without navigating away. You can personalize how these variant pills are displayed on your online store by adjusting settings like color, spacing, shape, and the presence of shadows. 
  1. Click the Theme settings gear icon.
  2. Click Variant pills.
  3. Customizable options for borders and for shadows are the same as those used for buttons.
variant-pills

Input

Input fields are interactive areas where customers provide information, such as quantity selectors, email signup forms, or cart notes. You can adjust the appearance of these input fields on your online store by customizing border and shadow options.
  1. Click the Theme settings gear icon.
  2. Click Inputs.
  3. Customizable options for borders and for shadows are the same as those used for buttons.
input-settings

Product card

Product cards let you control how product information is displayed on your online store, allowing you to adjust various elements such as the image aspect ratio, enable or disable product card effects, and personalize the appearance of product buttons.
  1. Click the Theme settings gear icon.
  2. Click Product card.
  3. Image Aspect Ratio: Choose the desired aspect ratio for product images on the product card. Options include:
    1. Adapt to image: the image will be displayed in the original aspect ratio
    2. Portrait: displays the product image in a portrait ratio
    3. Square: displays the product image in a square ratio
  4. Show second image on hover: Toggle this setting to display the second product image when users hover over the product card.
  5. Show vendor: Toggle this setting to display the vendor name on the product card
  6. Show product rating: Toggle this setting to display the product rating on the product card.
  7. Enable quick add button: Toggle this setting to enable a quick "Add to Cart" button on the product card.
  8. Show color swatches: Toggle this setting to display product color swatches on the product card.
  9. Hidden button on mobile: Toggle this setting to hide the product buttons on mobile devices.

Product label

  1. Click the Theme settings gear icon.
  2. Click Product card.
  3. New Label Settings:
    1. Show New Label: When enabled, new products will display a "New" label in the top-left corner of the product image.
    2. Label Color: Choose the color for the label.
    3. Label Text: Enter the text you want to display on the label (e.g., "New Item", "Just Added").
    4. Label Duration: Set the number of days after product creation the label should be displayed (e.g., 10 days).

  1. Sale Label Settings:
    1. Show Sale Label: When enabled, products with a price marked down will display a "Sale" label in the top-left corner.
    2. Label Color: Choose the color for the label.
    3. Label Text: Enter the text you want to display on the label (e.g., "Sale!", "Discounted").
    4. Display Sale Percent: When enabled, the percentage discount will be displayed along with the sale label. If disabled, only the "Sale" label will appear.
sale-label

  1. Best Seller Label Settings:
    1. Show Best Seller Label: When enabled, a "Best Seller" label will appear in the top-left corner of the product image.
    2. Color scheme: Choose the color for the label.
    3. Label Text: Enter the text you want to display on the label (e.g., "Top Seller", "Most Popular").
    4. Best Seller Tag: Enter a tag name (e.g., "bestseller"). Then, go to the product page of a product, and enter the tag name in the "Tags" section, to enable this label on that specific product.
best-seller-label

Collection Card

Collection cards allow you to customize the way collection information is displayed on your online store.
  1. Click the Theme settings gear icon.
  2. Click Collection card.
  3. Customization Options:
    1. Style: Choose the card style for your collection cards (options: Standard, Card style).
    2. Image Padding: Use the slider to adjust the amount of space around your collection card images.
    3. Text Alignment: Choose the text alignment for your collection cards (options: Left, Center (default), Right).
    4. Color Scheme: Select a color scheme for your collection cards. Click "Change" to choose a different color scheme.
    5. Customizable options for borders: The border customization options are the same as those used for buttons.
    6. Customizable options for shadows: The shadow customization options are the same as those used for buttons.
collection-card

Blog Card

Similar to Product cards and Collection cards, blog cards allow you to customize how your blog posts are displayed on your online store.
All customization settings and options for Blog Cards are the same as those for Product Cards.
blog-card

Content Containers

Content containers are the invisible boxes that hold the text in various parts of your store's pages. Think of them as the frames around your words, giving them a defined space and allowing you to control their appearance. They are used in sections like:
  1. Slideshows: The box behind the text on your rotating homepage banners is a content container.
  2. Image Banners: The area containing the title and description on an image banner is a content container.
  3. Multicolumn Sections: The individual columns containing text and images each have a content container.
Accessing Content Containers:
  1. Click the Theme settings gear icon.
  2. Click Media.
  3. The customizable options for borders and shadows are the same as those found in other settings.

Media

Media refers to the visual elements used in various sections of your store, such as product images or the image used in an Image with text section.
  1. Click the Theme settings gear icon.
  2. Click Media.
  3. The customizable options for borders and shadows are the same as those found in other settings.
This section allows you to adjust the appearance of dropdown menus, pop-up modals, and cart pop-ups on your online store, helping you maintain a consistent and visually appealing user experience.
  1. Click the Theme settings gear icon.
  2. Click Dropdown and pop-ups.
  3. Color customization: You can choose the colors for your dropdowns and pop-ups.
dropdowns-and-pop-ups

Drawers

Drawers are hidden, interactive containers that slide into view when triggered, such as collapsible menus or collection filter options. They provide a way to display additional content without taking up permanent space on the page.
  1. Click the Theme settings gear icon.
  2. Click Drawers.
  3. The customizable options for borders and shadows are the same as those found in other settings.

Social Accounts

This section allows you to add links to your social media accounts, which will be displayed 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, you will need to input them in the corresponding fields.

Search Behavior

These settings allow you to customize the behavior of your store's search function, including whether to show product suggestions, vendors, and prices in the search results.
  1. Click the Theme settings gear icon.
  2. Click Search behavior.
  3. Customization Options:
    1. Enable search suggestions: Toggle this setting to enable or disable product suggestions as shoppers type their search terms.
    2. Show product vendor: Toggle this setting to display or hide the product vendor in search suggestions.
    3. Show product price: Toggle this setting to display or hide the product price in search suggestions.

Currency Format:

This setting allows you to choose whether the currency code is displayed alongside prices on your product pages.
  1. Click the Theme settings gear icon.
  2. Click Currency format.
  3. Show currency codes: Toggle this setting to display currency codes next to product prices.

Cart

These settings allow you to customize the style and functionality of the cart experience on your online store. You can choose how the cart is displayed (as a drawer, page, or pop-up) and configure other options to enhance the shopping experience.
  1. Click the Theme settings gear icon.
  2. Click Cart.
  3. Customization Options:
    1. Cart type: Use the dropdown menu to select the cart style:
      1. Drawer: Keeps the customer on the current page, with the cart sliding in from the side.
      2. Page: Takes the customer to a dedicated cart page.
    2. Color scheme: Select a color scheme for the cart
    3. Show vendor: Toggle this setting to display the vendor of each item in the customer's cart.
    4. Enable cart note: Toggle this setting to provide customers with a text box where they can enter special requests or additional order information.
cart-settings
  1. If Cart type is Drawer:
    1. Upsell products: Toggle this setting to enable or disable related products to entice upselling opportunities.
    2. Limit: Select a number for the limit for upselling products.
    3. Image ratio: Choose the desired image aspect ratio.
    4. Show Vendor: Toggle this setting to display the vendor information.
    5. Show Quick view: Toggle this setting to enable quick product viewing.
    6. Product rating: Toggle this setting to enable product rating.
    7. To display a Collection when the cart is empty:
      1. In the Cart drawer area, click Select collection.
      2. Click the name of the collection you want to display, and then click Select.
cart-drawer

Newsletter Group

This section allows you to configure a newsletter signup popup that encourages visitors to subscribe to your mailing list. This popup is triggered by a button that is displayed on the left side of the screen when the user scrolls past the banner section. When clicked, the newsletter form slides into view from the bottom of the screen.
news-letter
  1. Click the Theme settings gear icon.
  2. Click Newsletter popup.
  3. Select newsletter display on page: Choose when the newsletter should popup on the page
  4. Select button and popup color: Choose the color scheme for the newsletter popup button and the popup itself.
  5. Enter text: Customize for Button text, Newsletter title and Description.
  6. Select image display and image ratio and image link if available
  7. Enable social media: Toggle this setting to display social media icons within the newsletter popup.
news-letter-settings

Gift Card

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

Compare

This feature allows customers to compare products side-by-side. When a customer clicks the "compare" icon on a product, that product is added to a list, which is displayed in a popup on the left side of the screen.
compare-icon

  1. Click the Theme settings gear icon.
  2. Click Compare.
  3. Select compare display on page: Choose the trigger for when the compare popup should show on the page.
  4. Enter content at compare empty: Customize the message that is displayed when the compare list is empty.

Back to Top:

The "Back to top" feature provides an arrow icon that appears in the corner of the screen when the user scrolls down the page. Clicking this icon allows the user to quickly return to the top of the page without having to scroll manually.
  1. Click the Theme settings gear icon.
  2. Click Back to top.
  3. Enable Back to top display on page
  4. Select the color: Choose the color for the "Back to top" icon.
back-to-top-settings

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
*A sticky menu, also known as a fixed menu, remains visible at the top of the screen even when the user scrolls down the page. This ensures that your store's primary navigation is always accessible, improving user experience and making it easier for customers to browse your products.
mobile

Custom CSS:

This section allows you to add your own CSS code to further customize the appearance of your online store. For example, you can use custom CSS to modify the styling of buttons beyond the available theme settings or apply unique styles to specific text elements.
Custom CSS added here will affect all pages in your online store, with the exception of the checkout pages.

Theme Style

A theme style is a pre-designed collection of settings that gives your store a polished and cohesive look. All themes have a default theme style applied, and you can choose from other available styles to quickly change the overall appearance of your store.
theme-style
  1. Click the Theme settings gear icon.
  2. Click Theme Style.
  3. Select the theme style you want to use, and then click Change style.

    • Related Articles

    • Theme License for Azzel

      Key Licensing Information About Azzel To ensure you are using Azzel in compliance with Shopify's Terms of Service, it is essential to have a valid license. Here are some important details to help you understand theme licensing with Shopify. ...

    • Header Setting

      The header is a crucial element of your online store, serving as the primary navigation point and brand identifier. This guide will walk you through the various settings available to customize your header and create a seamless shopping experience. ...

    • Menu Setting

      Optimize your store’s navigation with Tapita’s advanced menu options, including a customizable multi-column dropdown (mega menu). This guide provides step-by-step instructions for creating and configuring menus to enhance the user experience. ...

    • Color Swatch Setting

      This feature allows you to display color swatches (visual representations of colors) for products with color options, instead of just displaying the color names as text. Configuring Color Swatches: Go to Theme Settings > Color Swatches. For each ...

    • Introduction

      Welcome to the Azzel Theme user documentation. How to use Azzel documentation User guides are arranged in the categories described in the following table. For guidance with using Azzel, follow the links in the table or select a user guide from the ...