Big Cartel Theme Support

How do I customise my home page in my Big Cartel admin?

How do I customise my home page in my Big Cartel admin?

By default a home page link will not be included in your menus. If desired, you can add and change the location of your home page link via the x-sp-home special menu item - see How do I edit my navigation menus in my Big Cartel admin?

Customising the home page content

Your home page is the most important page of your site. Before you jump in and customise this page, we recommend that you read our support article Getting your home page right.

Default home page content

By default your Home page will display your shop’s products in the same order you set — by clicking, dragging and dropping — in the Products section of your Big Cartel admin area.

Custom content options

The Insert Content method is used to create custom content for your home page. The Insert Content options for creating your home page content are:

  1. x-ic-before-home — Insert custom content before the home page products.
  2. x-ic-home — Replace the home page products with custom content (i.e. do not display the default products on the home page).
  3. x-ic-after-home — Insert custom content after the home page products.
  4. x-ic-splash-page — Display only your custom content on the home page, i.e. hide all menus, footer and header, to create an “Enter” (or “Splash”) page. This option will override any of the above (if you have them in place).

Add the Insert Content page

Once you have decided which of the above Insert Content options you require, navigate to your Customize design > Pages admin area and add the new Insert Content page. Name the page according to the option you chose above.

For example, to replace the home page products with our custom content (i.e. no products will be displayed on the home page) we choose x-ic-home:

How do I customise my home page in my Big Cartel admin? at Aarcade

Create custom content

You can now enter any content you want, in your new insert content page, and that content will be automatically displayed in the correct location. You can enter text and use the edit toolbar to format and add links and images. You can also switch to HTML mode to use HTML tags, shortcode or other content — see Additional reference section below — to create your custom Home page.

Note that you only need to use one of the available home page options. In our example, we created the x-ic-home page and we can now add all of the home page content we need to this page.

The only case where two options should be used is when you wish to display custom content before and after the default home page products with both x-ic-before-home and x-ic-after-home.

Example - creating a home page image

Using the support article How do I insert an image into my Big Cartel shop page? for reference, we might use the following code to display a home page image that links to the all-products page:

<div style="margin-top: 10px;margin-bottom: 10px">

<a href="/products"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike"></a>

</div>

Pasting this code in the Big Cartel admin area — in the content of our x-ic-home page — we get this:

Insert an Image in Big Cartel Page

To apply our custom home page, we click the Done button and then the Save link.

Note that we do not need to create more x-ic pages to add more content to our home page. In our example, we would return to our x-ic-home page and create new lines above and/or below our image and add more content as required.

...we can keep adding content here as needed...

<div style="margin-top: 10px;margin-bottom: 10px">

<a href="/products"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike"></a>

</div>

...and we can keep adding content here as needed...

More examples and replicating the home pages shown in our previews

As we expand our themes and variations, we will be creating more home page variations for our previews. Keep an eye on new previews for more examples of custom home pages. You can copy custom home pages, as well as other pages, directly from any of the previews (even if you are not using the same Aarcade theme) and apply them to your shop. Refer to How do I add pages as seen in Aarcade previews, like FAQ, About Us, etc.? for details.

Home page pagination

As already discussed in this article, if you are using an x-ic-before-home and/or x-ic-after-home method, your standard product thumbnail grid will also be displayed with your custom content. This means that your home page may have more than one page, i.e. your product thumbnails are broken up across page 1, 2, 3, etc.

In this case, there may be custom content in your x-ic-before-home and/or x-ic-after-home pages that you only want to show on page 1, i.e. the true home page. This can be achieved by wrapping that content in a Big Cartel API unless tag that checks the current URL for a page identifier. For our example, it would look like this:

{% unless page.full_path contains "page=" %}

This content will only be displayed on the true home page!

<div style="margin-top: 10px;margin-bottom: 10px">

<a href="/products"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike"></a>

</div>

{% endunless %}

Don’t forget the {% endunless %} tag to close out the content.

Check your home page on all devices

Make sure your home page looks great on all devices. Consider using the [[mobileonly]] and/or the [[monitoronly]] shortcodes if necessary, to create different content for small and/or large screen devices. Refer to Shortcodes - Mobile and non-mobile content.

Restoring Your Home Page Content

If you wish to restore your original home page content simply delete any relevant Insert Content pages you have created. In our example we would delete the x-ic-home page.

Additional reference

To understand how and why the x-ic-before-home, x-ic-home, etc. pages work, and discover the other options for inserting content in your shop pages, refer to:

  1. An introduction to the Insert Content method

For more options on creating custom content for your shop, refer to the other sections of the Pages & Custom Content support category, which include:

  1. Articles on customising the home page
  2. Articles on creating general custom content and extra pages
  3. Articles covering all available insert content methods
  4. Articles covering all available shortcodes
AarcadeHow do I customise my home page in my Big Cartel admin?