Checkmark

Thank you for your feedback

Edit your logo to match your header background

Does your logo have a different background color than your store header? Learn how to fix it.

Article ID: SLN18877

Note: The steps below are not applicable for the default themes in Theme Manager.

If you want to use a logo you already have, or you want to create a logo to use in your store, be aware of a few issues that may arise depending on your logo and the template you choose.

If your logo was created with a specific background color in mind, your logo may appear as a block on top of the header background color or image.
Picture of Store Logo Background Color Mismatch

If your logo was created with a specific background color in mind, but was made with a transparent background for that color, you may see a halo effect surrounding your logo.
Picture of Store Logo Halo Effect

These problems are caused because the logo was created with a specific background color in mind. Many logos are created with a white background, and for this reason most of the color palette choices for generic templates have white as the header background color.

Possible solutions

  • Choose a template with the same background color as the logo's background color (may not be possible).
  • Have the logo optimized (by a designer) for your store's new background color, or do it yourself if you know how to edit images.
  • Repeat the Design Wizard and choose either the plain text or header options.

Editing the header background color

If your logo uses a specific background color and you want to change your header background color to use that same color, this can be done in the Store Editor.

  1. Sign in to your My Services page.
  2. Click the Store link.
    The Store link is under Control Panels.
  3. Go to Store Editor.
    The Store Editor link is under Edit.
  4. Go to Variables.
    The Variables button.
  5. In the Header section, enter or select a new color value in the Header-background-color field or click choose a color to open the color palette.
    The Header-background-color variable. 
  6. Click Update.
    The Update button.
  7. Publish when ready.
    The Publish Options button.