Below is a step-by-step overview of how you can customize and co-brand the OrderProtection.com portal that your customers use to file and track claims. By tailoring logos, colors, typography, and more, you can ensure the portal matches your store’s look and feel. Refer to the screenshots for visual examples of each customization option.

Accessing Your Branding Settings

1. Log in to your OrderProtection.com dashboard.

2. From the left-hand menu, go to Settings.

3. Click on the Branding tab.

4. From here, you can manage all of the sections detailed below.

1. Upload Your Logo

• Recommended Dimensions: Make your logo file at least twice as wide as the display size you want.

  • For example, if you want it displayed at 200 px wide, use a 400 px wide image.

• File Format: Use a high-quality PNG with a transparent background if possible.

• Desktop & Mobile Sizes: You can set different logo widths for desktop and mobile to maintain optimal clarity on every device.

2. Set Your Background

• Background Color: Choose any HEX code to serve as the background behind the main claim form (on desktops/laptops).

• Background Image: For a more personalized look, you can upload a background image (recommended size around 2880 px by 1440 px).

  • Tip: The main form is centered. If you’d like to feature a specific part of your image, place the focal point to the sides.

3. Pick Your Colors

• You can define up to four custom colors (e.g., #FFFFFF, #000000, #CCCCCC, etc.) for different elements:

  1. Backgrounds (e.g., hover states, active states)

  2. Buttons

  3. Inputs and selections

  4. Links

4. Choose Your Button Styles

• Shape Options: Square (no border radius), rounded (12 px radius), or fully rounded (circular).

• States:

  • Default: The normal button color.

  • Hover: Color when the user’s mouse is over the button.

  • Press: Color when the button is being clicked.

• Example: You might choose Black (#000) for default, Dark Gray (#333) for hover, and Light Gray (#555) for press.

5. Customize Your Typography

• Upload Custom Fonts: We support WOFF and WOFF2 files. You can convert your font to these formats (e.g., via cloudconvert.com).

• Font Size & Line-Height: Control how large the text appears and the spacing between lines.

• Letter-Spacing: Adjust the horizontal space between each character.

• Desktop vs. Mobile: You can configure separate values for each view to ensure optimal readability across devices.

6. Page Title & Favicon

• Page Title:

  • Keep your title between 60 – 70 characters to ensure it displays properly in search results.

  • For example: “Submit a Claim | Shipping Issues | YourBrand”.

• Meta Description (Optional): Add a short summary (under ~160 characters) to improve SEO and clarity.

• Favicon:

  • Use a 32 px × 32 px PNG (or ICO) image.

  • The favicon appears in browser tabs and bookmark lists to represent your brand.