Back to Top
Page Template - Custom Home at Aarcade

Custom Home

Page Template

Suitable for Any Aarcade Theme

Free

The Custom Home Page is displayed in Aarcade theme previews as an example of using custom content for a shop home page.

Additionally, this page uses the inbuilt shortcode system, unique to Aarcade themes, to display a gallery of sample images.

See installation instructions below.

Instructions

Make sure you have an Aarcade theme installed before proceeding with the following instructions. This extra will only work with an Aarcade theme.

Read the shortcodes support article. Understanding Aarcade’s shortcode system will help you get the most out of this page template.

Create a new custom page, as detailed in the support article How do I add a page to my Big Cartel shop?, and name it “x ic home”. Note that an “x ic home” page replaces all home page content. You could also use “x ic before home”, any other “x ic” page (refer to Insert Content for more information on “x ic” pages) or a standard new page.

IMPORTANT

Switch to HTML edit mode before proceeding – refer How do I switch to HTML edit mode?

Copy all of the code in the code box below and paste it into your new custom page content area.

Edit the content as required. As a minimum you will need to:

  • Replace the sample images with your own images. Refer to How do I upload images or files for my Big Cartel page content? to prepare, upload and retrieve public URL’s for your images (no hosting required). Note:
    • An a and img HTML tag has been used to insert the first image and link it to the Products page.
    • An inline style has been applied to the img tag to set the maximum width to 100%.
    • See Image Sizing section below.
  • Review and edit the gallery settings as required – ref. Shortcodes > gallery. Note:
    • The link setting has been used on each image to link to both external and local pages. Change these links for each image.

Click the Save link when you are done editing your page content.

<p>
<a href="/products"><img src="http://theme.aarcadethemes.com/preview/images/tupelo/r1c1.jpg" alt="" style="max-width:100%;" /></a>
</p>

[[gallery columns="3" paddingv="10"]]
http://theme.aarcadethemes.com/preview/images/tupelo/r2c1.jpg
#link#http://support.aarcadethemes.com/shortcodes/#gallery##nw
http://theme.aarcadethemes.com/preview/images/tupelo/r2c2.jpg
#link#/category/ac-sale-on-sale
http://theme.aarcadethemes.com/preview/images/tupelo/r2c3.jpg
#link#/about-us
[[/gallery]]

Image Sizing

This layout will automatically resize images as the browser window is resized, however it will not allow images to expand beyond their true width. We do not use, or encourage the use of, CSS to expand an image beyond its natural dimensions as this results in poor image quality.

For this reason you should use an extra wide image in the main position of the layout. In our example we have used:

http://theme.aarcadethemes.com/preview/images/tupelo/r1c1.jpg 1,940 pixels wide x 961 pixels high

If using this layout on the home page of a fluid sized theme (like Tupelo), you can also set the maximum width of the home page to ensure that it does not expand beyond the size of your preferred main image. This is done via your Extra Styles, for example:

/* - - - - Set The Maximum Width Of The Home Page */
{% assign home_max_width = '1200' %}