K
Zansify
Merchant Guide

Customizing Your Storefront

Use the page builder to design your store homepage without writing any code.

What Is the Page Builder?

The Page Builder is a visual editor that lets you design your store's homepage by adding, arranging, and configuring content blocks — no design skills or coding required. Think of it like building with LEGO bricks: each block is a pre-built section of your page, and you simply stack them in the order that tells your store's story best.

To open the page builder, go to Storefront → Page Builder in your dashboard sidebar.

Every change you make in the page builder is a preview — nothing goes live until you click Publish. Feel free to experiment.

Types of Content Blocks

Each block serves a specific purpose. Here's a quick reference:

| Block type | What it does | Best used for | |---|---|---| | Hero Banner | A large full-width image with a headline and button | First impression, announcing a sale, seasonal promotions | | Product Grid | Displays a selection of products in a grid layout | Featuring best sellers or new arrivals | | Collections | Shows your product collections as visual tiles | Helping customers browse by category | | Call to Action (CTA) | A short message with a prominent button | Newsletter signups, driving to a sale page, special offers | | Rich Text | A block of formatted text | Your brand story, return policy highlights, a welcome message | | Spacer | Adds breathing room between sections | Improving visual layout and readability |

Adding a Block

  1. In the page builder, click the Add Block button (the + icon) between any two existing sections, or at the bottom of the page.
  2. Choose a block type from the panel that appears.
  3. The block is added to your page and its settings open automatically on the right side.
  4. Fill in the content — headline text, images, button labels, which products or collections to show.
  5. Click anywhere outside the settings panel to close it.

Reordering Blocks

To change the order of your page sections:

  • Hover over any block to reveal the drag handle (six dots icon) on the left edge.
  • Click and drag it up or down to reposition it.
  • Release when it's where you want it.

The order you set here is exactly how customers will see your homepage.

Removing a Block

Hover over a block and click the trash icon that appears in the top right corner of that block. You'll be asked to confirm before it's deleted. Removed blocks cannot be undone, so be sure before deleting.

Saving and Publishing

Your changes are automatically saved as a draft as you work — you won't lose anything if you close the tab or log out.

When you're ready for customers to see your new layout:

  1. Click the Publish button in the top right corner of the page builder.
  2. Your homepage goes live immediately.

If you want to make more changes later, the publish flow is the same — edit, then publish again.

Previewing on Mobile

More than half of online shoppers browse on their phones. Before you publish, always check how your homepage looks on a small screen.

Click the mobile icon in the page builder toolbar to switch to the mobile preview. This shows you exactly how the page will appear on a smartphone. Things to watch for:

  • Is the hero banner text readable on small screens?
  • Are the product grid images too small or too large?
  • Does the call-to-action button stand out?

If something looks off in mobile view, adjust the block settings (many blocks let you set separate text sizes or image crops for mobile).

Changing Theme Colors and Fonts

Your page builder blocks automatically use your store's brand colors and fonts — you don't need to set colors on each block individually.

To change your overall theme:

  1. Go to Settings → Appearance.
  2. Choose your primary color (used for buttons, highlights, and links).
  3. Choose your font from the available options.
  4. Click Save.

Your entire storefront — including all page builder blocks — will update to reflect the new style automatically.

Tips for a Great Homepage

  • Lead with your best content. Put the hero banner first with a clear headline that tells visitors exactly what you sell and why they should care.
  • Feature 4–8 products in your product grid. Too many choices overwhelm customers; too few make the store look empty.
  • Use real photos in your hero banner. A high-quality lifestyle photo of your product in use performs much better than a plain white background.
  • Keep your CTA simple. One clear action per section — "Shop the Sale", "Browse Collections", "Get 10% Off". Don't ask visitors to do too many things at once.
  • Update your homepage regularly. Swap in seasonal banners, promote new arrivals, and highlight current sales to give repeat visitors a reason to explore.

What's Next?

Edit this page on GitHub →← Back to docs