Advanced Customization

If you’re on a paid plan and have the coding skills or are brave enough to dig into the world of HTML, CSS, and Liquid markup then head over to Customize Design > Advanced and get your hands dirty.

First though, make sure you know what you’re getting yourself into. Any changes made to the default code have to be maintained on your end. Aside from what’s already in the built-in code, we’re not able to offer support for advanced customizations, so tread carefully!

Getting started

Just because we can’t drain the entire pool for you when you realize you can’t swim doesn’t mean we’re dumping you into the deep end without some floaties. Here’s some helpful resources for those of you who aren’t comfortable with HTML, CSS, or Liquid but are feeling adventurous and want to try your hand at it anyway:

  • Don’t Fear The Internet - a rad introduction to some of the basics and a great way to build your confidence if you’re a beginner
  • HTMLDog - practical guides to HTML and CSS organized by experience level
  • Mozilla Developer Network - full of tutorials and a useful reference even if you have a handle on the basics
  • Stack Overflow - a great place where people are asking the same questions you are

If you need more help with advanced changes and aren’t comfortable with digging into the code, we’d recommend hiring a designer/developer. You can also post specific code-related questions to Stack Overflow using the bigcartel tag.


CSS is where the style that affects your HTML lives. When you’re editing your HTML you’ll see that some lines will reference a class or id. That’s basically saying that the following code is to be styled according to the class it’s referencing. That way you don’t have to keep typing out what color font, what sized font, how far left to position something, etc. of your HTML. Instead you can store that info within a class and keep using that same class for similar chunks of HTML.

If you’ve grasped HTML then CSS will sorta fall into place for you. But if you want some more info, here’s a pretty solid tutorial for CSS »

Background image tweaks

The background image you upload in the Customize Design section is designed to repeat, but if you don’t want your background image repeating you can add the following to the very bottom of your CSS, in the Customize Design > Advanced section of the admin:

body {
  background-repeat: no-repeat;

If your image isn’t filling the whole background, and you’d like it to, you can add the following to the bottom of your CSS instead so your image stretches across the page:

body {
  background-repeat: no-repeat;
  background-size: cover;

If you’d like to add a text link to a blog or website you can use a basic HTML link (or a redirect). The <a href=""></a> tags signify a link. This piece <a href=“”> is the start tag and this </a> is called the end tag. The info between the start and end tags is the text that shows on the site. The info you put within the quotation marks (<a href="">) is your link’s destination.

<a href="">Text</a>

Let’s see this in action. Suppose you’re using the Luna theme and want to add a link to your Instagram account so it’s displayed next to your Facebook and Twitter links. Just go to Customize Design > Advanced > Layout > Custom and scroll down until you see this chunk of code at the bottom of that HTML:

<li {% if page.full_url contains ‘/cart %}class="selected”{% endif %}><a href=“/cart">Cart</a></li>
{% if theme.twitter_username != blank %}
<li><a href="{{ theme.twitter_username }}" title="Follow us on Twitter">Twitter</a></li>
{% endif %}
{% if theme.facebook_username != blank %}
<li><a href="{{ theme.facebook_username }}" title="Friend us on Facebook">Facebook</a></li>
{% endif %}

That code is responsible for displaying your Twitter and Facebook links in the footer of your store. Note the <li></li> tags - those arrange the stuff between them into a list format. All you need to do now is create a new list item with those list tags, plug your link within the list tags, and place it right after your Facebook link. Here’s what your new link will look like:

<li><a href="" title="Check us out on Instagram">Instagram</a></li>

The title="" in the above link code is just some text that will appear when your mouse hovers over the link. Not required, but a cool feature to add for your users.

Adding a redirect

You can link or redirect a page in your shop to another URL (like a blog, for example), all without having to modify your theme code. Simply go to Customize Design > Pages, click the plus button to add a new page, give the page a name, click the HTML icon, and replace the current code with the following:

    {{ head_content }}
    <link rel="canonical" href="" />
    <meta http-equiv=refresh content="0; url=" />
    <meta name="robots" content="noindex,follow" />
    <meta http-equiv="cache-control" content="no-cache" />

After that, be sure to change the two example URLs to where you’d like to redirect to, uncheck the Use my store’s layout box at the bottom, and click Done and Save at the top. That’s it! Check out your new link in your shop.

Adding images

If you want to add an image outside of a custom page, you can easily do that by dropping it into your HTML. First, make sure you have your image hosted on an image hosting site, like Postimage. Once you upload your image to your image host, they will be able to provide you with your image’s address (or URL). Once you have the URL of your image, you’ll drop it inside of an image tag.

<img src="">

If you want someone to click on your image and link to another part of your store or to an external site, you’ll basically just drop your image element within some link tags.

<a href=""><img src=""></a>

See how everything is sort of sandwiched in there? The code on the outside affects the stuff sandwiched between it. So your image is now turned into a link because it’s sandwiched between those link tags <a href=""> </a>. Mmmm, sandwiches.

Note: that image tags don’t require an end tag like most other HTML elements do.

Creating an entry page

Your shop’s Home page can be a really powerful tool in shaping your customer’s experience and defining your own brand. When you’re in the Advanced section of your Customize Design area you’ll see that you can edit the code for the pages of your store and not just the Layout design. Let’s change your Home page so your store has an entry page that your visitors will see before they view your products. Just click on Home > Custom and delete all of the code on that page. Now you’ll replace it with something like this:

<a href="/products">
   <img title="Check out the shop" src="">

Now when someone lands on your site, they’ll see that image you’re using and when they click on it, they’ll be taken to your Products page.

Notice how the destination of your link isn’t a full URL? That’s because you’re sending someone to another part of the site they’re already on. If you want your Home page to link to your Checkout page (for some crazy unknown reason), you would change the link destination to just /checkout instead of /products. Efficiency!


The favicon is the small graphic that appears in the browser tab next to your page title. If you’d like to add a favicon, you just need to update the Layout theme file in Customize Design > Advanced.

Copy and paste this line before the </head> tag:

<link href="" rel="icon" type="image/x-icon">

We don’t offer hosting for favicons though, so you’ll need to use another webhost to store your favicon file and replace the with your own. Or you can use a favicon hosting service to do that, and you’ll use the URL they give you in your Layout page’s code.

Social media icons

Make sure your fans can easily keep tabs on your shop by providing links to your social media profiles. To add a set of icons that link over to your social media profiles, first you’ll save the icons you’d like to use to your computer, then upload them to a file hosting service like Postimage. Highlight and copy the direct links assigned to your images.

Once you have your icon image links handy, head over to Customize Design > Advanced in your admin and choose the page where you’d like your icons to appear. Pick the Layout if you’d like the icons to appear on all pages in your shop.

Finally, paste your image code in. For example:

<a href=""><img src=""></a>

Click Done and Save, and you’ll be ready for some new followers!

And you can always use ready-made social media badge code if you’d like:

Embedding video

Adding your own video to your shop really gives it a nice personal touch and makes your customers more connected to you, your products, and your brand.

First you’ll need to host your video on a platform like YouTube or Vimeo. From there you’ll copy the embed code they provide you with and head over to the Advanced tab in the design section of your shop. Keep in mind that where you add the code in your HTML will affect the placement of your video.

Note: Gold stores can’t handle the video embed code, so you’ll need to be on a paid plan for this to work.

Newsletter signup

Newsletters are a great way to personally communicate with your customers. Dropping some new products, running a big promotion, or maybe just saying thanks - you name it, your customers want to know what’s going on with you.

Big Cartel doesn’t have an internal newsletter feature, but you can definitely set one up through a service like MailChimp or TinyLetter. Then, as long as you are on a paid plan, you can add a newsletter signup to your shop. Once you generate your signup code, head over to the Customize Design > Pages section of your admin and add a new page– you’ll see an HTML button in the top navigation of that custom page editor. Click that button, paste your code at the top of that new page, and you’ll see a preview of that signup form on the right.

Theme tweaks

Love a built-in theme, but just want to change that one thing that’s driving you crazy? We’ve compiled some theme-specific customization tweaks to help you make that default theme work a bit more how you want it to. Just head over to the Themes area, find the theme you’re using, and check out the most commonly requested customizations.

If you find that you’re making a ton of tweaks to your theme and you’re still not happy with its design, it might mean that theme just isn’t the right fit for you. Maybe try testing out one of the other built-in themes. If you don’t like any of those, it won’t hurt our feelings. You may want to look into grabbing a third-party theme if that’s the case.


How do I create my own custom theme?

You may have already sketched up the perfect look for your store that doesn’t match any of the themes we provide. That’s cool! We give you complete freedom to edit our built-in themes, or you can whip up a theme from scratch. If you go that route, you’ll need a good handle on HTML, CSS, and our theme API »

Where can I find more themes?

If none of the built-in themes strike your fancy, but you don’t have any coding experience, you may want to check out pre-made themes from third party theme builders:

Each theme provider will give you their own set of instructions for applying their design to your shop. It’ll involve copying + pasting the code they give you into the Customize Design > Advanced area, so make sure your account is on a paid plan first.

Where can I find a designer to build my custom theme?

Allergic to code, but still really want to make the custom theme of your dreams into a reality? You may want to hire a pro–we’ve got a list of developers and designers who are well versed in Big Cartel themes. Take a peek at their portfolios and maybe drop one a line:

How do I back up my theme code?

As you save changes to your code you’ll want to make sure to download your theme, and you can do that by clicking “Download current theme” at the bottom of your side navigation.

We don’t archive any theme code so if you accidentally delete some or all of your theme code we don’t have a way of retrieving that. If you delete your theme code (we’ll cross our fingers that this never happens) you may be able to retrieve some of it from Google.

Google crawls and indexes our stores regularly, so sometimes they’ll have a cached version of your old theme if you’ve accidentally delete it. Just pull up your store in a Google search, then click the small arrow to the right of your URL, then click “Cached”. If Google still has your old theme cached you can click “Show Page Source” to see your theme’s code.