Change the Nasty Yellow Promo Bar on Your Zazzle Storefront

Existing yellow promo bar on Zazzle site

Thanks to info from Retropolis_Travel and Stalldoortees in the Zazzle forums, it’s easy to revise the appearance of the yellow promotion bar (also called the nasty yellow bar for its unfortunate hue) at the top of your Zazzle storefront.

UPDATE: Zazzle wrote in the forums that storekeepers are not to remove or change this bar! So, take your chances if you mess with it. I don’t know of anyone who had the store taken down for changing the color, but it could happen. Do this at your own risk! 🙂
Instead of your storefront header showing the yellow bar like the Paper Lake header above, it could show a gray bar like this:

PaperLake store taupe bar

or a light taupe-colored bar like this:

Paper lake store header with light taupe promo bar

Am I stuck with the infamous Yellow Bar?

The yellow bar is there most days with ever-changing information and codes for sales. So – you and your customers WANT that bar, you probably just don’t want it in #FFFB9C yellow. You can try any light color that will coordinate with your store and still allow the black, blue and red text to be read. Truthfully, though, if it coordinates too well with your store, customers may not notice it.

IF you are comfortable going into the CSS coding of your store, you can do this easily. If you’re not comfortable, COPY everything there first or use a “Sandbox” store. If you mess it up, you could make your store ugly or, worse, inoperable.*

Replace with plain color bar

Note: edited 3/1 to show the CSS code as code. If you copied it as text previously, the dashes may have turned to a solid line, giving you a parse error.

Follow this sequence in the backend of your Zazzle store to get to the right section:

Store > Appearance > Edit Appearance > Beta Appearance tab > Style (CSS) section

You can place the code anywhere in the CSS, as long as it’s after the first line or before the last line. Try adding it at the top, right below the first line, which should read:

Note: Any code like this /*——text here——-*/ is simply commenting info to serve as a reminder of what’s supposed to be happening. (No, none of us remembers everything we think we will!)

/*-----------------------
| Change BG color of sale promo, adjust overflow, reset font to Arial
------------------------------*/
#headerPromoBar
{
background-color: #F3F5EA !important;
white-space: nowrap !important;
overflow:hidden !important;
font-family: Arial, Helvetica, sans-serif
}

Copy this bit of CSS code and paste it into your store’s CSS box. You can replace the background color #F3F5EA with your own choice of color. (The #F3F5EA is the color I used on my Beachwalker storefront; a light cream.) Then hit the orange validate and save button. If the code validates, you likely did everything right – go check out your revised store front! If not, make sure you didn’t drop the opening or closing curly bracket.

 Sample colors that work

Here’s a few colors I’ve used that you can try. For more information on picking a color from your store, try reading Colorzilla is a great tool for designers.

• white #FFFFFF
• cream #F3F5EA
• light gray #D3D3D3
• taupe #ACAFA8
• light blue #D0DDEE

If just changing the color doesn’t do it for you, keep reading!

Replace with your own image

Some Zazzlers customize the promo bar by adding their own image, as UTeeZSF has done here:

UTeeZSF header with image replacing yellow bar

To achieve this, you need to have your own image hosted online.  Drop that image URL into the code below to add a background image.

/*-------------------------------------------
| Change BG color of sale promo, adjust overflow, reset font to Arial
---------------------------------------------*/
#headerPromoBar
{
background-color: #DABA9A !important;
background-image:url(YOUR IMAGE URL) !important;
white-space: nowrap !important;
overflow:hidden !important;
font-family: Arial, Helvetica, sans-serif
}

That’s all there is to it! Easy, isn’t it? If you changed your promo bar, what color did you end up using?

*Use this code at your own risk. I may have incorporated a typo. You may incorporate a typo. Zazzle could have changed the code by the time you read this – trust me, THEY DO CHANGE THE CODE. Play it safe: try it out in a sandbox store or backup your original code!