(Azzel Theme) Mood Preset Configuration Guide: New Features & Settings

(Azzel Theme) Mood Preset Configuration Guide: New Features & Settings

Important: The Azzel theme now includes two distinct presets to choose from:
  1. 1st preset: Azzel, access through https://themes.shopify.com/themes/azzel/presets/azzel 
  2. 2nd preset: Mood, access through https://themes.shopify.com/themes/azzel/presets/mood 
Before configuring the Mood preset, please read the complete [Azzel Preset User Guide] first. The Azzel guide provides detailed instructions for configuring every aspect of the theme's core functionality. 
The Mood preset builds upon Azzel's foundation while introducing more layout options to give customers greater flexibility in designing their store. This guide focuses specifically on the new features and enhancements available in the Mood preset.

1. Enhanced Body Color Customization

  1. New: You now have complete freedom to choose any color scheme for your site's body background, not just the first color group in your palette.
  2. How to configure:
    1. In your theme customizer, navigate to Theme settings → Layout → Body color scheme
    2. Select your preferred color scheme from the dropdown menu


For detailed color scheme setup instructions, refer to the [Color Scheme Setting Guide] in the main Azzel documentation

2. Hover Effect Controls

  1. New: Control hover animations for various website components with precision.
  2. How to configure:
    1. Go to Theme settings → Animation
    2. Under Hover effect, choose your preferred style:
      1. Outline: Border effect on hover
      2. Default: No hover effect

3. Color Swatch Corner Styling

  1. New: Customize the appearance of color swatches in product cards with adjustable corner radius.
  2. How to configure:
    1. Navigate to Theme settings → Product cards → Color swatches
    2. Adjust the Corner radius slider to set the border radius in pixels
    3. Set to 0px for sharp corners, or adjust the number for more rounded edges

4. Preset Selection Option

  1. New: Switch between Azzel and Mood presets directly from theme settings.
  2. How to configure:
    1. Go to Theme settings → Theme style
    2. Choose between Azzel (1st preset) or Mood preset. Your selection will apply the corresponding styling and feature set

5. Enhanced Header Options

The header section now includes two major improvements:
1. Icon Display on Announcement Bar
  1. New: Show or hide search, compare, account, and cart icons in the announcement bar.
  2. How to configure:
    1. Navigate to Sections → Header
    2. Toggle Show icons to display or hide the icon set (3)
2. Flexible Logo Positioning
  1. New: Position your logo on the left or center of the header.
  2. How to configure:
    1. In Sections → Header
    2. Under Logo position, select either Left or Center (4)


6. Enhanced Slideshow Media Support

  1. New: Import both images and videos into your slideshow section.
  2. How to configure:
    1. Go to Sections → Slideshow
    2. For each slide item:
      1. Select Media type (Image or Video)
      2. Upload your chosen media file
Note: The default Azzel preset supports images only. Video support is exclusive to the Mood preset.


7. Advanced Marquee Text Features

The marquee text section now supports two exciting new features:
1. Image Integration with Corner Styling
  1. New: Add images to your marquee text with customizable corner radius.
  2. How to configure:
    1. Navigate to Sections → Marquee text → Marquee item
    2. Upload your image
    3. Adjust Corner radius (found under image upload settings) to set the border radius in pixels



2. Decorative Star Separators
  1. New: Add decorative star separators between marquee items.
  2. How to configure:
    1. In Sections → Marquee text
    2. Toggle Show star to display or hide star separators along the marquee line



8. NEW SECTION: Multi Column

  1. A versatile section designed for modern, minimalist layouts combining images and text in clean column arrangements. This section is perfect for: feature highlights, service showcases, brand storytelling, product benefits, team introductions, process explanations, etc.
  2. How to configure:
    1. Step 1: Access Multi Column Section: Go to Shopify Theme Customize → Sections → Multi column
    2. Step 2: Configure Section Header
      1. Heading: Enter your main section title
      2. Heading size: Choose the size for your heading text
      3. Subheading: Add a secondary heading if needed
      4. Description: Include additional descriptive text
      5. Alignment: Choose text alignment: Default (Left-aligned text) or Center (Center-aligned text)
      6. Button label: Enter text for your call-to-action button
      7. Button link: Add the destination URL for your button
      8. Open this in new window: Toggle on to open links in a new browser tab




    1. Step 3: Configure Section Body
      1. Customize the main content area:
      2. Image ratio: Use the slider to adjust image proportions (percentage-based)
      3. Columns number: Set the number of columns displayed on: Desktop screens/ Tablet screens/ Mobile screens


    1. Step 4: Configure Section Footer
      1. Add a bottom call-to-action:
      2. Button label: Enter footer button text
      3. Button link: Add the destination URL


    1. Step 5: Configure Section Layout
      1. Color Scheme: Choose a color scheme for this section.
      2. Background image: Choose a background image for the section (if desired).
      3. Section Full Width: Toggle this setting to make the section span the full width of the screen. If disabled, customize the size at "Section max width."
      4. Content Full Width: Toggle this setting to make the content within the section span its full width. If disabled, customize the size at "Content max width."
      5. Padding and Margin: Adjust the padding and margin for the section on mobile, desktop, and tablet screens to control spacing.


    1. Step 6: Configure the section optimize
      1. Lazy Load Speed: Enable to load the section only when users scroll to it, improving initial page load times



    1. Step 7: Configure Theme Settings
      1. Page width: Set the overall page width
      2. Reveal section on scroll: Toggle to animate the section appearance when scrolling


These are the new features and updates available in the Mood preset. If you have any questions or need assistance, please don't hesitate to contact Tapita support at support@tapita.io