Overview
Your landing page is a focused, standalone page you can build to support marketing campaigns and lead generation efforts, such as promoting a new product launch, driving newsletter signups, or capturing leads for a specific offer.
AfterShip Page Builder lets you design and publish a custom landing page for your Shopify store without any coding. You can start with a template or a blank page, add content sections, and style the page to match your brand.
This article explains how to create a landing page, describes each available section and element, and covers the page settings you need to configure before publishing.
Prerequisites
Your Shopify store must be connected to AfterShip Page Builder. If you haven't connected your store yet, refer to this help article.
Before you start, it helps to understand how a page is structured:
Sections are the building blocks of your page. Each section is a horizontal block of content, such as an intro, an image gallery, or a product list. You stack sections vertically to form the page layout.
Elements are the individual components inside a section, such as a title, description, image, or button. You can add, edit, or remove elements within any section.
In short, sections define the structure of your page, while elements define the content inside each section.
Create a landing page
Go to Pages > Custom pages in your AfterShip Page Builder account.
Choose whether to start with a template or a blank page.
a. If Create from scratch is selected, you will be directed to the page editor directly to start constructing and customizing your page.
b. If Select a template is selected, click Landing page from the side panel. Select a template and click Create.
Note:
In the new editor, you can edit the page content directly from the preview panel.
In the old editor, you add blocks (+Add section) from a list to define your page content.
Configure the page settings
1. Page info
Field | Description |
Page name | Enter a name for your page (up to 50 characters). This is for your reference only and isn't shown to customers. |
Page URL | Enter your own URL slug after the pages/ prefix (up to 50 characters). Customers see this page when they tap on the content it's linked from. For example, a campaign link, banner, or menu item. |
2. SEO settings
Unlike product and collection pages, landing pages aren't tied to an existing product or collection, so their SEO settings are configured directly in Page Builder:
Field | Description |
Search results preview | Shows how your page's title, URL, and description will appear in search engine results. |
Page title | Enter a title for search engines to display (up to 70 characters). |
Meta description | Enter a description for search engines to display (up to 320 characters). |
3. Header and footer
Select Show or Hide to control whether your store's header and footer appear on the page.
4. AfterShip branding
To remove the "Powered by AfterShip" branding for free, click Contact support to verify your store.
Configure the style settings
Switch to the Styles tab in the left panel to define the overall look of your page.
Font: Choose a font for your page (for example, Open Sans).
Colors: Customize the colors for different page elements:
Page: Background color
Text: Title and description colors
Button: Button text and button background colors
Add and manage sections
Sections are the horizontal content blocks that make up your page. Since a landing page is fully custom, it doesn't include a locked, theme-driven default section the way product and collection pages do, every section on the page is one you add and edit yourself in Page Builder.
Add a new section
To add a new section, hover between existing sections and click +Add section.
This opens the Section library, where you can choose from different section types:
My sections: Displays the sections you've saved as reusable templates. If you haven't saved any sections yet, you'll see the message "No sections found. Your saved sections will be displayed here." To save a section, hover over it in the editor and click the save (download) icon.
Add a blank section: Adds an empty section to your page so you can build it from scratch by adding your own elements, such as titles, images, and buttons.
Intro: Pre-designed introduction layouts that combine images, headings, descriptions, and buttons. Ideal for opening your page with a brand story or a featured message.
Images: Image-focused layouts for visually showcasing your brand, products, or lifestyle photography.
Recommended dimensions: 1,040(w) x 300(h) pixels.
Maximum file size: 2 MB
Supported formats: .jpg, .jpeg, .gif, and .png
You can also set the image width and add a destination URL.
You can add an Alt text to briefly describe the image to improve SEO rankings and accessibility for visually impaired customers.
Product list: Layouts for displaying multiple products at once, useful for promoting related or complementary items.
Assign products: Choose which products to display:
Particular products: You can select up to 20 items.
Specific product collection: Up to 50 products are shown.
Best-selling products: Up to 20 items are shown. Products sold in the last 30 days are considered best-selling. If a visitor has already purchased one of your best-selling items, they see other top-selling products instead. If you haven't sold anything in the last 30 days, random products are recommended.
Layout: Specify the number of columns for displaying products.
Note: This setting applies to desktop only. The mobile version always displays 2 columns to ensure a pleasing mobile experience.
Content: Select the checkboxes to choose which product details to display. You can also add an action button and configure it:
Button type: Select the type of CTA button you want to display. You can:
Allow customers to directly add products to the cart when they click the button.
Redirect them to the product detail page when they click the button.
Allow them to proceed to checkout (Shopify dynamic checkout button), directly from a product page to pay for that product.
Button action: Define how the CTA will be treated. You can make customers "Stay on the same page" or "Go to cart page." This is only applicable when the "Add to cart" button type is selected.
Text: Add a label that appears on a button, the words visitors actually read on it, such as "Explore," "Shop Now," or "Subscribe."
Product variant picker type: Shown only when product variants are available.
Text: Enter the content for the Header and Description fields of the product list section.
Color: Set the colors for the sale price and comparison price.
Product details: Layouts for highlighting a single product with its details.
Use this block to feature individual products on your page. Only active and in-stock products will appear in your storefront.
With the Product detail block, you can select whether you want visitors to add products directly to their cart and/or skip the cart and complete their payment with the checkout method displayed on the button.
You can change how the section looks and what product information to display for each product.
You can change the colors of the discounted price and the actual product price to match your store's theme.
You can add this block up to 20 times per page.
Note: This block disappears from your page if you mark the chosen product as 'Inactive.'
About: Layouts designed for sharing your brand story or introducing your team.
Custom section: Lets you create your own section tailored to your needs. To access a Custom section, you would first need to submit a request explaining what features you want.
Configure the section layout
Click any section on your page to open the Section settings panel, where you can adjust its layout and background.
Layout
Top and bottom padding: Choose the padding size (for example, Small). Selecting "None" also removes the padding on the left and right.
Content width: Set the width of the content (for example, Large). This option is only available on desktop.
Content vertical alignment: Align the content to the top, middle, or bottom.
Background
Background image: Upload separate background images for desktop and mobile. The suggested dimensions are 1040(w) x 300(h) pixels, with a maximum file size of 2 MB. Accepted formats are JPG/JPEG, GIF, and PNG.
Overlay opacity: Adjust the opacity of the overlay on your background image.
Image width: Choose how the image displays (for example, Full bleed).
Color
Background: Set a background color for the section. Click Reset to restore the default.
Additional actions
When you hover over a section, a toolbar appears in the top-right corner with the following icons:
Icon | Action |
Move up (↑) | Move the section one position up on the page. The arrow is grayed out if the section is already at the top. |
Move down (↓) | Move the section one position down on the page. |
Duplicate | Create a copy of the section, including all its elements and settings. The copy appears directly below the original. |
Delete (trash icon) | Remove the section and all its elements from the page. |
Save section (download icon) | Save the section as a reusable template. You can find your saved sections under My sections in the Section library and add them to other pages. |
Add and manage elements within sections
Elements are the individual components that live inside a section. To add an element, click Add elements within a section, then choose from the available options:
Title: Adds a heading to your section. Use it for section names, product highlights, or key messages you want to stand out.
Description: Adds body text below or alongside other elements. Use it for detailed information, such as product descriptions or supporting copy.
Image: Inserts an image into the section. Use it to showcase products, lifestyle photos, or brand visuals.
Button: Adds a clickable button with customizable text, destination URL, alignment, and colors. Use it to drive actions like "Shop Now" or "Learn More."
Spacer: Adds vertical spacing between elements to improve readability and give your layout breathing room.
Line: Inserts a horizontal divider line to visually separate content within a section.
Email signup form: Adds a subscription form so visitors can share their email addresses. Use it to grow your subscriber list and support email marketing — a useful element for capturing leads on this page type.
Social links: Adds social media buttons that link to your brand's profiles on platforms like Facebook, Instagram, and Twitter.
Accordion: Adds collapsible content blocks that expand when clicked. Ideal for FAQs, sizing guides, or any content you want to keep compact.
Contact form: Adds a form that lets visitors send you inquiries directly from the page.
Video: Embeds a video in the section. Use it for product demos, brand stories, or tutorials.
Countdown timer: Displays a ticking timer to create urgency for sales, product launches, or limited-time offers.
Custom code: Lets you add your own HTML or code for advanced customizations beyond the standard elements.
Edit the elements in a section
You can edit each element directly within its section.
1. Edit text elements: Click a text element (such as a title or description) to open the text toolbar.
You can:
Change the text style (for example, Heading 2)
Apply bold, italic, or underline formatting
Add a link
Change the text color
Align the text left, center, or right
Clear the formatting
2. Edit button elements: Click a button to open the Button settings panel.
You can:
Text: Enter the button label (up to 30 characters), for example, "Explore"
Destination URL: Add the link the button should open (for example, https://www.yourstore.com)
Button alignment: Align the button left, center, or right
Colors: Customize the button text and button background colors. Click Reset to restore the defaults.
You can also move, duplicate, or delete an element using the icons that appear next to it.
3. Edit image elements: The Image element lets you insert a standalone image inside a section. When you click an image element, the Image settings panel opens with the following options:
You can upload an image (suggested dimensions: 1,040 x 300 pixels, up to 2 MB, in JPG/JPEG, GIF, or PNG format)
Adjust its size and border radius
Set its alignment
Add a destination URL to make it clickable
Enter alt text to improve SEO and accessibility
Save and publish your page
Click Save to save your progress without making the page live.
Click Preview to see how your page looks before publishing.
Click Save and publish to make your page live. Once a page is published, this button updates to Update live page so you can push further changes live.
Add landing page to Shopify store
You can add this page to your store navigation for your customers to find it easily. Learn more.
Need Help?
If you have any questions, contact our chat support team.