Design your sales page with the block editor

The block editor lets you change every page of your funnel: texts, images, colors, layout. A page is made of sections. Each section holds rows, and each row has one, two or three columns where you place blocks: heading, text, image, video, button, customer reviews, FAQ, offer, countdown, guarantee, and more.

1. In Funnels, click the card of your funnel.

2. On the Sales page step, click Edit. The editor opens. To open another page of the funnel later, like the checkout or the thank-you page, click it in the steps bar at the top of the editor.

   

3. In the Blocks tab of the left panel, click a block: it’s added below what you selected in the page. You can also drag it into the page: a purple line shows where it will land.

4. To change a text, click it in the page and type.

5. Click a section, a row or a block to open its settings in the right panel: background and spacing of a section, columns of a row, content and style of a block. Under Display, Hide on mobile or Hide on desktop hides a block on one kind of screen.

6. Click Page theme at the top.

7. Pick one of the Ready-made palettes, or set the colors, the Heading font, the Body font and the rounding of buttons below it. These settings apply to the whole page.

   

8. Click Mobile at the top to check how your page looks on a phone. Click Desktop to go back.

9. Click Save (or press Ctrl+S, Cmd+S on a Mac). Nothing changes on your live page until you save. Opening Overview or the page settings from the editor also saves your changes. Preview opens your page as it was last saved.

Tip

• The two arrows at the top undo and redo each change.
• To reorder whole sections, drag their lines in the Outline tab.
• In Mobile, dragging a section, or a block inside its row, only changes the order on phones. Back to the desktop order removes that mobile order. To move a block to another row or section, do it in Desktop.
• The price shown on the page always comes from the product attached to it: change it in the product’s settings (see Set a price or offer a product for free).

On the Free plan

On the Free plan, the block editor is available on funnels created with Start from scratch (3 at most). Other pages open read only.

To reuse your own sections, have the AI write a section or add your own code, see Reuse sections, write them with AI and add custom code.

Attach the product you sell

The product attached to your funnel (its main product) gives the page its price, and it’s what the buyer receives. Without it, the page shows no price and can’t take payments.

1. In Funnels, click the card of your funnel to open its overview.

2. In the Funnel settings column, Product sold shows the current product. Click Choose the product, or Change the product to replace it, then pick the product in your library.

Until a product is attached, a banner at the top of the overview says Not purchasable yet: no product to deliver is attached. Its Attach a product button opens the same library.

Add a video

Add a Video block, then choose in the right panel:

• Upload a video hosts your own file (MP4, MOV, WebM, MKV or AVI, 2 GB max per file), with no ads and no suggested videos. Keep the tab open during the upload. The video is then prepared for a few minutes and shows on your live page as soon as it’s ready.
• Paste a link works with YouTube, Vimeo, Loom or Wistia.

Choose from your uploaded videos reuses a video without uploading it again. Video storage covers all your videos, courses included: 1 GB on Free (720p max), 10 GB on Pro and 20 GB on Business (1080p on Pro and Business). Remove the video only takes it off the block. Deleting a video from your uploaded videos removes it from every page and lesson that uses it.

Move an older Advanced page to the block editor

Advanced pages made before the block editor open in their own, simpler editor.

1. Open the Advanced page from Funnels.

2. Click Open in the new editor in its toolbar. Shoplit creates an editable copy, with “(new editor)” at the end of its name and a Working copy banner at the top. Your live page doesn’t change and keeps selling.

3. Work on the copy, then click Save.

4. When it suits you, click Replace my live page in the Working copy banner. Your public page then shows the new version, with the same link, the same stats and the same products.

The copy keeps the structure and the texts of your page, with a look close to the original theme but not identical: check the preview before you replace. Only Advanced pages can be moved, not Classic pages. Changed your mind? Back to the previous version, in the top bar of the replaced page, restores the old version. The current version and any unsaved changes are then lost.

Related articles

• Reuse sections, write them with AI and add custom code
• Customize your checkout
• Publish your sales page and share your link