Storefront – Customize the Homepage

You can set up and customize the Storefront homepage layout using the WordPress Customizer or the Block Editor.

Here are the step-by-step instructions to set up and customize your layout:

1. Set Up a Dedicated Homepage Page

  1. In your WordPress sidebar, go to Pages > Add New Page.
  2. Name the page Home (or Homepage).
  3. In the right panel under Page Attributes, change the Template dropdown to Homepage.
  4. Click Publish.

Verification: The page status will change to “Published” with the Storefront Homepage template assigned.

2. Assign the Page as Your Static Front Page

  1. Navigate to Settings > Reading in the left menu.
  2. Under Your homepage displays, select A static page.
  3. Set the Homepage dropdown to your newly created Home page.
  4. Click Save Changes.

Verification: Visit your root domain URL; you should now see the Storefront structured homepage layout instead of your recent blog posts.

3. Customize Colors, Header, and Layout via Customizer

  1. Go to Appearance > Customize.
  2. Use the following key panels to adjust the styling:
    • Header: Upload your logo, set header background colors, and adjust search bar positioning.
    • Typography: Select heading and body font colors.
    • Buttons: Adjust background and text colors for store call-to-action buttons.
    • Layout: Choose whether sidebar widgets appear on the right or left across standard pages.
  3. Click Publish at the top of the Customizer panel to save your visual changes.

Verification: The live preview pane in the Customizer will update immediately to reflect your design choices.

4. Rearrange or Toggle Homepage Sections

  1. Inside Appearance > Customize, click on Homepage.
  2. Toggle or adjust the display for built-in sections like Product Categories, Recent Products, Featured Products, Top Rated Products, and On Sale Products.
  3. If you want full control over section order and content, edit the Home page directly under Pages > All Pages using WooCommerce Gutenberg blocks (e.g., Hand-picked Products, Featured Category).

Verification: Check your live front page to verify that product grids and categories display in your chosen layout order.