# Compare slider

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FgXVxf4aymRiiJ5VwuFao%2Fcompare-slider-desktop.png?alt=media&#x26;token=3dcd18c8-9d2e-4263-b9a4-7d92c878c756" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FJ0k6JsXUZ54jjVrgP2nS%2Fcompare-slider-desktop-2.png?alt=media&#x26;token=842f48b8-730c-4fbc-9b6a-3383955f5c58" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FgbWRtZZ82CQGUep4H9Ik%2Fcompare-slider-mobile.png?alt=media&#x26;token=217ec4e8-963c-4af7-8e05-a8d298fd3b35" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FEaAhzzvVokKzpnbqmPWI%2Fcompare-slider-mobile-2.png?alt=media&#x26;token=ba62b723-741a-4ccc-ad25-a846adb7cc5c" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FQGD51IV1P4YphNoqi2sI%2Fcompare-slider-settings.png?alt=media&#x26;token=83b4f4fd-1159-44be-93a5-266799f491a0" alt=""><figcaption></figcaption></figure>

1. **`Label` -** the setting allows you to select a label for the section;
2. **`Heading` -** the setting allows you to set a heading for the section;
3. **`Text` -** the setting allows you to set a text for the section;
4. **`Button label` -** the setting allows you to set a label for the section button;
5. **`Button link` -** the setting allows you to set a link for the section button;
6. **`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";
7. **`Property first label` -** the setting allows you to set a label for an option;
8. **`Property second label` -** the setting allows you to set a label for an option;
9. **`Property third label` -** the setting allows you to set a label for an option;
10. **`Property fourth label` -** the setting allows you to set a label for an option;
11. **`Property fifth label` -** the setting allows you to set a label for an option;
12. **`Property sixth label` -** the setting allows you to set a label for an option;

### Layout

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fac73PV2HGtXK2k90hoWd%2Fcompare-slider-settings-layout.png?alt=media&#x26;token=3dc65935-d341-4bb0-8225-4d5ae479d1e3" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fy24O10qaBLsOesAHrptu%2Fcompare-slider-settings-product.png?alt=media&#x26;token=0b806ec2-a814-45dd-a2ad-eb5ae06ace00" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FXHvg4ebgHNsJewLzXEjc%2Fcompare-slider-theme-content.png?alt=media&#x26;token=53ac6b12-8a1e-4b8e-aaaa-94ccb7ad26fa" 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.