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 ✨

Updated on: 20/08/2026