# Sidebar & Filter

After **Sidebar & Filter** is enabled, the **Sidebar Collection** option has a total of 5 **blocks** for you to add to the sidebar:

* Categories
* Filter Dynamic
* Filter by tags
* Featured Products
* Image Banner

You also have the ability to arrange the position of blocks through **drag and drop.**

When you click on each block, it will show the **settings sidebar** (of each block).

### Category

**Title:** Define the heading or title for the section to clearly convey its purpose or content to viewers.

**Select Menu:** Choose a specific menu from your available options to display, guiding users through your site's navigation or categories.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/obgZOwXXagwvrQTN4xiL/image.png" alt=""><figcaption></figcaption></figure>

### Filters dynamic

This feature allows you to filter products by price. For instructions on how to set this up, please follow [this link](https://blueskytechco.gitbook.io/alukas-shopify/collection-page/filter-dynamic).

### Featured product

**Title:** Assign a name or heading to this section for clarity and emphasis.

**Select Collection:** Choose which collection you wish to feature from your available options.

**Product Type:** Specify the type of products you're aiming to display within this section.

**Maximum Product to Show:** Set a limit on the number of products to be displayed, managing the section's size and user experience.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/0lZfqdF7gfGnOHDiiksO/image.png" alt=""><figcaption></figcaption></figure>

### Image banner

**Image Banner:** Choose an image to serve as the banner for this section.

**Link:** Provide a URL that users will be directed to when they click on the image banner.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/xsZIMo4ZM8VjjeE4hQVc/image.png" alt=""><figcaption></figcaption></figure>

### Banner collection

**Color schema:** You are allowed to change text color, background color, etc. with preset color.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/Qnp5O9gevUmV7onDK85L/image.png" alt=""><figcaption></figcaption></figure>

**Image Behavior:** Select an animation to enhance the image with dynamic effects.

**Image:** Configure the image to display differently on desktop and mobile devices for optimized viewing across various screen sizes.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/taaie8kCzIAQ5E8dq3xD/image.png" alt=""><figcaption></figcaption></figure>

**Content Settings:** Adjust the alignment and position of your content both horizontally and vertically to achieve the desired layout.

**Background:** Set the background color to complement or contrast with your content for visual appeal.

**Content Max-Width:** Define the maximum width of your content area to ensure it fits well within the overall design and maintains readability.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/lMFkLWm0G3fiQ2yjTdh9/image.png" alt=""><figcaption></figcaption></figure>

For the text overlay setup, configure the height of the text content separately for desktop, tablet, and mobile devices, ensuring optimal readability and layout adaptation across various screen sizes.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/ypnUJSqpEIL9UPIMCtCt/image.png" alt=""><figcaption></figcaption></figure>

You can configure the font size and weight for headings, subheadings, and buttons, allowing you to tailor the text appearance for clarity and visual impact across your content

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/aJTFVcsPoyh9UpNH2yiQ/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/eox4pzJ7qB4tAHrhQsvh/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/BVuUkdWNyEevjkGAvIQE/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/ATcvPoRNE3QbR7R2ECHG/image.png" alt=""><figcaption></figcaption></figure>

**Sidebar position on desktop:** you can choose one of the config

{% tabs %}
{% tab title="Left sidebar" %}

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/5XObvy81KUqIgbJhTRP5/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right sidebar" %}

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/GZevHHtofccYf6FwMZ94/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dropdown sidebar" %}

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/bOAkf35R9UULqf7zqIAS/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Canvas sidebar" %}

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/8aXiWphUmeizSwFjSjl9/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}