How to Customize the COD Popup Logo and Accent Colors

When customers initiate checkout, presenting a cohesive brand experience builds immediate trust, reduces hesitation, and reassures shoppers that their personal contact details and payment information are secure.

With Rivio COD & Partial Payments, you can fully tailor the storefront popup to match your store’s exact aesthetic—including uploading your brand logo, selecting custom accent hex colors, adding announcement notice strips, and customizing trust badges.

In this guide, you will learn how to customize the visual design of your COD popup in under three minutes.

Before You Begin

Before customizing your popup design, make sure you have:

• A high-resolution copy of your store logo in PNG, JPG, or WebP format (transparent PNG recommended).
• Your brand's primary accent color hex code (e.g. #1A1A1A or #2E7D32).

Step-by-Step Instructions

1. From your Shopify admin, open Apps → Rivio COD & Partial Payments.
2. In the navigation sidebar, click Settings.
3. By default, the settings page opens to the Brand tab.

Step 1: Upload Your Store Logo

1. In the Logo section, click Upload a logo.
2. Select your image file from your computer (supported formats: PNG, JPG, GIF, WebP up to 2 MB).

1. In the Store name field, confirm your shop title. This title displays alongside your logo or serves as a clean text fallback if no image is uploaded.

Step 2: Choose Your Accent Brand Color

1. Locate the Accent colour section.
2. Click the color swatch button to open the interactive color picker, or directly enter your store's primary hex code (e.g. #008060).
3. The accent color is automatically applied to:

• Primary action buttons (such as Send code and Continue).
• Input field focus rings.
• Selected payment option highlight cards.

Step 3: Add an Optional Announcement Notice Strip

1. Scroll down to the Notice strip card.
2. If you want to highlight a delivery promise or coupon code across all popup screens, enter your announcement copy (e.g. *“Fast 2–4 Day Courier Delivery Across the USA”*).
3. Review the live interactive Popup preview on the right side of the screen as you type.
4. Click Save in the top-right corner.

Configuration Settings & Options

Example Scenario

Matching a Luxury Skincare Brand's Palette

A high-end skincare boutique uses an earthy forest green (#1E392A) throughout their Shopify Dawn theme. When the default dark gray Rivio popup loaded, it felt foreign to shoppers. The merchant uploaded their minimalist white transparent logo, set the accent color to #1E392A, and added a notice strip reading *"Complimentary botanical samples with every order."* The updated popup looked completely native to the store, increasing completed OTP verifications by 18%.

Important Notes & Limitations

Troubleshooting

The uploaded logo looks blurry or stretched

• Possible Cause: The uploaded image is too small or has a vertical aspect ratio.
• How to Fix:

1. Prepare a horizontal banner logo cropped closely to the text (recommended: 240 × 56 px).
2. Upload the new file under Settings → Brand and click Save.

Related Guides

• How to Add a Promo Banner and Notice Strip to the Popup
• How to Customize Popup Step Wording and Trust Badges
• How to Enable the Rivio App Embed in Your Shopify Theme

Need Help?

Need styling advice or help matching your theme colors? Reach out to our design specialists!

• Email: Contact our branding team at support@rivioapps.com
• Help Center: Explore all design guides in the Rivio COD Knowledge Base