Home Page

This is your website’s main page. It has advanced elements that allow you to customize your website. 

Site Administrators and Content Editors can edit the home page. 

Select Configure in the left menu, then select Home Page to edit the home page. 

Prerequisites

Before configuring the Home Page, have a general idea of what you want your homepage to look like and make sure you have some content from the Create section prepared along with images. 

• Product Lists — Up to 5 product lists can be added to the home page. Creating this ahead of time makes it easy to set up the home page. You can also use product lists provided by IndieCommerce. 
• Slider images — These images must be 1330px (w) by 418px (h). Images larger than this will be cropped to this size. 
• Calls to Action images — Create images that meet the minimum height and width requirements for where the image displays. Images larger than this can be cropped. Use the ratio calculator to maintain the ratio on larger images. Images smaller than these sizes can’t be saved.
  • 1 CTA / Position #1: 1280px (w)  by 490px (h)
  • 2 CTAs / Position #1: 412px (w) by 420px (h)
  • 2 CTAs / Position #2: 848px (w) by 420px (h)
  • 3 CTAs / Position #1: 412px (w) by 300px (h)
  • 3 CTAs / Position #2: 848px (w) by 624px (h)
  • 3 CTAs / Position #3: 412px (w) by 300px (h)
  • 4 CTAs / Position #1: 440px (w) by 300px (h)
  • 4 CTAs / Position #2: 400px (w) by 624px (h)
  • 4 CTAs / Position #3: 440px (w) by 300px (h)
  • 4 CTAs / Position #4: 400px (w) by 624px (h)
• Image Row images — Create images that meet image row size requirements. Smaller images will have white space around them. Image width automatically adjusts to fill the space of the row. Rows will display grid-like if they are the same size. Using images that are different sizes creates staggered rows. 
  • Single images must be at least 1280px (w) to fill the content area. 
  • Images for rows of two or three images should be at least 600px (w) by 400px (h).

All components and fields with a red asterisk (*) are required.

Title

Enter a Title for your home page. The title identifies the page in the content manager and improves SEO. 

Slider

The slider displays an image gallery designed for accessibility and SEO. Use it to highlight upcoming events, the Indie Next list, and more. A single slider displays as a banner. When you add multiple sliders, select Auto-play to automatically rotate through them. A pause button makes it easy for visitors to stop the slideshow. You can add new slides or existing slides.

Add new Slide

Create new slides that can be reused. 

1. Select Add new Slide. 
2. Enter a Name.
3. Upload an Image for the slider. 
4. Enter a Slide Title and Slide Subtitle that displays with the slide. 
5. To make a Slide Link, enter a URL by typing the title of a piece of content and selecting it or entering an internal path or external URL. Enter <front> to link to the front page, <nolink> to only display the link text, or <button> to display keyboard-accessible link text only. A URL with the image makes the entire slide a link. Add Link text to display a linked button. 

Add existing Slide

Use a previously created slide.

1. Select Add existing Slide.
2. Select the slider items you want to include, then choose Select Slider Item.

Primary Calls to Action

Calls to action are images and links to other locations, such as pages within your website or other sites. They prompt site visitors to take specific actions and lead them to make purchases. The blocks stack vertically when viewed on mobile devices.

You can add up to 4 CTAs. Create new Calls to Action or add previously created Calls to Action. 

Add new Call To Action

Create a new Call To Action to use anywhere calls to action are available.

1. Enter a Name.
2. Enter a Call to Action Title.
3. Enter a Call to Action Subtitle.
4. Enter a URL for the Call to Action Link by typing the title of a piece of content and selecting it or entering an internal path. Enter <front> to link to the front page, <nolink> to only display the link text, or <button> to display keyboard-accessible link text only. Enter the Link text that is short and suitable for buttons.
5. Add an Image for the Call To Action by selecting Choose File, navigating to the image, and selecting Open. 
   1. Enter Alternative text used by screen readers and when the image doesn’t open. 
   2. Crop image makes it easy to adjust the image size based on the CTA/Position combination. A crop box displays indicating the area of the image that will display. Move the box around to capture the area to display with the CTA. You can use Freeform to create a custom crop. 
6. Apply overlay adds a transparent but darkened overlay to the image and under the text and is checked by default. This improves the contrast between the text and image and is recommended for accessibility compliance. The overlay doesn’t appear if you only display an image (text and link fields are empty). 

Add existing Call To Action

Configure existing Calls To Action.

1. Choose Select Call To Action elements.
2. Select the Calls To Action to include.
3. Choose Select Call to Action.
4. Use the arrows to rearrange the Calls to Action.

Use Edit to modify a Call to Action or Remove to delete it.

Icon Navigation

Create a navigation block with a series of simple, recognizable icons that link to pages on your website and other sites. Icons take up less space on the home page and still assist visitors with finding content. This block displays below the Slider and Primary CTAs (if used). 

1. Enter a URL for the Navigation Links by typing the title of a piece of content and selecting it or entering an internal path. Enter <front> to link to the front page, <nolink> to only display the link text, or <button> to display keyboard-accessible link text only. 
2. Enter Link text that is short and suitable for icons.
3. Select an Icon. 

Select Add another item to add up to 8 navigation links total. Use the drag-and-drop handles to rearrange the icons. Clear the URL and Link text and select - None - for the Icon to remove the navigation link. 

Image Rows

Add rows of images with links to other pages on your website or other sites that catch visitor attention. Images scale dynamically and retain aspect ratios across different screen sizes, making them mobile-friendly. Add up to 3 rows of 3 images for a total of 9 images. Image rows display below the slider and above primary Calls to Action. 

You can add new or existing images. Once you’ve added images, use the drag-and-drop handles to rearrange the images. Select Remove to delete images from the Image Row.

Add new Image

1. Select Add new Image.
2. Enter a Name for the image.
3. Select Choose File to Add a new file, then navigate to the image.
4. Enter Alternative text used by screen readers and when the image doesn’t open.
5. Select a Link by typing the title of a piece of content and selecting it or entering an internal path. Enter <front> to link to the front page, <nolink> to only display the link text, or <button> to display keyboard-accessible link text only.  
6. Select Create Image.

Add existing Image

1. Select Add existing Image, then Select Images.

Select the images to add, then choose Select images.

Product lists

Product lists display as book carousels on the home page. They appear between Primary CTAs or Image Rows and Secondary CTAs. Sites with the search bar on the home page display the first two product lists above the search bar.

You can add a new product list or select from those you’ve already created. Once you’ve added product lists, use the drag-and-drop handles to reorder the lists, select Edit to modify a list, or select Remove to delete a list.

Add new Product list

Create a new product list. 

1. Enter a Product list title to display with the list.
2. Enter a Description of the list in the text editor. The description is optional. 
3. Enter an ISBN, book title, or product name, and select the product from the results. Use the arrows to move products around in the list. Select Add another item to add more products to the list. Select Remove to delete products from the list. 
4. Select Published to publish the product list to the site. 
5. Create a custom URL alias by unchecking Generate automatic URL alias and entering the alternate path. 
6. Select Create Product list. 

Add existing Product list

Select a previously created product list [Product Lists].

1. Select Add existing Product list.
2. Choose Select product lists.
3. Select the product lists to add. 

Scroll to the bottom of the list and choose Select product lists.

Secondary Calls to Action

Create a second block of calls to action that display at the bottom of the page, above the footer. See Primary Calls to Action for instructions to add CTAs.

Active

Leave Active selected to set the home page as the active one for your website.

Search, social & schema

Customize how the content on this page displays on social media or in search results by selecting Customize abstract in the upper right. Enter an Abstract that is a short summary of 160 characters max. This setting is optional.

Save

Select Save to save changes made to the home page.