Customizing the Docket Preset - Azzel theme

Customizing the Docket Preset - Azzel theme

Docket is the fourth preset in the Azzel theme. Docket transforms your Shopify store with modern professionalism β€” fast, responsive layouts for intuitive shopping, lasting impressions, and confident conversions.


Before configuring the Docket 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 Docket 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 Docket 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. Customizing

πŸ‘‰ 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

Docket Preset of Azzel Theme - Header config

Menu

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)

Docket Preset of Azzel Theme - Header config


1.1. Horizontal item menu configuration

Docket Preset of Azzel Theme - Header config

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. 3).

Docket Preset of Azzel Theme - Header config

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. 


Docket Preset of Azzel Theme - Header config

2. Banner slider

Docket Preset of Azzel Theme - Banner slider config

Section header


Heading

Add the heading of the 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. 


Section body


Slider type

Choose the type of the slider: Default or Center. 


Image ratio

Choose the ratio of the image.

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


Columns number


Desktop

Set the desktop column number.

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


Tablet 

Set the tablet column number.

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


Mobile

Set the mobile column number.

Enter a pixel number (e.g. 1 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.


Docket Preset of Azzel Theme - Banner slider config

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

Docket Preset of Azzel Theme - Banner slider config



2.1. Item banner


Color scheme

Choose a color scheme for the item banner.


Image


Image 

Select an image for the item banner.


Link

You can add a link by pasting or searching it.


Open this link in a new window

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


Position

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


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


Use outline button style

Toggle this ON to apply the outline button style.

Docket Preset of Azzel Theme - Item banner

3. Product tab

Docket Preset of Azzel Theme - Product tab config

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. 


Section body


Tab style

Choose the style for the tab: Text, Button.


Maximum products to show

Choose the maximum number of products shown on the section.

Enter a number (e.g. 8).


Desktop column

Choose the number of columns on the desktop view.

Enter a number (e.g. 4).


Tablet column

Choose the number of columns on the tablet view.

Enter a number (e.g. 4).


Mobile column

Choose the number of columns on the mobile view.

Enter a number (e.g. 2).


Button label

Enter the label for the button (e.g. See all).


Docket Preset of Azzel Theme - Product tab config


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

Docket Preset of Azzel Theme - Product tab config


3.1. Tab


Tab name

Enter the name for the tab.


Collection

Choose a collection to be shown on the product tab.


4. Image with text


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


Color scheme

Select the color scheme for the section body.


Show box shadow

Toggle this ON to show the box shadow.

Image

Select an image for the section body.


Image ratio

Set the ratio of the image. 

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


Image size

Set the size of the image: Small, Medium, Large.


Information spacing

Set the spacing for the information: Small, Medium, Large.


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

Docket Preset of Azzel Theme - Image with text config


4.1. Title


Heading

Add the heading of the image with text item.

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


4.2. Content 


Content

Add the content of the image with text item.

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


4.3. Button


Button label

Enter the label for the button (e.g. Discover more).


Button link

You can insert a link or browse one.


Open this link in a new window

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


Use outline button style

Toggle this ON to apply the outline button style.


5. Video with text


Section body


Video ratio

Set the ratio of the video.

Enter a number (e.g. 42)


A Shopify-hosted video

Select a video for the Shopify-hosted video.


Cover image

Select an image as the cover image.


Video information


Color scheme

Select the color scheme for the video information.


Heading

Add the heading 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. 


Button label

Set the label for the button (e.g. Explore more information).


Desktop column 

Set the desktop column number.

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


Tablet 

Set the tablet column number.

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


Mobile

Set the mobile column number.

Enter a pixel 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).

Docket Preset of Azzel Theme - Video with text config


5.1. Information


Color scheme

Choose the color scheme for the information.


Heading

Add the heading of the section (e.g. Office Essentials).

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


Button label

Enter the label of the button (e.g. Shop now).


Button link

Insert or search for a link here.


Open this link in a new window

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


5.2. Collections


Color scheme

Choose the color scheme for the collections.


Heading

Add the heading of the section (e.g. Office Essentials).

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


Collections

Choose collections to be shown on the Video with text.


Image ratio

Set the ratio of the image. 

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


5.3. Products


Color scheme

Choose the color scheme for the products item.


Heading

Add the heading of the section (e.g. Office Essentials).

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


Collections

Choose products to be shown on the Video with text.


6. Multicolumn


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


Image style

Choose the display style of the image: Adapt (to the container) or Ratio. 


Image ratio

Choose the ratio of the image.

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


Columns number


Desktop column 

Set the desktop column number.

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


Tablet 

Set the tablet column number.

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


Mobile

Set the mobile column number.

Enter a pixel number (e.g. 1 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).

Docket Preset of Azzel Theme - Multicolumn config



6.1. Column item


Image


Image

Select the image for the column item.


Link

Paste a link or search for one.


Open this link in a new window

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


Banner information


Position

Set the position for the banner information: Default (left) or Center.


Heading

Add the heading of the section.

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


Short description 

Add the short 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. 


Button label

Enter the label of the button (e.g. Shop now).


Button link

Insert or search for a link here.


Open this link in a new window

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


Use outline button style

Toggle this ON to apply the outline button style.


7. Blog post

 

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.


Blog post configuration


Blog post type

Set the type of the blog post: Default (left) or Tab.


Image ratio

Set the ratio of the image.

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


Limit

Set the maximum number of the blog posts shown on the section.


Read more label

Custom text for the read more button.


View all button label

Custom text for the view all button.


Desktop

Set the desktop column number.

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


Tablet 

Set the tablet column number.

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


Show date

Toggle this ON to show the date published of the blog posts.


Show author

Toggle this ON to show the authors of the blog posts.


Show comment

Toggle this ON to show the comments of the blog posts.


Show excerpt

Toggle this ON to show the excerpt of the blog posts.


Blog type default


Banner image

Select an image as the banner image.


Blog

Select a blog category to be shown on the section.


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

Docket Preset of Azzel Theme - Blog post config

8. Footer


Color scheme

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



Menu


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.


Description 


Description

Enter the description at the footer.


Show social media

Toggle this ON to show the social media at the footer.



Now you know how to customize the Docket preset to boost your store performance. If you have any questions or need assistance, please don't hesitate to contact Tapita support at support@tapita.io 



    • Related Articles

    • Customizing the Anysound Preset - Azzel Theme

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

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

      Important: The Azzel theme now includes two distinct presets to choose from: 1st preset: Azzel, access through https://themes.shopify.com/themes/azzel/presets/azzel 2nd preset: Mood, access through https://themes.shopify.com/themes/azzel/presets/mood ...

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

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

    • Adding a Tab custom for specific products in Azzel theme

      Usually when you add a tab custom block on your target product, you may see other products also display the same tab custom, which is not your preference. Therefore, this guide will walk you through 4 easy steps to successfully create a tab custom ...