Storefront & Website Builder•Popular•Beginner

Visual No-Code Storefront Builder: Customizing Your Website

Build and edit your storefront with the visual page editor, then review the changes before publishing.

6 min read•Updated 2026-09-18

In This Guide

Customize hero banners, product grids, promotional carousels, and customer review sections without writing code.
Rearrange sections on your homepage using intuitive drag-and-drop controls.
Switch between desktop, tablet, and mobile preview viewports in real time.
Publish changes and check the live storefront to confirm they are visible.

Prerequisites

Before configuring this feature, confirm that your store meets the following requirements:

Active Storefront:Your store must be initialized with at least one active product to populate product grid sections.

conversora.io/admin/storefront-builder

Visual No-Code Storefront Builder: Customizing Your Website

Click to enlarge

Interface view for this workflow.

1. Adding & Reordering Storefront Sections

Your homepage is constructed from modular sections. You can add new sections, hide sections temporarily during off-seasons, and drag sections up or down to adjust your page layout.

To maximize sales conversion, place your most compelling promotional offer or best-selling product collection near the top of the page, directly beneath your main hero banner.

Open Visual Editor

From the admin menu, navigate to 'Website Builder' and click 'Visual Editor'.

Path:Admin Sidebar → Website Builder → Visual Editor

Add a Section

Click '+ Add Section' in the left sidebar and choose from the block library (e.g., 'Featured Collection Grid').

Path:Editor Sidebar → Add Section Modal → Select Block

Drag to Reorder

Click and hold the drag handle next to any section in the sidebar to move it up or down in the page order.

Path:Editor Sidebar → Drag Handle (⋮⋮) → Reposition

Publish Changes

Select 'Save & Publish', then open the live storefront to confirm the changes are visible.

Path:Editor Header → Save & Publish

2. Customizing Hero Banners & Call-to-Action Buttons

The Hero Banner is the first visual element visitors see when landing on your store. High-impact photography combined with clear headline copy and a prominent Call-to-Action (CTA) button drives immediate engagement.

You can upload high-resolution desktop and mobile-specific banner images, enter compelling headline text, and link the button directly to any category, product, or custom landing page.

Select Hero Section

In the editor canvas or sidebar list, click on the 'Hero Banner' section to open its settings drawer.

Path:Visual Canvas → Click Hero Banner

Upload Banner Graphics

Upload your promotional image (recommended: 1920x800px for desktop, 800x800px for mobile).

Path:Banner Settings Drawer → Image Uploader

Set Headline & Button Link

Enter your promotional headline and specify your button text (e.g. 'Shop Summer Collection') and target URL.

Path:Banner Settings Drawer → Content & CTA Link

Practical Business Scenarios

How leading merchants implement this functionality in daily operations:

Seasonal Festival Campaign Launch

Situation: A merchant wants to update their homepage for Eid or Black Friday with a dark promotional banner and a 3-day countdown timer.

Best practice: Open the Visual Editor, add an Announcement Bar and Countdown Timer section, upload festive hero graphics, and link the CTA button to a curated 'Sale' collection.

Troubleshooting & Common Issues

Diagnose and resolve frequent failure points quickly:

Problem: Banner image appears blurry or stretched on mobile screens

Why this occurs: A single wide desktop landscape image was uploaded without providing a dedicated square or vertical mobile image.

Resolution: In the Hero Banner settings, use the 'Mobile Image Override' option to upload a square (1:1) image specifically optimized for mobile phone viewports.

Frequently Asked Questions

Does changing my homepage layout cause downtime for visitors?

Changes may remain in draft until you publish. After publishing, open the live storefront and check the result. Publishing time and availability depend on the deployment and cache state.