> ## Documentation Index
> Fetch the complete documentation index at: https://help.payam.africa/llms.txt
> Use this file to discover all available pages before exploring further.

# Design and publish your storefront theme

> Choose a theme, edit sections and styles, preview each screen, and publish your changes.

Open **Online store → Theme**. If the Theme entry is unavailable for your store, use **Online store → Store front** and **Customize storefront** for the controls shown in your dashboard.

## Choose a theme

1. Open the **Theme** tab in the editor.
2. Browse the theme gallery and preview a design before selecting it.
3. Choose **Use theme** for the design you want. Your store content is kept while the draft changes to the selected theme.
4. Review the draft on each screen. Changing the draft does not change the live storefront until you publish.

## Edit page sections

1. Use the screen selector to switch between **Homepage**, **Product page**, **Collection**, and **Pages**.
2. Open **Sections** to select an existing section, adjust its content and settings, or add another section where the editor offers that action.
3. Reorder or hide sections to change the page structure. Select a section in the preview to jump to its controls.
4. Check shared areas such as the announcement bar, popup, and footer, as well as page-specific sections. Available sections and controls depend on the theme and selected screen.

You can use sections for a hero, product grid, category explorer, text or image content, FAQ, contact information, and calls to action when those section types are available in your theme. Product and collection screens also have their own layout controls.

## Set the visual style

In the **Theme** tab, review typography, colors, buttons, layout, and product-card styling. Make a small change, then check the preview on **Desktop**, **Tablet**, and **Mobile**. Readability, cropped images, button contrast, and product cards are especially worth checking at mobile width.

## Save, preview, and publish

The editor saves your draft as you work and shows its save status. Wait for **Saved** before leaving the page. Use **Save** if the editor presents it, and resolve any save error or conflict before publishing. **Preview** opens the draft for a full-page check. **Publish** makes the draft visible to shoppers; the editor asks you to confirm. **Discard** returns the draft to the current live design.

After publishing, open the public storefront in a separate browser window and check a product, a collection, and a regular page. If you have never published a theme, shoppers continue to see the existing storefront until the first publish.

For branding, domain, search, and the WhatsApp button, see [Storefront settings](https://help.payam.africa/merchants/storefront-settings.md). For navigation and additional pages, see [Menus and pages](https://help.payam.africa/merchants/storefront-menus-pages.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.