Big Cartel Theme Support

How do I upload and style my own logo or header image for my Big Cartel theme?

How do I upload and style my own logo or header image for my Big Cartel theme?

Having a quality logo and header image greatly improves your branding and makes your shop look established and professional. If you need help with logo design, try a community design service like 99designs or an online tool like Squarespace Logo.

If you choose to apply a header image, it will automatically replace your main site title in the header of your shop layout.

Review all of the steps below to make sure your uploaded header image looks its best on all devices. These steps cover formatting your image correctly BEFORE upload and also styling it correctly for all devices after upload.

Uploading and removing your header image

Launch the Customize design area

Click the Customize design link in your Big Cartel admin area to launch your customisation tools. Should you ever experience any issues in this area, like a disconnect between viewing your shop normally compared to in the preview window, please refer to Troubleshooting the Big Cartel Customize design (preview) admin area.

Getting started with your new Aarcade theme at Aarcade

The controls available in the Customize panel of your Customize design area may vary slightly from that shown below, depending upon the base theme you chose before installing your Aarcade theme.

Upload header image

Click the plus icon next to the Header image setting and select your header image from your files.

How do I use the Big Cartel "Customize design" area with my Aarcade theme? at Aarcade

Click the Save link to apply your changes.

Removing a header image

To remove your header image, click the x icon next to the Header image setting.

How do I upload and style my own logo or header image for my Big Cartel theme? at Aarcade

Click the Save link to apply your changes.

Formatting your header image BEFORE upload

Size your image at 200% for retina devices

High pixel density (a.k.a. retina) displays, like those found on modern mobile devices and desktops, require twice as much image data to display a sharp image. Your Aarade theme will automatically constrain your image to half its natural size. To accommodate this, upload an image that is two times larger than the display size you require.

Create a high quality image

The quality of your header image is important. A poorly designed, pixelated or blurred image will reflect poorly on your brand and products. If you do not know how to create a quality image it is better to not use one at all or employ someone to create one for you.

Check your image file

Your image file must comply with the following requirements to be web safe:

  • File type: png, .jpg, .jpeg or .gif
  • Colour mode: RGB

Trim whitespace

Having unnecessary whitespace in your header image can cause it to scale down too far on small screen devices or when used in social media or other 3rd party context.

How do I upload and style my own logo or header image for my Big Cartel theme? at Aarcade

You should trim all unnecessary whitespace from your header image to create a result that will look good regardless of the context. In our example we have decided a small border of whitespace is desirable.

How do I upload and style my own logo or header image for my Big Cartel theme? at Aarcade

Do not use whitespace in your header image to increase the padding around your header area. Instead use CSS to create the padding / margins you desire - see Styling your header image AFTER upload below.

Use transparent png format where appropriate

If your header image includes a background colour that is intended to match that of your header area, the best practice is to remove this colour and make it transparent space in your header image.

How do I upload and style my own logo or header image for my Big Cartel theme? at Aarcade

How do I upload and style my own logo or header image for my Big Cartel theme? at Aarcade

Styling your header image AFTER upload

If you are happy with the default appearance of your uploaded header image, you may not need to apply any of the following. However, we still recommend that you review all of these sections, so that you are aware of the options available to get the best results on all devices.

Styling your header image after upload involves creating custom CSS in your custom style coding area. For details on locating and using the custom style coding area, refer to Where do I add custom style code?.

You will note that all of our example CSS is prepended with the class .has-logo. This ensures that the styles are only applied when a header image has been uploaded (as opposed to when your standard text site title is displayed). This is an example of using the body class for specific CSS, which is discussed in more detail in other support articles.

Setting your image size

If your image is not naturally displayed at a size that suits your needs, obviously you can re-upload your image at a different size. However, for more control over your image size, you can apply you can manually set this size by defining the width (and only the width) in pixels by adding the following to your custom style coding area:

/* Set header image width */
.has-logo #header > a {
	width: 200px;
}

Note that the above value 200 can be any whole number you desire, but must be followed by px;. You should also set the width no larger than half of the natural width of the image (for best results on all devices including those with retina displays). In our example, our header image is 400px wide, so we don’t want to set the width any larger than 200px with our CSS.

Setting image alignment and spacing

You can set your header image alignment and spacing by applying the methods detailed in the article How do I change the margin and alignment of my header text, image or logo?.

Applying different styling for the mobile layout

If your header image is looking exactly as you want it on large screens, but not ideal on small screens, you can create a separate set of styles for your mobile layout. This can be done by adding the class .mobile-ui-on to the .has-logo element.

For example, if we wanted to set a different width and padding on the mobile layout:

/* Set header image width and padding */
.has-logo #header > a {
	width: 200px;
}
.has-logo .main-header {
	padding-top: 40px;
	padding-bottom: 40px;
}
/* Set header image width and padding for mobile */
.has-logo.mobile-ui-on #header > a {
	width: 160px;
}
.has-logo.mobile-ui-on .main-header {
	padding-top: 80px;
	padding-bottom: 80px;
}

Note that adding left and/or right padding/margins to your header can make your image smaller on your mobile layout.

Applying a different image for the mobile layout

Sometimes the best solution for small screens may be applying a different header image altogether. The Milk - Sand preview uses this approach via an x-ic-before-header page with the following content:

<style>
/* Center and max width for mobile logo */
#mobile-only-header {
max-width: 200px;
margin: 30px auto;
}
/* Switch headers on mobile layout */
.insert-content.x-ic-before-header,
.mobile-ui-on .main-header #header {
display: none;
}
.mobile-ui-on .insert-content.x-ic-before-header {
display: block;
}
</style>
<div id="mobile-only-header">
<a href="/"><img src="http://preview.aarcade.net/wp-content/uploads/2015/02/milk-sand-mobile.png" alt="Milk and Sand"></a>
</div>

This page includes the styles that will set the mobile header width and margins as well as show/hide the different headers. These styles could just as easily be added in the custom style coding area rather than inside the x-ic-before-header page (in which case the style tags must be removed).

The x-ic-before-header page is an insert content page. If you are unfamiliar with the insert content method, refer to An introduction to the Insert Content method.

Get creative

With all of the options and custom CSS available for your header, you should be able to get the exact result you desire. If you’re looking to do something a little outside of the box, you will need to get creative. For example, the Invisible Light - Narvik preview has a standard small logo that is center aligned with extra padding (using the methods detailed above), but also applies the uploaded background image to the header area (instead of the whole page). This is achieved with the following custom style coding:

/* Center align and add padding to logo */
header.main-header {
	padding: 50px 0;
	text-align: center;
}

/* Use background image for header background */
body {
	background-image: none;
}
{% if background_image != blank %}
header.main-header {
	background-image: url("{{ background_image.url | constrain: '8000' }}");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
{% endif %}

Seamless checkout header/logo image

As explained above, Aarcade themes use oversized header/logo images to ensure optimal appearance on high pixel density (a.k.a. retina) displays. This will result in the header/logo image appearing oversized on the seamless checkout page (if enabled).

If this is unacceptable, you can deactivate the retina header/logo image styling by navigating to your custom style coding area - see Where do I add custom style code? - and pasting in the following custom style code:

/* Deactivate retina header image */
.has-logo #header > a {
	width: auto;
}

You will then need to re-upload your header image at a smaller size (see above).

If you still wish to ensure optimal header image quality for retina displays, you can store your oversized header image online - see How do I upload images or files for my Big Cartel page content? - and then use the URL in the following custom style coding:

/* Remote retina header image */
.has-logo.high-ppi #header img {
	visibility: hidden;
}
.has-logo.high-ppi #header > a {
	background-image: url("https://dl.dropboxusercontent.com/s/9ibpvyeb54tifhh/retina-header.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

Don’t forget to replace the highlighted image URL with the URL for your retina header image. Also remember that the URL must be updated if you upload a new header image in the future.

Applying different header images

A similar method to the one shown above can be used to apply different images for your shop and your seamless checkout. With this method, the image you upload to your Big Cartel admin area will be the image for your seamless checkout. Alternatively, you could upload no image (or delete the currently uploaded image as applicable) to have a text title for your seamless checkout.

You can then apply your shop header image using custom style coding:

/* Hide default header image or text */
#header > a img,
#header > a span {
	display: none;
}
/* Apply custom header image */
#header > a {
	width: 200px;
	height: 80px;
	background-image: url("https://dl.dropboxusercontent.com/s/9ibpvyeb54tifhh/my-custon-header.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

Note that it is critical to define a width and height as shown above. These values should match the width to height ratio of your shop header image, but should be half the actual size to ensure a crisp image on retina displays.

Your shop image URL will be defined by your upload method - see How do I upload images or files for my Big Cartel page content? - and the upload and your custom CSS will need to be updated if you wish to make changes in the future, as with the previous example above.

AarcadeHow do I upload and style my own logo or header image for my Big Cartel theme?