Big Cartel Theme Support

How do I create a splash (a.k.a. enter or landing) page?

How do I create a splash (a.k.a. enter or landing) page?

A splash page is a special type of page that replaces your shop home page. Splash pages display your custom content only — i.e. headers, navigation menus, footers and other layout elements are all hidden — which would typically be bold text / images / video / logo styled to be concise and to have high impact.

Pros

Because a splash page is faster loading (depending upon the content you add) and has focussed content, it can provide the highest probability that your visitor will take in the content. This can be useful if you have specific content you are confident will grab your visitor’s interest and compel them to view your site. A splash page may also provide a better opportunity to establish the mood / aesthetic of your brand.

Cons

Because of the lack of navigation options and the limited content, a splash page may become an obstacle. In other words, adding one extra step for the visitor to take before seeing your general site content, may lead to visitors abandoning your site at the splash page.

Splash page vs home page

Before creating a splash page, it is important to understand that you are not adding an extra page. You are replacing your home page. That is to say that you are choosing between having a splash page or your home page content at the root for your site URL, e.g. http://myshop.bigcartel.com

Once you have an active splash page, your home page content (including any custom content created with x-ic-home, x-ic-before-home, etc.) is overridden by the splash page. This means that the home page content is inaccessible and can not be linked to, e.g. you can not link from your splash page to your home page content.

This overriding of the home page is generally the desired effect, as splash pages will typically link directly to product pages. For example, the main call to action link on your splash page may be to your all-products page, i.e. /products per the example in the following section of this article. If you wish to include further introductory content at this point, you could add this before the all-products grid with an x-ic-before-view-all page (refer to Insert Content - All-Products and Search Page).

However, in some cases you may wish to have both a splash page and a complete home page that you will link to from your splash page. You can do this by creating a new page with an appropriate title, such as Home Page or Welcome, and then adding whatever home page content you like to this secondary home page. When applying this method, note the following:

  • You can not use the title Home for this secondary home page, as this title is reserved by the Big Cartel platform.
  • Don’t forget to add the secondary home page link to your splash page. Test the link to ensure that it functions correctly, e.g. <a href="/home-page">ENTER SITE</a> - refer to How do I link to a web address or a file from my page?
  • As with any custom page you create, you can add any content you like in your secondary home page, including slideshows, galleries, etc. If you previously created custom content in x-ic-home, x-ic-before-home or x-ic-after-home pages, you can copy all of this content into the secondary home page (be sure to switch to HTML edit mode where necessary).
  • The [[products]] shortcode - see Shortcodes - Product grids - can be used to recreate product grids in your secondary home page.
  • If you do not wish to have your secondary home page appear in your main menus, you can hide it by applying the instructions How do I hide a page?
  • Your site header text / logo will link to your splash page (the primary home page) by default. You may wish to change this link to your secondary home page using the method detailed in section Home URL of our article How do I edit my navigation menus in my Big Cartel admin?

Creating a splash page

To create a splash page we use the insert content method x-ic-splash-page, detailed in our support article Insert Content - Home Page, as follows:

1. Create a page in our Customize design > Pages admin area with the exact title:

x-ic-splash-page

2. Important: Switch to HTML edit mode per How do I switch to HTML edit mode?

3. Create our splash page content in the x-ic-splash-page page. For example, the splash page content used on our Sloop theme preview:

<style>
body#home-page {
background: url("http://preview.aarcade.net/wp-content/uploads/2014/05/skater.jpg") no-repeat center center;
background-attachment: fixed;
background-size: cover;
}
#splash-page main > article {
max-width: 400px;
padding: 15px 30px;
margin: 0 auto;
border-radius: 3px;
background-color: #ffffff;
background-color: rgba(255,255,255,0.8);
}
</style>
<h1 style="font-size: 50px;margin-bottom:0">SPLASH PAGE</h1>

<hr>

This is an example of using Aarcade's unique insert content system to create a custom "Splash" page. You can create a page like this with any Aarcade theme.

<hr>

[[clearspace]]

<div class="block-left">
<a href="/blog">BLOG</a>
</div>
<div class="block-right">
<a href="/products">PRODUCTS</a>
</div>

[[clearspace]]

It is critical that your splash page includes functioning links to your shop content. Otherwise access to your shop will be blocked.

4. Finally we click the Done button and then click the Save link to apply our changes.

Note that we included our <style> element and used inline styles — i.e. style="font-size: 50px;margin-bottom:0" on the <h1> element — all within the splash page content. This allows us to limit the styles to the splash page only and, if/when we delete the x-ic-splash-page page, all associated styles are deleted too.

Alternatively you can create custom CSS for your splash page in your custom style coding area — see Where do I add custom style code?. Make sure that such CSS is specific to your splash page by placing body.splash-page before any elements, for example:

body.splash-page main > article {
	max-width: 500px;
	padding: 15px 30px;
	border: 3px solid #000000;
	margin: 0 auto;
	background-color: #ffffff;
}

For more information on creating custom CSS, refer to How do I create custom style code?

AarcadeHow do I create a splash (a.k.a. enter or landing) page?