# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/compare-price.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.