# Display settings

Once you’ve finished setting up the bundle options and texts, you can adjust how the **Mix & Match widget** looks on the product page. Click **Edit widget** inside the *Widget display* section to open the display settings.

You can customize how this list looks on the product page.

### How to set up:

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

#### Step 1: Themes

**Theme colors (row of circles at the top):**\
Select a preset color theme to quickly style your widget.

* If the widget colors don’t match your store theme, click through the color circles to test different presets.
* If you see the notice *“Widget color doesn’t match your theme”*, use **Check my theme** for guidance.

#### Step 2: Styles

These control the detailed appearance of your widget.

{% stepper %}
{% step %}
General

* **Header color**: Sets the text color of the main title (*e.g., “Design your own ideal pack!”*).
* **Price color**: Sets the color of product prices shown under each option.
  {% endstep %}

{% step %}
Option section

* **Background option**: The background color for each option box where products appear.
* **Number option**: The color of the number label (e.g., “1”, “2”, “3”) that identifies each option.
* **Border option selected**: The border color for the selected product inside an option. This highlights which choice is active.
  {% endstep %}

{% step %}
Badge discount

* **Gradient background (checkbox)**: Toggle this if you want the discount badge to have a gradient fill.
* **Background color**: The solid or gradient color behind the badge.
* **Text color on badge**: The color of the savings text (e.g., *Save 20%*).
  {% endstep %}

{% step %}
Preview your widget

* On the right-hand panel, see how the widget looks in real time.
* Use the toggle at the top to switch between **Desktop** and **Mobile** view.
* The preview updates immediately when you change a color or style.
  {% endstep %}

{% step %}
Save changes

When you’re happy with the display:

* Review the live preview to ensure your brand colors and labels look good.
* Click **Save** to apply the changes to your store.
  {% endstep %}
  {% endstepper %}

That’s it 🎉. A well-styled widget not only improves consistency with your store theme but also draws customer attention to bundle savings, making them more likely to engage and complete a purchase.


---

# 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/mix-match-bundle/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.