> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/compare-slider.md).

# Compare slider

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/VYeY97Ur2OtESkhAvDQn/compare-slider-desktop.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/Mvvpr0YOe3xqu1FeQlCg/compare-slider-desktop-2.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/OFOj2ABWJsG1a8VtvyIh/compare-slider-mobile.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/aIpKEb6vzUk7QkLsddsT/compare-slider-mobile-2.png" alt=""><figcaption></figcaption></figure>

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Compare slider`** .

## **Section settings**

### General

<figure><img src="https://1569224743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwp6wpeVynqvtz0WMVrUT%2Fuploads%2F0daBXDUofi37SzGm9Xh8%2Fcompare%20slider%20settings.png?alt=media&amp;token=ba05570c-54ed-4526-ae29-2b74408d0b42" alt=""><figcaption></figcaption></figure>

1. **`Enable 4th product preview`** - the setting allows you to show part of 4 product on the desktop;
2. **`Label` -** the setting allows you to select a label for the section;
3. **`Heading` -** the setting allows you to set a heading for the section;
4. **`Text` -** the setting allows you to set a text for the section;
5. **`Button label` -** the setting allows you to set a label for the section button;
6. **`Button link` -** the setting allows you to set a link for the section button;
7. **`Button style` -** the setting allows you to set the style for the section button. Available for selection: "Primary", "Secondary", "Primary with border", "Secondary with border";
8. **`Property first label` -** the setting allows you to set a label for an option;
9. **`Property second label` -** the setting allows you to set a label for an option;
10. **`Property third label` -** the setting allows you to set a label for an option;
11. **`Property fourth label` -** the setting allows you to set a label for an option;
12. **`Property fifth label` -** the setting allows you to set a label for an option;
13. **`Property sixth label` -** the setting allows you to set a label for an option;

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/ZTK7GUWK9CdydioliZh0/compare-slider-settings-layout.png" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## **Blocks settings**

### Product

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/8IEvxkRWZmMaGSWvy6jC/compare-slider-settings-product.png" alt=""><figcaption></figcaption></figure>

1. **`Product`** - the setting allows you to select product;
2. **`Property first value` -** the setting allows you to set a value for an option;
3. **`Property second value` -** the setting allows you to set a value for an option;
4. **`Property third value` -** the setting allows you to set a value for an option;
5. **`Property fourth value` -** the setting allows you to set a value for an option;
6. **`Property fifth value` -** the setting allows you to set a value for an option;
7. **`Property sixth value` -** the setting allows you to set a value for an option;

## Theme content

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/UcmkHovxnDV3QvzPDrPY/compare-slider-theme-content.png" alt=""><figcaption></figcaption></figure>

1. **`Product title` -** the setting allows you to set a value for the "Product title" label. It is used for accessibility. The value is required;
2. **`Property label` -** the setting allows you to set a value for the "Property label" label. It is used for accessibility. The value is required;
3. **`Property label` -** the setting allows you to set a value for the "Property value" label. It is used for accessibility. The value is required.

## Information

1. The section is displayed if two or more blocks are added;
2. Options are displayed if a label is set for them.