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

# Compare price

<figure><img src="/files/wH2AXxiRF9CSwqpKJLZS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/n6nl1vyPxGeh0O5AbL5v" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/P3VTYjyA9dW6tmdqked3" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ad1SI3XzWG2kOrjMEx6C" alt=""><figcaption></figcaption></figure>

## **Adding a section**

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

## **Section settings**

### General

<figure><img src="/files/StOMelHtNQ4aRykqFurV" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the setting allows you to set the text for the title;
2. **`List icon`** - the setting allows you to set the icon for the list items.

### Colors

<figure><img src="/files/SfyVgEmIXcsOIIY8Hf2V" alt=""><figcaption></figcaption></figure>

1. **`Card border`**- the setting allows you to set the border color of the card;
2. **`Card background`** - the setting allows you to set the background color of the card;
3. **`Heading`** - the setting allows you to set the color for the title;
4. **`Subheading`** - the setting allows you to set the color for the subtitle;
5. **`Price`** - the setting allows you to set the color for the price;
6. **`Price unit label`** - the setting allows you to set the color for the unit price label;
7. **`List`** - the setting allows you to set the color for the list;
8. **`Button label`** - the setting allows you to set the color for the button label;
9. **`Button background`** - the setting allows you to set the background color for the button;
10. **`Button border`** - the setting allows you to set the border color for the button;
11. **`Button label (hover)`** - the setting allows you to set the color for the button label on hover;
12. **`Button background (hover)`** - the setting allows you to set the background color for the button on hover;
13. **`Button border (hover)`** - the setting allows you to set the border color for the button.

### Layout

<figure><img src="/files/T5vOmjE12EZ3VUdGEFns" 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**.

## Block settings

### General

<figure><img src="/files/7qpYqzzB2y3pcOFo94qo" alt=""><figcaption></figcaption></figure>

1. **`Product`** - the setting allows you to set the product for the card;
2. **`Label`** - the setting allows you to set the label for the card;
3. **`Label position`** - the setting allows you to set the position of the label. Can be left or center;
4. **`Hide image`** - the setting allows you to hide the image;
5. **`Image view`** - the setting allows you to specify the image view (contain or cover);
6. **`Heading`** - the setting allows you to set the heading for the card (default: title of the product);
7. **`Subheading`** - the setting allows you to set the subheading for the card;
8. **`Price frequency`** - the setting allows you to set the price unit label;
9. **`Text`** - the setting allows you to set the text for the card;
10. **`Image`** - the setting allows you to set the image for the card (default: featured image of the product);
11. **`Button label`** - the setting allows you to set the button label for the card;

### Colors

<figure><img src="/files/ygvktjhAYjEx6mb86HxS" alt=""><figcaption></figcaption></figure>

1. **`Label background`** - the setting allows you to set the color for the label background;
2. **`Label color`** - the setting allows you to set the color for label text.