> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🚀 How to Customize Widget Colors

The slot picker should feel like a natural part of your store — and color is the quickest way to make that happen 🎨

With the **App Widget Colors** settings in Hoppy Delivery Dates, you can match the picker's buttons, highlights, and text to your theme — separately for Desktop and Mobile.

---

# **📌 Before You Begin**

* Hoppy Delivery Dates is installed and the app embed is enabled in your theme  
* The slot picker is visible on your Cart page  
* You're logged in to your Shopify admin

---

# **Step 1 — Open the Appearance Page**

In the app navigation, go to:

**Hoppy Delivery Dates → Appearance**

Find the **App Widget Colors** card.

The card has **Desktop** and **Mobile** tabs — colors are configured separately for each device.

---

# **Step 2 — Understand the Four Color Settings**

There are four colors to work with:

* **Primary color** → the main accent color. Used for things like selected states, buttons, and the top bar of the picker  
* **Secondary color** → the background color used behind picker elements  
* **Primary font color** → the text color used on secondary/light backgrounds  
* **Secondary font color** → the text color used on primary/accent backgrounds

### **Default colors**

* Primary color → `#3D3D3D` (dark grey)  
* Secondary color → `#ffffff` (white)  
* Primary font color → `#3D3D3D`  
* Secondary font color → `#ffffff`

---

# **Step 3 — Set Your Colors**

Each color has two ways to set it:

* Type a hex code directly into the text field (e.g. `#1a73e8`)  
* Or click the **color swatch** next to the field to open the color picker and choose visually 🌈

Both stay in sync — picking from the swatch updates the hex field, and typing a hex updates the swatch.

### **Example**

* Primary color → `#2c6ecb` (your theme's button blue)  
* Secondary color → `#ffffff`  
* Primary font color → `#212121`  
* Secondary font color → `#ffffff`

💡 The easiest way to get a perfect match: copy the hex code of your theme's button color from **Online Store → Themes → Customize → Theme settings → Colors**.

---

# **Step 4 — Repeat for Mobile (Optional)**

Switch to the **Mobile** tab and set colors there too if you want a different look on smaller screens. If not, configure both tabs with the same values for a consistent appearance.

---

# **Step 5 — Save and Review**

Click **Save** at the top of the page.

Use the preview panel on the right side of the Appearance page for a quick check, then open your Cart page to see the colors live 👀

---

# **⚠️ Important Notes**

⚠️ Make sure your font colors contrast well with their backgrounds — light text on a light background will be hard for customers to read.

ℹ️ Desktop and Mobile colors are independent — remember to check both tabs after saving.

---

# **🎉 Final Result**

Once configured successfully:

✅ The slot picker matches your theme's colors ✅ Buttons, highlights, and text all use your chosen palette ✅ Desktop and Mobile each look exactly the way you want ✨