> For the complete documentation index, see [llms.txt](https://guide.hypercape.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.hypercape.com/brand-mall-studio/storefront-mall/storefront-mall-how-to-use-simple.md).

# Storefront Mall How-to Use - simple

## Storefront Mall Quick Start Guide

This guide is based on the latest local UI. It is written for non-technical users who need to quickly understand the Storefront Mall editor, review one storefront, and publish it with confidence.

The brand name, product count, and public link shown in the screenshots are examples. Your actual screen may look slightly different depending on the selected brand and mall data, but the editing flow stays the same.

For a more detailed feature-by-feature manual, see the full How-to guide.

{% hint style="info" %}
We will continue adding more design options and storefront layouts so you can build a wider variety of shopping experiences in the future.
{% endhint %}

{% hint style="info" %}
This is a simplified guide, so the best way to understand Storefront Mall is to try each setting one by one as you build.
{% endhint %}

***

### Overall Flow

<figure><img src="/files/sHAlaxRxSPBZJ5N0TmLk" alt=""><figcaption></figcaption></figure>

Storefront Mall is edited from left to right using the four steps at the top of the editor.

| Step        | What you do here                                                                | What to check                                                        |
| ----------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| 1. Theme    | Choose the storefront version, theme, logo, and design tone.                    | The brand style feels right, and desktop/mobile previews look clean. |
| 2. Products | Add products, reorder them, and write short product notes.                      | Only sellable products are included, and key products appear first.  |
| 3. Sections | Turn homepage sections on/off and edit text, images, links, and product blocks. | Only needed sections are enabled, and all buttons/links work.        |
| 4. Publish  | Review the final state, open the public page, and publish.                      | The live storefront works correctly from the public link.            |

The top `Preview` button opens the customer-facing storefront preview. The `Save` button stores your current edits. Saving and publishing are different actions, so always confirm the public status in the final step.

***

### Step 1. Set the Theme

Theme controls the first impression of the storefront. In the latest UI, you can review `Storefront version`, the selected theme card, logo settings, design settings, and the live preview in one place.

<figure><img src="/files/fzowjGi96rBEKJxYzjjC" alt=""><figcaption></figcaption></figure>

#### What to do

1. Select `Theme` from the top step navigation.

<figure><img src="/files/hmmgtkgMdp4QtTBmRFHa" alt=""><figcaption></figcaption></figure>

2. Choose `Classic` or `Framed Mall` under `Storefront version`.

<figure><img src="/files/sbOlyCcjQyIlkKF3Xjhf" alt=""><figcaption></figcaption></figure>

3. Confirm that the selected theme card is correct.

<figure><img src="/files/KBiJjn6LmD8Nk2mnWaoe" alt=""><figcaption></figcaption></figure>

4. Set the text logo or image logo in `Brand logo`.

<figure><img src="/files/S2bUxGGl59ff600TUQok" alt=""><figcaption></figcaption></figure>

5. Adjust logo style, palette, background, typography, spacing, and button style in `Design settings`.

6. Check the right-side `Theme live preview`.

<figure><img src="/files/8V5V6F7pLszkxfO0RhQp" alt=""><figcaption></figcaption></figure>

7. Use `Open full preview` if you need a larger view.
8. Click `Save` when the theme looks ready.

#### Watch out for

* Make sure the logo is not too small, stretched, or cropped.
* Avoid backgrounds or decorative effects that distract from products.
* Check both `Desktop` and `Mobile`, not just one preview size.
* Changing the theme can make the same products and sections feel very different.

***

### Step 2. Add and Organize Products

Products is where you choose which products appear in the storefront and manage the order and display information for added items. The latest UI is split into `Catalog products` on the left and `Added to your storefront` on the right.

<figure><img src="/files/NGQNmTNlC717sicTJnbp" alt=""><figcaption></figcaption></figure>

#### How to read this screen

| Area                        | Meaning                                                            |
| --------------------------- | ------------------------------------------------------------------ |
| `Catalog products`          | Search and select products that can be added to the storefront.    |
| `All brands`                | Filter the catalog by brand.                                       |
| `Add all available results` | Add all currently available results from the active search/filter. |
| `Added to your storefront`  | Review and manage products already added to the storefront.        |
| `Save`                      | Save product additions, order changes, badges, and creator notes.  |

#### What to do

1. Search by product name or brand name in `Catalog products`.

<figure><img src="/files/4MCeyeoA5rqZleHX5CLM" alt=""><figcaption></figcaption></figure>

2. Add individual products with the `+` button.

<figure><img src="/files/oWhdN1qTmAFwIiMeVnLI" alt=""><figcaption></figcaption></figure>

3. Use `Add all available results` only when you really want to add the whole filtered result set.

<figure><img src="/files/TRka4aRYtQrpMzfR7D5g" alt=""><figcaption></figcaption></figure>

4. Check the product count in `Added to your storefront`.

<figure><img src="/files/IQKfMuYQsEtNvTTrm128" alt=""><figcaption></figcaption></figure>

5. Adjust product order so the most important products appear first.

<figure><img src="/files/XrXDkncWdfIARw0i07Bm" alt=""><figcaption></figcaption></figure>

6. Hide or remove products that should not be shown.

<figure><img src="/files/TtIy8SytWCUD6oZGiy5i" alt=""><figcaption></figcaption></figure>

7. Use `BADGE` for short labels like "best", "new", or "staff pick".

<figure><img src="/files/x3BC7AcC11xM2Mj3cxnQ" alt=""><figcaption></figcaption></figure>

8. Use `CREATOR NOTE` for a short recommendation or selling point.

<figure><img src="/files/yTEHfDma8ZM5uVwZZc1t" alt=""><figcaption></figcaption></figure>

9. If there are many products, use pagination to review the next pages.
10. Click `Save` when product selection and order are ready.

#### Watch out for

* Check any item marked `Price missing` before publishing.
* Do not place test products or not-ready products near the top.
* The first page of products strongly shapes the customer's first impression.
* Product-based sections will look better when Products is already organized.

***

### Step 3. Build the Homepage with Sections

Sections is where you build the actual storefront homepage. You can enable or disable sections, reorder them, and edit each selected section's text, images, links, product picks, and display options.

<figure><img src="/files/H3u6ghKmXhx2dxu2ozNw" alt=""><figcaption></figcaption></figure>

#### How to read this screen

| Area                            | Meaning                                                                          |
| ------------------------------- | -------------------------------------------------------------------------------- |
| Left `Sections` list            | Select sections, turn them on/off, and change their order.                       |
| Middle settings panel           | Edit the selected section through `Content`, `Blocks`, `Design`, and `Advanced`. |
| Right `Editing now` preview     | Quickly check only the section you are editing right now.                        |
| Right `Full storefront` preview | Check how the section feels inside the full customer-facing page.                |
| `Collapse sections`             | Hide the left section list to give more space to the preview.                    |
| `Preview focus`                 | Focus the workspace on preview review.                                           |

#### Common sections to review

| Section             | What to check                                                                 |
| ------------------- | ----------------------------------------------------------------------------- |
| `Announcement bar`  | Shipping, discount, or notice text is correct.                                |
| `Header`            | Logo, navigation, and links are accurate.                                     |
| `Main banner`       | Hero image, headline, and CTA are ready.                                      |
| `Contents strip`    | Shortcut links lead to the intended places.                                   |
| `Shop by keywords`  | Keyword tabs and connected products match.                                    |
| `Quote block`       | Brand or editorial copy feels natural.                                        |
| `Special feature`   | Motion or visual effects are not too distracting.                             |
| `Promo banner`      | Promotion text, image, and button link are correct.                           |
| `Real Reviews`      | Reviews and linked products match.                                            |
| `Featured Articles` | Article titles, links, and visibility are correct.                            |
| `Instagram feed`    | Images and links are appropriate.                                             |
| `Trust badges`      | Shipping, authenticity, payment, and support messages match the real policy.  |
| `Footer`            | Customer support, company info, social links, and copyright text are correct. |

#### What to do

1. Select a section from the left list.

<figure><img src="/files/ovihuoIvI3vkusL4BOzv" alt=""><figcaption></figcaption></figure>

2. Turn off sections that are not ready or not needed.

<figure><img src="/files/Cgb3hnoVuCXVDcSFJw5s" alt=""><figcaption></figcaption></figure>

3. Use the up/down controls to change section order.

<figure><img src="/files/i3TgUOu3IEUheZclLdjx" alt=""><figcaption></figcaption></figure>

4. Fill in the main text and links in `Content` first.

<figure><img src="/files/9ttMDAFj6ogiPwz0O1Hc" alt=""><figcaption></figcaption></figure>

5. Use `Blocks` for repeated cards, product groups, or visual items.

<figure><img src="/files/4gYngtHFYs7QGHMdF3f6" alt=""><figcaption></figcaption></figure>

6. Adjust colors, spacing, and display style in `Design`.

<figure><img src="/files/Nwd1pxNtiQNG21x3vaBD" alt=""><figcaption></figcaption></figure>

7. Check extra display conditions or detailed options in `Advanced`.

<figure><img src="/files/iSg8uXhFPcXrGBwYRqJm" alt=""><figcaption></figcaption></figure>

8. Use `Editing now` to review the section you just changed.

<figure><img src="/files/Z0IDjRj9PxSoSKABJmio" alt=""><figcaption></figcaption></figure>

9. Use `Full storefront` to check the full page flow.

<figure><img src="/files/RK9ezZYt6kT3GBmm4i6r" alt=""><figcaption></figcaption></figure>

10. Click `Save` when the homepage structure is ready.

#### Watch out for

* Do not publish with unfinished sections turned on.
* Empty or incorrect button links can break the customer journey.
* Keyword tabs without products may look like empty content.
* Footer information should not be left as placeholder text.

***

### Step 4. Preview, Review, and Publish

Publish is the final review step. If the storefront is already live, you may see `Visit Storefront` and `Unpublish`. If it is not live yet, you may see a `Publish` action instead.

<figure><img src="/files/RX7SzSUORb8fAmKH92NH" alt=""><figcaption></figcaption></figure>

#### What to do

1. Select `Publish` from the top step navigation.

<figure><img src="/files/uO7NVSVmErLaSuef6ZGJ" alt=""><figcaption></figcaption></figure>

2. Review `Theme`, `Version`, `Storefront name`, `Products`, `Sections`, and `Status`.

<figure><img src="/files/Y5a4CivJTiwrMXk9fmT8" alt=""><figcaption></figcaption></figure>

3. Confirm that `Share link` is the intended public URL.

<figure><img src="/files/iVpswYsv3hS4wTOzacp5" alt=""><figcaption></figcaption></figure>

4. Open the customer-facing page with the top `Preview` button or `Visit Storefront`.

<figure><img src="/files/7AZtmKyBo1carud9A1bw" alt=""><figcaption></figcaption></figure>

5. Click through header navigation, banner buttons, card links, and product detail links.
6. Check both desktop and mobile views.
7. If everything is ready, publish the storefront.
8. If the storefront is already live, use `Visit Storefront` to confirm the actual public page.

<figure><img src="/files/EqT34mcRvYKgERhCtflK" alt=""><figcaption></figcaption></figure>

#### Button meanings

| Button             | Meaning                                                                      |
| ------------------ | ---------------------------------------------------------------------------- |
| `Save`             | Saves the current edits. This does not automatically publish the storefront. |
| `Preview`          | Opens a customer-facing preview.                                             |
| `Publish`          | Makes the storefront available to visitors.                                  |
| `Visit Storefront` | Opens the already published storefront.                                      |
| `Unpublish`        | Takes a live storefront offline.                                             |

***

### 1-Minute Pre-Publish Checklist

* [ ] The logo looks correct on desktop and mobile.
* [ ] Only sellable products are included in Products.
* [ ] No price-missing, test, or not-ready products appear near the top.
* [ ] The main banner image is not cropped badly on mobile.
* [ ] Header navigation and banner buttons open the correct pages.
* [ ] Product cards open product detail pages.
* [ ] Unneeded sections are turned off.
* [ ] Reviews, Instagram links, and social links work.
* [ ] Footer customer support and company information are accurate.
* [ ] After publishing, the public link has been opened in a new window and checked.

***

### Remember This Flow

```
Set Theme
-> Add Products
-> Organize Sections
-> Review with Preview
-> Publish
```

You do not need to use every feature on the first pass. A good starting storefront only needs clear products, correct links, clean mobile layout, and no unfinished sections.