# Display settings

### Introduction

After creating your Volume Discount rules, the next step is to decide **how the offer looks on your store**. Display settings control the widget’s layout, wording, translations, and customer experience. A clear, well-designed widget helps shoppers quickly understand the deal and encourages them to buy more.

### How to set up 

#### Step 1: Display settings

From the **Offer setting** screen, click **Step 2: Display setting** at the top.

The widget editor will open, showing both **content options** on the left and a **live preview** on the right.

{% embed url="<https://app.canvid.com/share/fi_01K3Q7MKC1G42WNNNWRZMPS9NE>" %}

{% stepper %}
{% step %}
**Choose widget layout**

* **Horizontal** – products are shown in a row.
* **Vertical** – products are stacked in a column.

{% hint style="success" %}
Tip: Horizontal works well for desktop, vertical fits better on mobile. Use the live preview to see which option looks clearer for your products.
{% endhint %}
{% endstep %}

{% step %}
**Edit content text**

* **Title**: The main heading above the discount widget. Example: *“Get more, save more.”*
* **Description**: Short explanation of the offer. Example: *“Unlock greater savings as you purchase more items.”*
* **Translation**:
  * Click the **Translation** button to add text in other languages.
  * Select a language from the dropdown.
  * Enter translations for Title and Description.
  * Keep variables like `{{product_quantity}}` or `{{discount_value}}` in place—they will automatically update with the correct values.
    {% endstep %}

{% step %}
Redirect after Add to cart

Choose what happens after a customer adds a discounted item:

* **Current page**: Customers stay on the product page.
* **Cart page**: Customers are redirected to their cart immediately.

{% hint style="success" %}
Keep customers on the product page if you want them to keep shopping; redirect to cart if your goal is faster checkout.
{% endhint %}
{% endstep %}

{% step %}
(Optional) Enable Cart tips

Cart tips encourage customers to reach the next tier by showing progress in the cart.

* Click **Preview** to see how tips will look.
* Click **Edit** to customize the tip text.
* Example: *“Add 1 more item to unlock 25% off.”*
* If cart tips are not visible, click **Contact us** for support.
  {% endstep %}

{% step %}
Preview and save

* Use the live preview panel on the right to see how the widget looks on desktop and mobile.
* Adjust content or layout if needed.
* When satisfied, click **Save** to publish your settings.
  {% endstep %}
  {% endstepper %}

**Step 2: Theme and content settings**

To adjust the widget design and text, click **Edit widget** at the top of the Display settings section. Inside the editor, you can switch between two tabs: **Theme setting** and **Content setting**.

{% embed url="<https://app.canvid.com/share/fi_01K3Q7YT09X310T88BCY7W3B1D>" %}

#### Theme setting

This tab lets you control the **visual style** of the Volume Discount widget.

{% stepper %}
{% step %}
**Select layout widget**

* Horizontal or Vertical (already chosen earlier, but adjustable here).
  {% endstep %}

{% step %}
**Themes**

* Select a preset color palette from the swatches.
* If widget colors don’t match your theme, you may see: *“Widget color doesn’t match your theme.”*
* Use **Sync theme color** (if available) or **Check my theme** to request support if syncing is disabled.
  {% endstep %}

{% step %}
Styles – Background

* Enable **Gradient background** (optional).
* **Background color**: set the main widget background.
  {% endstep %}

{% step %}
Styles – General

* Header text color: color for the widget title (“Get more, save more”).
* Badge color: highlight tier badges (e.g., “Most Popular”).
* Tag saving color: highlight savings labels (e.g., “Save 20%”).
* Icon/text colors: customize colors for badges and saving tags.
* Stroke color: outline around elements.
  {% endstep %}

{% step %}
**Styles – Button**

* Gradient background (optional).
* Button background color.
* Button text color.
  {% endstep %}
  {% endstepper %}

**Content setting**&#x20;

This tab lets you control the **text and wording** inside the widget.

{% stepper %}
{% step %}
**Tier content**

* “Add to cart” button. Example: *Add to cart*.
* “Item added to your cart” button. Example: *Item added to your cart*.
* “See more” label: expands tier list. Example: *See more*.
* “See less” label: collapses tier list. Example: *See less*.
* “Free” text: label for free gifts. Example: *Free*.
* “Saving” text: label for savings. Example: *Save*.
  {% endstep %}

{% step %}
**Translations**

* Click the **Translation** button.
* Select a language and enter translations for all text labels.
* Keep placeholders intact (e.g., `{{discount_value}}` or `{{product_quantity}}`).
* Example: “Save” → *Sparen* in German.
  {% endstep %}
  {% endstepper %}

**Step 3: Preview and save**

Use the live preview panel on the right to see how the widget looks on desktop and mobile.

Adjust colors and text until the widget matches your brand and is easy to read.

Click **Save** to apply changes.

Your **Volume Discount widget** is now fully customized 🎉. By combining clear text with consistent branding, you’ll make it easier for customers to see the value of buying more and boost your sales.


---

# 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://docs.avada.io/aov-bundle-upsell/volume-discount/display-settings.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.