Design your storefront

Who is this article for?

• Gegsy merchants on the Pro and Premium plans who want to build and customize their public storefront — the pages customers see at your domain.

About the Designer

The Designer is the visual builder for your storefront. You add and arrange pages, drop in sections (also called widgets) like a hero banner, text, galleries, or a location card, set a site-wide theme, and publish when you're ready. Everything updates in a live preview as you work, so what you see is what your customers get.

Open it from Storefront → Designer (https://app.gegsy.com/storefront/designer).

Before you begin

• Available on the Pro and Premium plans. See gegsy.com/pricing for what each plan includes.
• Access is controlled by the Designer permission. Account owners have it by default and can grant it to employees.
• Some content, like address, phone, and hours on a Location Card, is pulled from Square — so connect Square and set up your locations first.

Find your way around the Designer

The Designer fills the screen with three areas:

• Toolbar (top). The back arrow returns you to your dashboard. Next to the title is the Site Design (palette) button for your theme. In the center, switch the preview between Desktop, Tablet, and Mobile. On the right is your save status, plus Save Draft and Publish.
• Left panel. Your page picker, the list of sections on the current page, page actions, and the editors that slide in when you add or edit something.
• Live preview (right). A real-time render of the page you're editing. Click any section in the preview to select and edit it.

Work with pages

Use the page picker at the top of the left panel to switch between pages, add new ones, and manage the current page.

• Add a page. Choose Add a Page, then start from a Blank Page or a template such as About Us, Locations, Blog, or Contact. Give it a Page Title and a URL slug, then Create Page.
• Switch pages. Pick another page from the list. If you have unsaved changes, the Designer saves them before switching.
• Page settings. With a page open, choose View page settings to open the settings dialog (covered below).
• Duplicate a page. Use Duplicate in the page actions row to copy the current page and its sections.
• Delete a page. Use Delete to remove the current page. You'll get a confirmation: "Are you sure you want to delete [page]? All sections and content will be permanently removed." Your Home and Locations pages can't be deleted.

When you rename a page's URL, the Designer automatically updates links that pointed to the old URL — in your navigation, buttons, and rich-text links — so they keep working.

Choose your homepage

A storefront can lead with either a designed Home page or your Order Page. The page picker includes a Use Order Page as homepage option. When it's on, visitors who open your storefront at / land on the Order Page, and your Home page goes dormant (it isn't shown to customers). To switch back: open the page picker, uncheck Use Order Page as homepage, confirm, then publish.

Page settings

Open View page settings to manage a single page across three tabs:

• General — the Page name and the Page URL (slug). This is also where you set Page visibility (Visible on your site or Hidden (offline)) and Password protection (Visible to public or Password protected, with a Page password). Hidden pages return a not-found error and are excluded from your sitemap, and existing links to them stop working.
• SEO — the SEO site title and SEO site description search engines show, plus Search visibility (Visible to search engines or Hidden from search engine results). You can fill these in yourself or use Generate with AI.
• Social — control how the page looks when shared, using Social page title and Social page description. Leave Same as SEO page title / Same as SEO page description checked to reuse your SEO copy.

To put a page in your storefront menu, add it to your Header or Footer navigation (the page name alone doesn't add it to the menu).

Add and arrange sections

The section list on the left shows every section on the current page, top to bottom, in the order customers see them.

1. Choose Add a section to open the section picker.
2. Pick a section type — for example Main Banner, Text, Text and Image, Image Gallery, Video, About, Location Card, Featured Items, Blog Posts, Contact Form, FAQ, Service Options, Testimonials, or Spacer. The new section is added to the page and opens for editing.
3. Reorder sections by dragging them in the list.
4. Edit a section by clicking it (in the list or the preview); its editor slides in with Content and Customize options.
5. Duplicate, Show section / Hide section, or Delete a section from its row controls.

Banner-style sections (the hero/main banner) can be toggled visible or hidden without deleting them, so you can take a section offline and bring it back later.

Some section types are available only on higher plans. On lower plans, those sections are hidden from the preview but your content is preserved, so it reappears if you upgrade.

Set your theme with Site Design

Click the Site Design (palette) button in the toolbar to open the theme panel. These settings apply across your whole storefront:

• Fonts — choose a font pairing; the heading font is used for titles and the body font for paragraphs.
• Colors — pick a preset or set custom colors for Primary, Secondary, Accent, Link, Background, and Text. You can save a palette with Save as New and reuse it later from Saved Palettes.
• Text Size — set the overall text scale.
• Buttons — choose the button shape: Rounded, Soft, or Square.

New sections you add pick up your active palette automatically.

Save, preview, and publish

• The Designer auto-saves your draft as you work, and you can save at any time with Save Draft. The toolbar shows Saving…, the last saved time, or Unsaved changes.
• Use the Desktop, Tablet, and Mobile buttons to preview how each page looks on different screens before you ship.
• When you're ready for customers to see your changes, choose Publish. Publishing saves the current draft first, then makes it live.

After you've designed your pages, you can connect a custom web address from Storefront → Custom Domain — see Link your domain to your Gegsy storefront.