# How to set up your home page: hero, sliders and product grids

Open **Online Store → Theme Settings** on the **Home** page and build it from **Hero**, **Slider**, **Product List** and **Categories** blocks. Product List decides which products appear (newest, trending, exclusive, a category or a custom pick).

## Steps

1. Open **Online Store → Theme Settings**; the page selector should show **Home**.
2. **Hero** — from **Pre-made sections** (layout icon) drop a **Hero** (3 designs). It has no settings of its own: click its heading, paragraph, button and image children to edit them.
3. **Slider** — from **Add Blocks** add a **Slider** (6 designs). Per slide set **Desktop image** and **Mobile image**, title and description, and the call to action (**Button text**, **Button URL**, **Open in new tab**, colours). Turn on **Auto Slide** and set **Delay** in milliseconds (1000 or more recommended). Some designs add **Number of items in grid / mobile / Tablet**, **Speed** and **Direction**.
4. **Product grid** — add a **Product List** (11 designs). In **Settings** choose the **Type**: **Newest**, **Trendings**, **Exclusive** (products marked as exclusive offer), **Category** (then **Select category**) or **Custom**. Set **Products number** (default 4; around 12 works well) and the toggles: **Show Add to Cart Button**, **Show Wishlist Button**, **Show Product Category**, **Show Product Ratings** (+ **Rating Color**), **Show Compare Price**, **Show Discount**, **Show notification on success**, **Apply image hover animation**. Some designs add a **Badge** card and per-device grid counts.
5. **Categories** — add a **Categories** block (7 designs) and set **Categories number** (default 4); one design also has card colours and a **Button text** (default "Discover").
6. Reorder sections with the toolbar arrows or in **Design Layers**, click **Save**, and keep the page **Published**.

## Common problems

- The grid shows the wrong products → change **Type**; for a hand-picked set use **Custom**, for one collection use **Category**.
- The Exclusive grid is empty → mark products with **Mark as exclusive offer** in **Products → Manage Products**.
- Only 4 products appear → raise **Products number**.
- The slider image is cropped on phones → upload a separate **Mobile image** per slide.
- Too many cards per row on mobile → on designs that offer **Number of items in grid / mobile / Tablet**, lower the mobile value in the block's **Settings**.

## Related
- [Add an image slider or promo banner](https://help.dropify.shop/en/guides/add-an-image-slider-or-banner/)
- [How to add badges or small icons under the product title or price](https://help.dropify.shop/en/guides/add-badges-or-flags-under-the-product-title-or-price/)
- [Edit the mobile and tablet layout separately](https://help.dropify.shop/en/guides/edit-mobile-and-tablet-layout/)
- [How to change your store's theme and edit its sections](https://help.dropify.shop/en/store_theme/change-your-store-theme-and-sections/)