Anysound is the third preset in the Azzel theme. Anysound blends art, design, and performance — a gallery-inspired Shopify preset with elegant layouts, mobile speed, SEO, and effortless shopping.

Before configuring the Anysound 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 Anysound 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 Anysound preset.

1. Adding Anysound Preset to your store

For instructions on how to add the preset to your store, please refer to the Introduction guide for Tapita Azzel theme.

2. Customization Configurations

👉 View theme demo

After adding your desired preset to your store, you can customize its content as follows within the Shopify Theme Editor.

1. Header configuration

Choose a menu you want to display

Sticky header

Toggle this ON to keep the menu stick to the top of your pages.

The sticky menu only works on the desktop.

Color scheme

Choose one among 17 color schemes for your menu. 

Make header on slideshow

Toggle this ON to let the header appear on the slideshow section (next section).

Header color on slideshow

Adjust the color scheme for the header on the slideshow.

Background transparent

Adjust the transparency of the header background.

Enter a pixel number (e.g. 10 px), the higher number, the more transparent background. 

Show icon

Toggle this ON to display an icon on the header.

Show border

Toggle this ON to display the header border.

Logo

Position 

Adjust the position of the logo.

Choose between Left or Center.

Logo on slideshow

Select an image as the logo to be displayed on the slideshow.

Mobile

Mobile menu color

Choose the color scheme for the menu to display on the mobile view.

Section configuration

Bottom margin

Add space to the bottom of the menu header.

Enter a pixel number (e.g. 10 px)

1.1. Horizontal item menu configuration

General 

Horizontal title

Type in the title of the horizontal item menu (e.g. Categories).

Target

Choose the target window when the horizontal items are clicked (e.g. Current window).

Dropdown configuration

Enable dropdown item

Toggle ENABLE to make the dropdown items appear at the header.

Dropdown color scheme

Choose the color scheme for the dropdown.

Dropdown width

Adjust the width of the dropdown menu.

Enter a pixel or a percentage number (e.g. 450 px, 100%).

Dropdown align

Decide the dropdown align style to follow the Item size or the Container. 

Category block

Enable category block 

Toggle ENABLE to make the category blocks appear at the dropdown menu.

Width

Adjust the width of the category block.

Enter a percentage number (e.g. 75%).

Category column

Decide the number of category column display on the dropdown menu

Enter a number (e.g. 4).

Top block configuration

Enable top block 1

Toggle this ON to display the top block on the horizontal menu.

You can display up to 6 top blocks.

Width

Adjust the width of the top block.

Enter a percentage number (e.g. 25%).

Image 

Select an image display with the top block.

Link image

Paste a link or search for an image to display on the top block.

Description

Add description for the top block

Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format. 

Bottom block configuration

Enable bottom block 1

Toggle this ON to display the bottom block on the horizontal menu.

You can display up to 6 bottom blocks.

Width

Adjust the width of the bottom block.

Enter a percentage number (e.g. 25%).

Image 

Select an image display with the bottom block.

Link image

Paste a link or search for an image to display on the bottom block.

Description

Add description for the bottom block.

Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format. 

2. Slideshow

Heading

Add the heading of the slideshow.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Heading size

Select the size of the heading: Small, Medium, Large.

Subheading

Add the subheading of the slideshow.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Description 

Add the description of the slideshow.

Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format. 

Section body

Show scroll button

Toggle this ON to show the button suggesting visitors to scroll down.

Auto play

Toggle this ON to play the slideshow automatically (not on click).

Loop

Toggle this ON to play the slideshow on loop.

Effect

Control the effect of the slideshow.

Choose among 4 effects: Slide, Fade, Cube, Flip.

Section layout

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

2.1. Slide item configuration

Color scheme

Choose a color scheme for the slide item.

Media type

Choose the media type for the slide item: Image or Video

Media

Image / Video desktop

Select an image / video that fits the desktop view.

Image / Video mobile

Select an image /video that fits the mobile view. 

Link

You can add a link by pasting or searching it.

Information

Heading

Add heading for the slide item.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Short description

Add description for the slide item.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Button label

Enter the label for the button.

3. Marque text

Size

Choose the size of the marque text: Small, Medium, Large.

Speed (seconds)

Adjust the play speed of the marque text 

Enter a number (e.g. 30)

Show star

Toggle this ON to display a star between every 2 marque items.

Section layout

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

3.1. Marque item

Image

Image

Select an image to show on the marque text.

The image will display on the same line with the marque text item.

Text

Text

Add your marque text item (e.g. NEW SONG).

Link

Paste a link or search for one. 

Open this link in a new window

Toggle this ON to open this link in a new window.

4. Creative banner

Section header

Heading

Add the heading of this section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Heading size

Select the size of the heading: Small, Medium, Large.

Subheading

Add the subheading of the section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Description 

Add the description of the section.

Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format. 

Alignment

Choose the alignment of the section header: Default (left) or Center.

Button label

Add text to the button label in the section header.

Button link

Enter the link destination for the button in the section header.

Open this link in a new window

Toggle this ON to open the link in a new window.

Section body

Desktop image height

Adjust the height of the image display on the desktop view.

Enter a pixel number (e.g. 590 px).

Tablet image height

Adjust the height of the image display on the tablet view.

Enter a pixel number (e.g. 350 px).

Mobile image height

Adjust the height of the image display on the mobile view.

Enter a pixel number (e.g. 200 px).

Section footer

Button label

Add text to the button label in the section footer.

Button link

Enter the link destination for the button in the section footer.

Open this link in a new window

Toggle this ON to open the link in a new window.

Section layout

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

4.1. Item banner 

Image

Upload an image for the creative banner.

Link

Insert a link or search for a product or a collection. 

Banner information

Heading

Enter the heading for the item banner.

Subheading

Enter the subheading for the item banner.

5. Marque image

Heading

Add the heading of this section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Heading size

Select the size of the heading: Small, Medium, Large.

Subheading

Add the subheading of the section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Description 

Add the description of the section.

Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format. 

Alignment

Choose the alignment of the section header: Default (left) or Center.

Button label

Add text to the button label in the section header.

Button link

Enter the link destination for the button in the section header.

Open this link in a new window

Toggle this ON to open the link in a new window.

Section body

Speed (seconds)

Adjust the speed of the section body.

Enter a number in seconds (e.g. 30).

Image width

Adjust the width of the image in the section body.

Enter a pixel number (e.g. 300 px).

Image ratio

Adjust the ratio of the image in the section body.

Enter a percentage (e.g. 100 %).

Section footer

Button label

Add text to the button label in the section footer.

Button link

Enter the link destination for the button in the section footer.

Open this link in a new window

Toggle this ON to open the link in a new window.

Section layout

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

5.1. Marque item

Image

Upload an image.

Text

Enter text for the image. (e.g. Black Mage).

Link

You can add a link by pasting or searching.

6. Banner grid

Heading

Add the heading of this section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Heading size

Select the size of the heading: Small, Medium, Large.

Subheading

Add the subheading of the section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Description 

Add the description of the section.

Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format. 

Alignment

Choose the alignment of the section header: Default (left) or Center.

Button label

Add text to the button label in the section header.

Button link

Enter the link destination for the button in the section header.

Open this link in a new window

Toggle this ON to open the link in a new window.

Section body

Image ratio

Adjust the ratio of the image.

Enter a percentage number (e.g. 44%).

Columns number

Desktop

Decide the number of columns to be displayed in the desktop view.

Enter a number (e.g. 1). 

Tablet

Decide the number of columns to be displayed in the tablet view.

Enter a number (e.g. 1). 

Mobile

Decide the number of columns to be displayed in the mobile view.

Enter a number (e.g. 1). 

Section footer

Button label

Add text to the button label in the section footer.

Button link

Enter the link destination for the button in the section footer.

Open this link in a new window

Toggle this ON to open the link in a new window.

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

6.1. Item banner

Color scheme

Adjust the color scheme for the item banner.

Image

Image

Upload an image.

Link

You can add a link by pasting or searching.

Open this link in a new window

Toggle this ON to open this link in a new window.

Banner information

Position

Adjust the position of the item banner: Default, Center, Outside.

Heading

Add heading for the item banner.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Short description

Add description for the item banner.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Button label

Enter the label for the button.

Use outline button style

Toggle this ON to display the button with an outline style. 

7. Text highlight 

Heading

Add heading for the text highlight.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Description

Add description for the text highlight.

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

8. Featured collection slider

Heading

Add the heading of this section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Heading size

Select the size of the heading: Small, Medium, Large.

Subheading

Add the subheading of the section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Description 

Add the description of the section.

Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format. 

Alignment

Choose the alignment of the section header: Default (left) or Center.

Button label

Add text to the button label in the section header.

Button link

Enter the link destination for the button in the section header.

Open this link in a new window

Toggle this ON to open the link in a new window.

Section body

Collection

Choose a collection to be shown in this section.

Maximum products to show

Select the maximum number of products to be shown in this section.

Enter a number (e.g. 8).

Slider configuration

Auto play

Toggle this ON for the section to play automatically.

Loop

Toggle this ON for the section to play on loop.

Desktop column

Select the number of columns shown on the desktop view.

Enter a number (e.g. 4).

Tablet column

Select the number of columns shown on the tablet view.

Enter a number (e.g. 4).

Mobile column

Select the number of columns shown on the mobile view.

Enter a number (e.g. 2).

Section footer

Button label

Add text to the button label in the section footer.

Button link

Enter the link destination for the button in the section footer.

Open this link in a new window

Toggle this ON to open the link in a new window.

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

9. Text columns

Columns number

Desktop column

Select the number of columns shown on the desktop view.

Enter a number (e.g. 3).

Tablet column

Select the number of columns shown on the tablet view.

Enter a number (e.g. 3).

Mobile column

Select the number of columns shown on the mobile view.

Enter a number (e.g. 1).

Section layout

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

9.1. Column item

Color scheme

Choose the color scheme for the column item.

Heading

Add heading for the column item.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Short description

Add description for the column item. 

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

10. Simple newsletter

Content scheme

Choose the color of the content.

Heading

Add heading for the section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Description

Add heading for the section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link. 

Color scheme

Adjust the color scheme of the section

Background image

Select an image as the section background. 

Section full width

Toggle this ON to display the section in full width.

Section max width

Adjust the maximum width of the section.

Enter a pixel number (e.g. 1900 px).

Content full width

Toggle this ON to display the content in full width.

Content max width

Adjust the maximum width of the content.

Enter a pixel number (e.g. 1900 px).

Padding desktop

Add spacing on the top of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Padding tablet, mobile

Add spacing on the top of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

Margin desktop

Add spacing on the left of the section in the desktop view.

Enter a pixel number (e.g. 5 px).

Margin tablet, mobile

Add spacing on the left of the section in tablet and mobile view.

Enter a pixel number (e.g. 5 px).

11. Footer

Choose the color scheme for the footer.

Logo

Logo copyright

Select an image as the logo copyright for your site.

Logo copyright width

Adjust the width of the logo copyright.

Enter a pixel number (e.g. 91).

Logo bottom

Select an image as the logo at the bottom of the page.

Language selector

Enable language selector

Toggle this ON to show the language selector dropdown. 

Payment method

Show payment method

Toggle this ON to show available payment methods at your store.

Follow on Shop

To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled.  

Enable Follow on Shop

Toggle this ON to enable Follow on Shop.

Desktop column

Select the number of columns displayed on the desktop view.

Enter a number (e.g. 3).

Tablet column

Select the number of columns displayed on the tablet view.

Enter a number (e.g. 3).

Mobile column

Select the number of columns displayed on the mobile view.

Enter a number (e.g. 1).

Section padding

Desktop vertical spacing

Adjust the vertical padding of the footer on the desktop view.

Enter a pixel number (e.g. 45 px).

Tablet, mobile vertical spacing

Adjust the vertical padding of the footer on the tablet, mobile view.

Enter a pixel number (e.g. 45 px).

Heading

Add the heading of this section.

Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.

Menu

Choose a menu for the footer menu item.

​