Homepage Setup

Homepage slider/hero image

Appearance > Widgets
or
Appearance > Customize > Widgets

The large full-width slider or image section on the homepage is the ‘Homepage Slider/Hero Section’ widget area.

To make use of this widget area, first make sure to set one of your pages to be the static homepage in Settings > Reading > Your homepage displays. This widget area does not display on a homepage that is set to display your latest posts.

To quickly and easily create a slider or a single image, add a standard WordPress ‘Image’ widget to the ‘Homepage Slider/Hero Section’ widget area, and upload/select an image to display.
You can optionally enter a ‘Link to:’ URL for the image to link to.

Add an image widget to the widget area

All images added to this section with the standard ‘Image’ widget will be automatically displayed full width, so we recommend you use suitably large images to prevent blurring. The image used on the Retail demo has dimensions of 1920×800 pixels.

Should you have large images and are concerned that the file size may be very high, a free online image compression tool that we can recommend is TinyPNG or TinyJPG. This free tool can compress the file size of your images to ensure they load faster for your website visitors.

Widget Title

Optionally give the widget a title or leave the title empty. If you give the widget a title, this will be displayed as large text in the center of the image.

When adding or choosing an image, if you enter text as the image caption in the media editor, this text will be displayed over the image below the widget title.

Slider

To create a slider, simply add additional ‘Image’ widgets to the ‘Homepage Slider/Hero Section’ widget area, and your images will automatically display as a slider on your homepage. You can also sort the image widgets into any order you wish to display the slides in that order.

If you are adding additional images to create a slider, we very much recommend that all the images are of the same size or the same aspect ratio.

Other third-party slider or image plugins can be used in this section if you prefer. Simply enter the plugin’s [shortcode] into the widget area using the standard ‘Text’ widget. Please consult your chosen plugin’s documentation for the correct shortcode to use.

Homepage product sections

Appearance > Customize > Homepage Sections

The static homepage can be configured to display any or all of the following sections.
The WooCommerce plugin is required.

  • Page content (the main content of the page that is set as your static homepage)
  • Product categories (the top level of non-empty product categories)
  • New products (the most recent published products)
  • Featured products
  • On-sale products
  • Top sellers (products ordered by highest sales)
  • Top rated products (products with customer ratings ordered by the highest rated)

The homepage displays the standard page content by default.

Please note that the product sections will not display if you have set the WooCommerce shop base page (the ‘Shop page’ in WooCommerce > Settings > Products) to be the same page as your site’s static homepage.

To make use of the additional sections, check the box next to the ‘Activate Sortable Sections’ box.
Once activated, you can check the box next to each section that you wish to display.
The sections can be reordered by dragging and dropping the sections into any order. Grab the relevant section with the three-bar icon located to the right of each section.

A screenshot showing how to configure the homepage sections of the Retail WordPress theme