Home page

The storefront’s home page is a stack of sections. Six of them have content you edit in the Home page group of tabs; the rest fill themselves from your catalogue. This page walks through each editable section and explains what drives the automatic ones.

Before you start

• Upload the pictures you want to use to the Media Library. Every image field picks from it.
• Every home page section except the Slider ships switched off. Turn each one on when its content is ready.
• Changes reach shoppers within about 5 minutes of Save Changes.

Which sections appear, and in what order

The list of home page sections and their order is a setting of the storefront deployment (its HOME_SECTIONS variable), not of WordPress. A section left out there never appears, whatever its switch says here. To change the order or drop a section, ask whoever deploys the storefront; see Storefront configuration.

Every section, in the default order:

Section on the home page	HOME_SECTIONS name	Content comes from
Hero slider	hero	Home page › Slider tab
Shop by category	categories	Your product categories with the most products
New arrivals	new-arrivals	Your newest products
Season sale banner and grid	season-sale	Home page › Sale Banner tab, plus products on sale
Best sellers	best-sellers	Sales and ratings
Today’s Deals	todays-deals	Home page › Today’s Deals tab, plus sales ending today
Shop by brands	brands	Your brands, featured brands first
Trending now	trending	Categories ranked by items sold in the last 30 days
Call-to-action banner	callout	Home page › CTA banner tab
Recently viewed	recently-viewed	The shopper’s own browsing
Promo cards	promo-banners	Home page › Promo cards tab
Daily essentials	daily-essentials	Products marked Featured in WooCommerce
What Our Customers Are Saying	reviews	Home page › Testimonials tab
Our blog posts	blog	Your latest WordPress posts

Every section hides itself when it has nothing to show.

How the Home page tabs work

These rules apply to all six tabs:

• Each section has a switch in its card’s header. While it’s off, the card folds its fields away; what you typed is kept for when you switch it back on.
• Images come from the Media Library (Add image, Replace, Remove). If you pick something that isn’t an image, the whole save is refused with a message ending “Nothing was saved.”
• Text fields are plain text. Any HTML is removed. Multi-line fields keep their line breaks.
• Link fields need a valid web address. A value that isn’t one is saved empty.

Slider

StoreFront›Settings›Home page›Slider

The large picture carousel at the top of the home page. Each slide is a full-width picture, optionally with a small badge line, a heading, a paragraph and a button. When the slider is off or has no slides, the storefront shows its own built-in hero banner instead.

1. Open Home page › Slider and check the Home-page slider switch is on.

2. In the Slides card, click Add image, pick a picture and click Use this image.

3. Open the slide’s Content section and fill in the title, subtitle, description and button text. A dot on Content means the slide has text.

4. Type a Link URL for the slide’s button.

5. Add more slides the same way, and drag them by their handle to set the order.

6. Click Save Changes.

Home-page slider card:

Setting	What it does	Default
Switch	Shows or hides the slider. It appears only when on and at least one slide exists.	On
Autoplay interval (ms)	How long each slide shows before the next, in milliseconds. 5000 is five seconds. The lowest allowed is 1000.	5000
Aspect ratio (W : H)	Admin aid only: used to flag slides whose picture has a different shape. Doesn’t affect the storefront.	16 : 9
Ratio tolerance (%)	Admin aid only: how far a picture’s shape may differ before it’s flagged Off ratio.	2

Each slide:

Setting	What it does	Default
Picture	The full-width slide picture. Required: a slide without a picture is removed on save. Any shape is accepted; pictures that don’t match the aspect ratio are flagged Off ratio.	—
Alt text	Describes the picture for screen readers.	The image’s own alt text
Link URL (optional)	Where the slide’s button goes.	Empty: goes to /shop
Content › Title	The large heading.	Empty: shows the store’s tagline
Content › Subtitle	A small badge line above the heading, for example “New Arrival”.	Empty: no badge
Content › Short description	A paragraph under the heading.	Empty
Content › Button text	The button label.	Empty: “Shop Now”

Each slide row also has Preview image, Replace image and Remove slide. Replacing a picture keeps the slide’s text. There’s no limit on the number of slides.

Every slide has a button

The field help suggests an empty button text or link means “no button”, but the storefront always shows one: an empty button text reads Shop Now, and an empty link goes to the shop page. Fill both in to send shoppers somewhere specific.

CTA banner

StoreFront›Settings›Home page›CTA banner

One wide call-to-action panel with a background picture, near the bottom of the home page: for example a limited-time offer.

Setting	What it does	Default
Switch	Shows or hides the banner.	Off
Heading	The banner heading. Also used as the picture’s alt text.	“For A Limited Time Free Makeup Samples”
Subheading	The line under the heading.	“Free 5 makeup samples with every order over $100”
Button label	The button text.	“Continue Shopping”
Button link	Where the button goes.	Empty
Background image	The background picture.	None: the storefront’s built-in artwork

Caution

The default heading and subheading are sample text. Replace them with your own offer before switching the banner on.

Promo cards

StoreFront›Settings›Home page›Promo cards

A small grid of promotional tiles. Each card has a background picture, a badge, a heading, a subheading, a button and an optional “Save” discount label.

1. Open Home page › Promo cards and switch the Promo cards card on.

2. Click + Add card. A new card starts with the badge “Only This Week” and the button “Shop Now”.

3. Add a picture, then fill in the fields below.

4. Use Move up and Move down to set the order, or Delete to remove a card.

5. Click Save Changes.

Setting	What it does	Default
Switch	Shows or hides the grid. It appears only when on and at least one card exists.	Off
Image (Add image, Replace, Remove)	The card’s background picture.	None
Badge	A small label at the top of the card, for example “Only This Week”.	“Only This Week” (new card)
Discount label	Shown after a fixed word Save, for example 40% gives “Save 40%”. Empty = no discount label.	Empty
Heading	The card heading. Also the picture’s alt text.	Empty
Subheading	The line under the heading.	Empty
Button label	The button text.	“Shop Now” (new card)
Button link	Where the button goes.	Empty

• Up to 6 cards. At six, the button is disabled with “Maximum number of promo cards reached.”
• A card with neither a Heading nor a Subheading is removed when you save.
• The word Save in front of the discount label is fixed text and isn’t translated.

Sale Banner

StoreFront›Settings›Home page›Sale Banner

The “season sale” block: a banner with your sales message beside a grid of products currently on sale. The products are picked automatically, up to 8 of the products WooCommerce has on sale. You control only the banner.

Setting	What it does	Default
Switch	Shows or hides the block.	Off
Kicker	The small line above the heading.	“Now on”
Heading	The banner heading.	“Holiday Season Sale”
Subheading	The paragraph under the heading.	“A hand-picked edit of the season’s best, marked down while stock lasts. Once they’re gone, they’re gone.”
Button label	The button text.	“Shop The Sale”
Button link	Where the button goes.	Empty
Background image	The banner background.	None: the storefront’s built-in artwork

To change which products appear, give products a sale price in WooCommerce.

Today’s Deals

StoreFront›Settings›Home page›Today's Deals

A countdown block showing products whose sale ends today, next to a banner, with a timer counting down to midnight. The products and the countdown are automatic. You control the wording, the link and the banner picture.

Setting	What it does	Default
Switch	Shows or hides the block.	Off
Section Title	The title above the row of deals.	“Today’s Deals”
Kicker	The small line above the banner heading.	“Big saving”
Heading	The banner heading.	“Everything Ending Today”
Button label	The banner button text.	“Explore Now”
Button link	Where the banner button and the block’s “view all” link go.	Empty
Background image	The banner background (a tall panel).	None: the storefront’s built-in artwork

How a product becomes a deal. Even when switched on, the block appears only if at least one product has a sale that is running now and ends before midnight tonight, in your store’s time zone. Up to 12 deals show, the soonest-ending first.

1. Edit the product in Products › All Products.

2. In Product data › General, enter a Sale price and click Schedule.

3. Set the sale’s end date (the “to” date) to today, and update the product.

Tip

“Today” follows the time zone under Settings › General › Timezone. If deals appear or disappear at the wrong hour, check that setting. See WooCommerce settings.

Testimonials

StoreFront›Settings›Home page›Testimonials

The “What Our Customers Are Saying” section: customer quotes you choose, each with a name, a job title, an optional photo and an optional linked product.

1. Open Home page › Testimonials and switch the Testimonials card on.

2. Click + Add review and fill in the name, job title and review.

3. Optional: click Add photo for the reviewer’s photo, and search for a product to link.

4. Use Move up, Move down and Delete to arrange them.

5. Click Save Changes.

Setting	What it does	Default
Switch	Shows or hides the section. It’s also hidden when there are no testimonials.	Off
Section heading	The section heading. Saving it empty restores the default.	“What Our Customers Are Saying”
Photo (Add photo, Replace, Remove)	The reviewer’s photo, shown small beside the name.	None
Name	The reviewer’s name.	Empty
Job title	Shown under the name, for example “Verified Buyer”.	Empty
Review	What the reviewer said.	Empty
Product	Links the testimonial to a product, shown with its picture. Type to search (“Search products…”) and pick from the list; Change clears it. Only published products are found.	None

• Up to 24 testimonials. At 24, the button is disabled with “Maximum number of testimonials reached.”
• A testimonial with neither a Name nor a Review is removed when you save.
• If a linked product is later unpublished, the testimonial simply stops showing it.

Sections that run themselves

These sections have no tab of their own. Here’s what feeds them:

Section	How to influence it
Shop by category	Shows the categories with the most products. Give categories clear names and images in Products › Categories.
New arrivals	Your most recently published products.
Best sellers	Switches between best-selling and top-rated products. Follows your sales and reviews.
Shop by brands	Your WooCommerce brands. Tick Featured on a brand under Products › Brands to show it first.
Trending now	Categories ranked by items sold in the last 30 days, rebuilt once a day. It fills in once you have orders.
Recently viewed	Each shopper’s own recently viewed products.
Daily essentials	Products you’ve marked Featured (the star in Products › All Products).
Our blog posts	Your latest posts from Posts in WordPress.

Troubleshooting

Symptom	Likely cause	What to do
A section I switched on doesn’t appear	It’s left out of the storefront’s HOME_SECTIONS list, it has no content, or 5 minutes haven’t passed	Check its content; ask the storefront team about HOME_SECTIONS.
The built-in hero shows instead of my slider	The slider is off or has no slides	Switch it on and add at least one slide with a picture.
A slide disappeared after saving	It had no picture	Add the slide again with a picture.
Today’s Deals is missing	No sale ends today in the store’s time zone	Schedule a sale ending today.
The save was refused with “…is not an image in the Media Library. Nothing was saved.”	An image field points at something that isn’t an image	Pick an image file and save again.
A promo card or testimonial vanished	It had no heading and subheading (promo) or no name and review (testimonial)	Re-add it with that text filled in.

Next steps

Home page featuresWhat shoppers see on the home page.

Shop and product pagesThe shop banner and the product page settings.

Storefront configurationHOME_SECTIONS and the other deployment settings.

ProductsVideos, trust badges, swatches and brands.