Using the Landing Page editor

Before you start

• Save your Quick Action first: Build a landing page only after you've saved the Quick Action it belongs to. Set up the action, save it, then open the builder.

• Save often: The builder doesn't autosave, and closing it won't prompt you to save. Any unsaved changes are lost when you exit.

• Customer Portal v3: The landing page builder uses your Customer Portal v3 theme and components.

• Existing links keep working: Custom landing pages are optional. Quick Action links you've already sent keep working without any changes.

What is the Quick Actions landing page builder?

The landing page builder is a drag-and-drop editor for the page subscribers see when they open a Quick Action link. You can add headings, copy, images, and brand colors so the page explains your offer and matches your store, instead of showing a generic confirmation screen.

A page that clearly explains a swap, discount, or reactivation offer gives subscribers more reason to confirm, which helps your Quick Action conversion rate.

The builder has three panels:

• Layout blocks: The left panel lists the blocks you can add to your page.

• Canvas: The center panel is a live preview of your landing page. Placeholder values like {{ first_name }} fill in with each subscriber's details when they open the link.

• Properties: The right panel shows settings for the block you've selected. When no block is selected, it shows page-level settings like background color.

How do I build a custom landing page for a Quick Action?

Open a saved Quick Action, choose whether to start from the default layout or a template, then add and customize blocks in the builder.

Step 1: Navigate to Quick Actions

1. In the left-hand menu of your Skio Dashboard, go to Grow > Quick Actions.

2. Open the saved Quick Action you want to customize.

If you haven't saved the Quick Action yet, save it before you open the builder.

Step 2: Choose a starting point

1. Scroll down to the Landing page section.

2. Select how you want to start:

   • Build from scratch: Opens the builder with the default Quick Action layout already on the canvas, so you never start from a blank page.

   • Start from a template: Applies a copy of a saved template to this link. You can keep customizing the page afterward without changing the template.

3. Click Open builder.

Step 3: Add and arrange blocks

1. Drag a block from Layout blocks onto the canvas and drop it where you want it.

2. Click a block on the canvas to select it. A toolbar appears on the block with move up, move down, and delete buttons.

3. Use the arrows or drag the block to reorder it. Click the trash icon to remove it.

Every landing page includes a confirmation button that subscribers click to complete the action. It's added automatically and can't be removed.

Step 4: Customize each block

Click any block on the canvas to open its settings in the Properties panel. Changes show on the canvas right away. See Landing page blocks and settings below for what each block can do.

Step 5: Set the page background and accent color

With no block selected, the Properties panel shows page-level settings. By default, these match your Customer Portal v3 theme. Changes you make here only affect this landing page, not your Customer Portal.

• Page background: Choose Solid color or Gradient, then pick your colors.

• Accent color: Sets the highlight color used across the page.

Step 6: Preview and save

1. Use the device selector next to Save as template to check how the page looks on desktop and mobile.

2. Click Save.

Closing the builder doesn't prompt you to save. Click Save before you exit, and save regularly while you work.

Landing page blocks and settings

Each block has its own settings in the Properties panel. Select a block on the canvas to edit it.

Actions list

The Actions list block shows the steps the Quick Action will perform, like reactivating a subscription and applying a discount code. The actions themselves come from your Quick Action's configuration, so you change them on the Quick Action, not in this block.

Optionally, enable the Hide non-interactive actions toggle so that only actions that ask the customer for a choice are visible. Hidden actions  will still run, and if there are no visible actions this block will not be visible.

Columns

The Columns block splits a row into two side-by-side columns. Drag other blocks into each column. Two columns is the maximum.

• Invert stacking on mobile: On small screens, columns stack vertically. Turn this on to show the right column above the left one.

Divider

The Divider block adds a horizontal line to separate sections.

• Strength: Line thickness in pixels.

• Divider color: The color of the line.

Heading

The Heading block adds a large title, like a headline for your offer.

• Text: Enter the heading text. Click + to insert a dynamic variable.

• Text size: Font size in pixels.

• Text color: The color of the heading text.

Image

The Image block adds a product photo, banner, or other brand image.

• Image: Click to upload or drag and drop an SVG, PNG, JPG, or GIF file up to 10 MB.

• Image URL: Paste a hosted image URL that starts with https:// instead of uploading a file.

• Alt text: A short description of the image for screen readers.

• Width: Image width as a percentage of the available space.

• Border radius: Rounds the image corners, in pixels.

• Alignment: Align the image Left, Center, or Right.

• Link: A URL that opens when a subscriber clicks the image. It must start with https://.

Rich text

The Rich Text block adds body copy, like the details of your offer.

• Formatting toolbar: Apply bold, italic, underline, bulleted lists, and links. Click + to insert a dynamic variable.

Spacer

The Spacer block adds empty vertical space between blocks.

• Height: The amount of space, in pixels.

Subscription details

The Subs. details block shows the subscription the Quick Action will change, including the products, shipping interval, next order date, applied discount, and price. On the canvas, it appears as Impacted subscription.

• Title: The text shown above the subscription card. Leave it blank to hide the title.

• Force compact view: Shows a condensed version of the card with product thumbnails and the price on one line. Compact view is used automatically on mobile and when the block is inside a column.

How do landing page templates work?

Templates let you save a landing page layout and reuse it on future Quick Action links, so you don't have to rebuild the same design each time.

• Save a template: In the builder, click Save as template, enter a Template name, and click Save. Templates save your page's layout, styling, block settings, and text, so you can reuse them on other Quick Action links.

• Use a template: On a newly saved Quick Action, select Start from a template in the Landing page section, then choose your template.

• Switch templates in the builder: Click Change template at the top of the builder, then search for or select a template. Select Default layout to go back to the standard Quick Action layout.

• Customize without changing the template: Each link gets its own copy. Edits you make on that link's page don't change the template.

• Editing a template: Changes to a template only apply to new landing pages that use it. Pages that already use it stay the same.

If you run the same type of offer often, like a reactivation discount, save your finished page as a template. It keeps your branding consistent across links and saves setup time.