# 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/niVteMYkc5VfE2wdYlOK/blobs/MYK19LS1NWtt1lI9TKsb/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/niVteMYkc5VfE2wdYlOK/blobs/BLo2i1HXKEPqupW83am9/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/niVteMYkc5VfE2wdYlOK/blobs/4RBIF1RZBCvIzZqvQSqa/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/niVteMYkc5VfE2wdYlOK/blobs/YeZnDLXx6trkf4eWeLsH/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/niVteMYkc5VfE2wdYlOK/blobs/NqrumRpt7xYATVNZBk0T/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/niVteMYkc5VfE2wdYlOK/blobs/BrHgjaTmLQpELrBgv18m/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/niVteMYkc5VfE2wdYlOK/blobs/Pn9M9YlACAP4ybfnO0jk/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/niVteMYkc5VfE2wdYlOK/blobs/D2Dc6kBfL8KuHlnHqmW6/image.png" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://content.gitbook.com/content/niVteMYkc5VfE2wdYlOK/blobs/zBv5JtGGXWBJjoOUPgxC/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://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2FYiK4xss5yepsebWXcLZL%2Fimage.png?alt=media&#x26;token=e50cc460-d620-40ef-89f4-a87a2667db02" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right sidebar" %}
<figure><img src="https://content.gitbook.com/content/niVteMYkc5VfE2wdYlOK/blobs/oBKweADtLyfTlONDyYA0/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dropdown sidebar" %}
<figure><img src="https://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2FsnHheNAtPA36n5MAeLxv%2Fimage.png?alt=media&#x26;token=de785987-61ee-46c7-8c18-fe8759d4a041" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Canvas sidebar" %}
<figure><img src="https://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2FqJMjwvD3A5wf40PbRFmS%2Fimage.png?alt=media&#x26;token=bbf26df6-4c38-4d93-a851-29b551717f85" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

