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 the address and phone on a Location Card, is pulled from Square — so connect Square and set up your locations first. Hours follow each location's pickup and delivery hours from your Locations settings.

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, Scrolling Text, About, Location Card, Featured Items, Blog Posts, Contact Form, FAQ, Service Options, Testimonials, Custom HTML, 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.

Each section's editor also gives you fine-grained layout control:

• Spacing — set the section's Padding and Margin per side (Top, Right, Bottom, Left), with independent values for Desktop and Mobile. Leave a field blank to use the theme default.
• Content width — how wide the section's content sits, up to Full width.
• Anchor link — give the section a # anchor (for example, our-menu) so you can link straight to it from nav links or buttons using #your-anchor.

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.

Show your locations

The Location Card section shows a location's map, address, phone, hours, and an order button. In its editor:

• Show All Locations — display every active location, laid out Stacked or as a Slider customers can swipe through. Turn it off to feature a single Location instead.
• Heading Override — replace the default heading (Our Locations, or the location's name for a single location).
• Visibility — toggle Show Map (with a Map Zoom (1–20) control), Show Hours, Show Phone, and Show Order Button. The order button's Button Text and colors are yours to set, and it links to the order page for each location automatically.

The address and phone come from Square. Hours follow each location's pickup and delivery hours from your Locations settings — your Square business hours when the location is set to match Square, or the custom hours you've set in Gegsy otherwise. If a location's pickup and delivery hours differ, the card shows a Pickup / Delivery toggle so customers can check both, and an Open now / Closed badge reflects the location's current status in its own time zone, with today's hours highlighted.

Embed your own HTML

The Custom HTML section lets you paste your own HTML for anything the built-in sections don't cover. Open the section and add your markup in the HTML field, or choose Expand to edit it in a larger window. For safety, Gegsy sanitizes what you enter every time the page loads: formatting, images, links, and tables are allowed, while scripts, iframes, and event handlers are removed. If something you pasted doesn't appear on your storefront, it was most likely stripped for security. Like other sections, you can set its background color and spacing (padding and margin), and show or hide it without deleting it.

Need a picture in your markup? Use the section's Images helper: Upload a new image or pick one from your Library, then add its alt text (or mark it decorative) — required here just like everywhere else in the designer. Once it's described, use Copy URL to copy the image's hosted address for your HTML (or anywhere else you need it), or use the insert button to drop a ready-made image tag into the HTML field. Uploads are saved to your media library, so you can always find them again from the Media page.

Format text with the rich-text editor

Text-based sections — such as Text, Text and Image, About, and FAQ answers — use a rich-text editor with a toolbar grouped into Text, Format, Lists, Align, and Insert:

• Text — set the Text style (Normal, Small, or Heading 1–3), pick a Font, and choose a Font size. Font size defaults to Auto (which follows your theme); pick a specific size only when you want to override it. The Font menu appears when your theme has more than one font, so you can apply your heading or body font to a specific piece of text.
• Format — Bold, Italic, Underline, and Text color (with a Reset color option).
• Lists — Bullet List and Ordered List.
• Align — Align Left, Align Center, and Align Right.
• Insert — add a Link (choose a Page on your site or a Custom URL, and optionally open it in a new tab), Insert image, or a Divider. Inserted images can be resized by dragging their corner handles.

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, organized into tabs:

• Fonts — choose a font pairing; the heading font is used for titles and the body font for paragraphs. This tab also holds the Letter Spacing presets.
• Logo — upload a Storefront logo shown on your storefront site. If you leave it blank, your mobile-app logo is used as a fallback. Once you've added one, use Remove to clear it.
• 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.