Okay
  Print

General Big Cartel Theme Support



Theme Installation

Preliminary Info

  • Unzip your theme download folder. 
    • Mac Users: Open theme files in a web browser (Chrome, Safari, etc.) or in an advanced text application (Text Wrangler).
    • PC Users: Open theme files in a text application such as Notepad.
  • Make sure you're using the default Neat theme in your Big Cartel account. Check out this video for help locating the default theme panel.

Installation Steps

  1. Open the 'CSS' file in your theme folder. Then do the following:
    • Select all content (ctrl+A or cmd+A)
    • Copy content (ctrl+C or cmd+C)
  2. Go to the ‘Customize Design’ page in your Big Cartel admin. Click the <> icon to view the 'Advanced Panel'
    • Accessed by clicking the dropdown menu in the top right of the admin, and then clicking 'Customize Design'.  
  3. Click the 'CSS' tab. Select all content on the page (ctrl+A) and then paste (ctrl+V) the previously copied code from the 'CSS' file, to install the 'CSS' code. Click the 'Done' button.
  4. Repeat steps 1 - 3 for the remaining core theme files and corresponding core pages:
    • layout
    • home
    • productS
    • product
    • cart
    • checkout**
    • success**
    • contact
    • maintenance

      **The 'checkout' and 'success' pages don't need to be installed if you're using Paypal Express or Stripe Checkout.
  5. Open the 'Extra Pages' sub-folder in your theme folder. Open the 'about' page file (or any file in that folder)
    • Select all content (ctrl+A or cmd+A)
    • Copy content (ctrl+C or cmd+C)
  6. Go to the ‘Customize Design’ page in your Big Cartel admin. Click the page icon to view the 'Pages Panel'.
  7. Click the plus sign to create a new page. Then click the 'HTML' button to edit the page in HTML mode.
  8. Give your page a name (ex. About). Then paste (ctrl+V) the previously copied code from the extra page file to install the page code.
  9. Repeat steps 5 - 8 for the other custom pages (faq, lookbook, etc.).
    • Steps 5 - 9 are optional if you don't plan on using any of the custom pages shown in the theme demo.

Now that the theme is installed, you'll need to make additional configurations to get the theme to look as it does in the demo. For starters:

  • Assign links to footer (and other link locations)
  • Upload slideshow images
  • Set up text for slideshow

Theme Installation Service

Rather have us install the theme for you? Purchase our theme installation service ($39). 

Our service includes:

  • One-time, initial installation of all core theme snippets and custom demo pages (as shown in demo)
  • Theme installed within 1-2 business days

Note: You will be responsible for uploading your products, banner images and adding categories / custom pages



You can assign your page and category links to different navigation areas on your site by renaming them to include a special tag. Check out the renaming tags below:

LocationTagExampleWorks for
Sub Header(*)Special Page (*)Custom Pages
Footer(&)Contact (&)Custom Pages, Contact
Footer Column 1(&)(!)Terms and Conditions (&)(!)Custom Pages, Contact
Footer Column 2(&)(!!)About (&)(!!)Custom Pages, Contact
Hidden(#)Secret (#)Custom Pages, Categories

Basic Customization


Most of the theme design customizations can be made directly through the 'Customize' panel in your Big Cartel account. Those customizations include:

  • Uploading a logo
  • Uploading slideshow images
  • Changing your color scheme
  • Changing your fonts
  • Editing slideshow text
  • Setting number of products per page
  • Setting number of featured products
  • Linking to your social media profiles

For more info on customizing your shop using the 'Customize' controls, check out Big Cartel's 'Customization' article, or view the video below for a general demonstration.


Default Settings

To view the default color, font and text settings (as shown in the theme demo), open the 'demo_settings' file in your theme folder. The content in that folder may look something like this:

"share_buttons": true,
"show_search": true,
"secondary_product_images": "full",
"products_per_page": 8,
"border_color": "#cccccc",
"header_link_hover": "#999999",

but with additional lines of default settings. You can refer to this file for which default settings to choose in the 'Customize' panel for setting up the theme. 


Additional Customizations

Certain customizations require going directly into the edit panels of your Big Cartel shop pages. Not to worry! Many of these customizations can still be done without any coding knowledge. This is done by changing the assigned variable. 

For example, if you wanted move your category links from the dropdown menu (under the link 'Shop') to the main navigation, you'd search for the following control in your 'Layout' edit page:

{% assign: Categories_in_Nav_Display = 'Dropdown' %} {{ Options: 'Dropdown' or 'Main Nav' }}

And then change 'Dropdown' to 'Main Nav', so your control looks like this:

{% assign: Categories_in_Nav_Display = 'Main Nav' %} {{ Options: 'Dropdown' or 'Main Nav' }}

Some other customizations you can make include:

  • Adding a favicon image
  • Setting the number of products per row


Advanced Customization

If you'd like us to further customize this theme, you can purchase our Big Cartel theme customization service. View Service


Home Slideshow


You can upload images to your home page slideshow directly through the 'Slideshow' section in the 'Customize' panel of your Big Cartel admin.

By default, the theme may be set to restrict the slideshow to only show the first three upload images. If you'd like to show more than three images in your slideshow, locate the following control in your 'Home' edit page:

{% assign: End_Slider_On_Image = 3 %}

and change the number 3 to 5. So your control looks like this:

{% assign: End_Slider_On_Image = 5 %}

Slideshow Text 


The text shown over the slideshow images can be set in the 'Welcome Header' and 'Welcome Subheader' fields in your shop admin 'Customize' panel.  

Some themes may have support for only the 'Welcome Header', while other themes don't have functionality to show any text over the slider. The theme demo should indicate if the theme has this featuere.

Assigning Different Text to Each Slide

Normally when entering text in these fields, the same exact text will be applied to all slides. To assign text to each slide, you'll need to divide each set of text with the 'pipe' character on your keyboard:

|

Let's assume your images are configured for five slideshow images. If you wanted your slides to have the following text for the 'Welcome Header':

  • Fall Jackets
  • Binkman's Coat
  • Lightweight Jackets
  • Hooded Jackets
  • Latest Hats

You'd type the following text in your 'Welcome Header' field:

Fall Jackets|Binkman's Coat|Lightweight Jackets|Hooded Jackets|Latest Hats

As you can see, each header phrase is divided by the 'pipe' character. You can even enter the text with spaces to the left and right of the pipe, for easier legibility. 

Fall Jackets | Binkman's Coat | Lightweight Jackets | Hooded Jackets | Latest Hats

Due to a letter/character limit in that field, we advise you to:

  • keep the header text for each slide to a max of two words (ex. 'Fall Jackets') 
  • Assign the text to no more than five slides 

To assign different links to your slides, locate the following line in your 'Home' edit page:

{{ -- HOME BANNER LINKS -- }}

Below that line, you'll see the controls for each slide link. The controls are named 'Banner_Link':

{% assign: Banner_Link_1 = '/products' %}
{% assign: Banner_Link_2 = '/products' %}
{% assign: Banner_Link_3 = '/products' %}

So if you wanted to set the first slide to link to your 'Jackets' page, which has the url "http://myshop.bigcartel.com/category/jackets", you would change:

{% assign: Banner_Link_1 = '/products' %}

to:

{% assign: Banner_Link_1 = 'http://myshop.bigcartel.com/category/jackets' %}

Video Slideshow Setup


If your theme has video enabled home page slideshow (as shown in the theme's demo), you can choose which slides display an embedded video.

To assign a video to a slide, you'll need to first obtain the url of the Youtube page the video is hosted on. The url is found in the address bar of your browser when viewing the video on Youtube.

Once you have the url, locate the following text in your 'Home' edit page:

{{ --HOME PAGE BANNER/SLIDESHOW VIDEO URL OPTIONS-- }}

Below this text, you'll notice the controls for entering the video url for the designated slide. Assuming your video url was:

https://www.youtube.com/watch?v=2inR8eueoGU

To set 'Slide 2' to contain that video, you'd change:

{% assign: Slide_2_Video_Url = "" %}

to

{% assign: Slide_2_Video_Url = "https://www.youtube.com/watch?v=2inR8eueoGU" %}

This will automatically replace the current image for 'Slide 2' to a video on your home page for that slide.

For most themes with video slideshow functionality, you can assign a max of 5 videos to a slideshow.

Sub Category Setup


In order to create a sub category, you must first create a "parent" category. This would be the category that the sub category belongs to.

Once a parent category is established, create a sub category by creating a new category which includes the name of the parent category followed by a hyphen, " - " , with exactly one space on each side of the hyphen, and the name of the sub category.

Check out the table below for sub category setup naming:

Parent CategorySub CategoriesHow to Name Sub Categories
T-ShirtsV-NecksT-Shirts - V-Necks
T-ShirtsCrewneckT-Shirts - Crewneck
FleeceHoodedFleece - Hooded
FleeceCrewneckFleece - Crewneck

Check out the screenshot below for an example of multiple parent categories and sub categories:


Sub Page Setup 


Sub pages are setup in a similar way to your sub category, except you set them up in the 'Pages' panel of your Big Cartel admin, where all your custom pages are created. 

In order to create a sub page, you must first create a "parent" page. This would be the page that the sub page belongs to.

Once a parent page is established, create a sub page by creating a new custom page which includes the name of the parent page followed by a hyphen, " - " , with exactly one space on each side of the hyphen, and the name of the sub page.

Check out the table below for sub page setup naming:

Parent PageSub PagesHow to Name Sub Pages
AboutOur StoryAbout - Our Story
AboutPressAbout - Press
LookbooksFall 2016Lookbooks - Fall 2016
LookbooksWinter 2017Lookbooks - Winter 2017

Newsletter Signup Form 

To set up your newsletter (or mailing list) signup form (ex. the signup form in your footer), first, you'll need to have a Mailchimp account.

After getting started with Mailchimp, you'll need to connect your Mailchimp account to your Big Cartel shop's newsletter form. To do this:

  1. Click the 'List' link in your Mailchimp account.
  2. Locate the list you want to connect to the newsletter form. Click the arrow tab to the far right and select 'Signup forms'.
  3. On the 'Signup forms' page, select 'Embedded forms'.
  4. On the 'Embedded forms' page, scroll down to the field that says 'Copy/paste onto your site'. However, instead of copying/pasting onto your site, you'll copy and paste the code in a blank Notepad / Textedit document on your computer.
  1. In the document, locate the section of code that starts with 'form action= '. It will looks something like this:
    <form action="//mybrand.us2.list-manage.com/subscribe/post?u=27b7d5cbfb45164d58769c000&id=a2cb5cedb8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

The text in the quotation marks after 'form action=' is your 'MailChimp_Form_Action_URL': //mybrand.us12.list-manage1.com/subscribe/post?u=63b1k5djkr45164d83245c012&id=a2cb5cedb8

  1. Go back to the 'Layout' edit page in your Big Cartel shop admin and search for the following controls:
    {% assign: MailChimp_Form_Action_URL = "//themefiend.us2.list-manage2.com/subscribe/post?u=27b7d5cbfb45164d58769c000&id=d8c0ab9b17" %}
    
    replace the 'Mailchimp_Form_Action_URL' with your on form action url. So the control will look something like this:
    {% assign: MailChimp_Form_Action_URL = "//mybrand.us2.list-manage.com/subscribe/post?u=27b7d5cbfb45164d58769c000&id=a2cb5cedb8" %}
    

Now your Mailchimp account is connected to your newsletter signup form.

Newsletter Configuration Service

Rather have us configure the newsletter form for you? Purchase our newsletter configuration service ($19). 

Our service includes:

  • Connecting your Mailchimp account to your Big Cartel shop's newsletter form.
  • Newsletter form configured within 1-2 business days

Note: You will be responsible for creating, editing or filtering a list in your newsletter provider account.

Instagram Feed

If your theme supports an Instagram Feed, you can generate your own Instagram feed by using LightWidget or Juicer. You'll need to log into your Instagram account to through Lightwidget to connect it. Upon doing so, you can configure the appearance of your Instagram feed and preview it.

After configuring the feed appearance, click the 'Get Code' button and scroll down to obtain your LightWidget Instagram feed code.

To change the default Instagram feed code to your own, locate the following control in the 'Home' edit page of your Big Cartel admin:

{% capture: Instagram_Widget_Code %}
<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/00617f55ff215a37a7ec745f64a07af8.html" id="lightwidget_00617f55ff" name="lightwidget_00617f55ff"  scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
{% endcapture %}

And replace the code between the 'capture' and 'endcapture' lines, starting with the text  with your own Instagram feed code.

Since the Instagram feed can't be previewed within your Big Cartel admin, you'll need to view your live site to see the Instagram feed.

Hide Instagram Feed

If you'd like to hide the Instagram feed, locate the following control in your 'Home' edit page:

{% assign: Show_Instagram_Feed = 'Yes' %}

and change 'Yes' to 'No'.