Default Home Page Layout

Home Page Ideas

Editing the Home Page

Now Turn Up the Volume!

FAQs

Default Home Page Layout

By default, the built-in home page layout includes the following elements:

  • Slideshow: To update slides, select CMS / Home Page Slideshow
  • Banner images: To update images, select CMS / Pages > celebrity_home
  • New+Sale Slider: Dynamically displays new and sale items based on Counterpoint data

 Home Page Layout

Home Page Ideas

While the home page includes default content, it's really a "blank canvas" you can edit as you please. For example, you could:

  • Add a paragraph or two of SEO-friendly text about your business — just use the WYSIWYG editor and add text, more images, and links as desired
  • Replace the three banner images with one taller banner image460px x 254px
  • Remove the banner images and fill the entire home page with a large slideshowyou'll need good CSS skills for this
  • Remove the new+sale slidersimply delete the line of code that calls it, see where in the screenshot below
  • Incorporate cool new add-ons, like LookBook Pro and NRO Product Blocks, below
  • See what others are doing at the NRO Design Gallery

Need help? If you need help making changes to your home page, contact Professional Services for assistance.

Editing the Home Page

To edit the home page contents, select CMS / Pages > celebrity_home. Click the Show/Hide Editor button to switch between code view and the user-friendly WYSIWYG editor. Note that in both views, you'll only see placeholder content for the slideshow and the New+Sale slider since they rely on data controlled elsewhere.

Home Page Code Sample

Page Information

On the Page Information tab, be sure to edit the Page Title and replace "Celebrity Them - Home Page" with "Your Store Name - Home Page". This field is used in search engine marketing and displays in the browser tab when viewing your storefront — it should include your store name.

Content

Slideshow

Select CMS / Home Page Slideshow, and click the Add Slide button to create a new slide:

  • Title: Enter text to display on top of the image, or leave blank if desired
  • Link: If you don't know the link to a product or category page, go to your storefront and navigate to the desired landing page and copy and paste the address. Note that this slideshow only supports internal site links, not links to external sites like facebook.
  • Show Details Button: If you enable the button, then only the button portion will link to the landing page as opposed to the entire image (most prefer to let the entire image serve as the link)
  • Image: If using the default slideshow dimensions, the slide images are 694px x 460px. Note: Don't include spaces in your image file names. 
  • Status: Disable any slides you don't currently need and save them for future use
  • Sort Order: Lower numbers display first
The slideshow itself is quite easy to work with. The hardest part for most non-designers is finding and editing good quality images (do-it-yourselfers should also see the Image Resources blog post). If you don't have someone on staff with basic Photoshop skills, contact us for assistance (hourly rates apply).

NRO includes one built-in slideshow for your home page. If you want to add more slideshows to other pages, for example the top of a category page, see Image Slider for NRO.

Slideshow Settings

To configure the slideshow settings, select System / Configuration / Home Page Slideshow Settings.

You can choose from dozens of transition effects and speed up or slow down the slides. (TIP: The timings are in milliseconds, so for 5 seconds enter 5000). You can also choose to disable the timeline, the scrolling line that's used as a visual indicator of how long until the next slide displays.

Banner Images

To update images, select CMS / Pages > celebrity_home. Click the Show/Hide Editor button to switch between code view and the user-friendly WYSIWYG editor.

New+Sale Slider

From System / Configuration / Theme Settings, you can specify whether to display new items only, or new and sale Items together. The New+Sale Slider dynamically displays new and sale items based on Counterpoint data:

  • To populate new arrivals, you must have products flagged as new with a valid 'new until date' in Counterpoint (on the Ecommerce tab of Inventory / Items). 
  • To populate sale items, you must have sale prices defined in Counterpoint.

For more ideas and to learn how to change the graphic overlays, see Displaying Featured Items Instead of New Arrivals.

Now Turn Up the Volume!

Looking for something different for your home page? Take a look at two hot new extensions: Lookbook Pro for NRO and NRO Product Blocks. Both extensions can be seen on the home page of the Demo Extras Store

 

 Demo Extras

LookBook Pro for NRO

Lookbook Pro for NRO allows you to create a "Shop this Look" experience — with the feel of a print catalog plus interactive links to product pages.

For example, you can showcase this season's hottest dress, shoes, and accessories on an attractive model, or furniture and home decor in a well-designed living room. Add an unlimited number of hotspots to each LookBook slide — shoppers can easily add hotspot items to their carts or link to the product page details.

Add LookBook slides to your home page, category pages, or just about anywhere you want to showcase a collection of products.

What really makes Look Book worth looking at is how easy it is to use. Shoppers simply hover, click, and buy. And setting up a look book page is easier than it looks. You just upload your LookBook image, click anywhere on the image, and instantly add a link to a product simply by typing in the SKU.

NRO Product Blocks

NRO Product Blocks helps increase your product sales by showcasing your top products on your Home Page, CMS pages, category pages, and more. For example, create blocks for bestselling women’s items, newest home décor, and shoe sale.

Frequently Asked Questions

I need to replace other images on my home page, but how do I know what size to make them?

Go to your storefront and right-click on the image. Select Image Properties or Properties (actual link name depends on your browser). This will tell you the image name as well as the height and width.

I keep getting stuck when trying to insert images using the WYSIWYG editor. What's the trick?

When you click on the browse button, the insert/edit image window loses focus and drops behind the other windows. Look on your taskbar at the bottom for the Insert/Edit Image tab. Click on the tab to open it back up. Fill out the information about the image and click Insert and the image will appear.

See the Rich Formatting Editor FAQ in the help center for more details.