Overview
Your home page is often the first thing shoppers see when they visit your store. A well-designed home page encourages visitors to browse, builds trust in your brand, and drives more sales.
AfterShip Page Builder lets you design and publish a custom home 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 home 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 home page
Go to Pages > Home page section in your AfterShip Page Builder account.
Choose whether to start with a template or a blank page.
Note:
In the new editor, you can edit the page content directly from the preview panel.
In the old editor, you add blocks from a list to define your page content.
Configure the page settings
1. Page info
Page name: Enter a name for your page (up to 50 characters).
Page URL: Set the URL slug for your page. It follows the format
https://aftership-personalization-sales-demo.myshopify.com
Note: After you publish the home page, this page will replace your current home page.
2. SEO settings
The SEO settings for the home page can be configured from your Shopify admin > Online Store > Preferences.
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, Bitter).
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. 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.
a. Recommended dimensions: 1,040(w) x 300(h) pixels.b. Maximum file size: 2 MB
c. Supported formats: .jpg, .jpeg, .gif, and .png
d. You can also set the image width and add a destination URL.
e. You can add an Alt text, briefly describing the image to improve SEO rankings and accessibility for visually impaired customers.
Product list: Layouts for displaying multiple products at once, useful for promoting collections or related items.
a. 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.
b. Layout: Specify the number of columns for displaying products.Note: This setting applies to the desktop only. The mobile version always displays 2 columns to ensure a pleasing mobile experience.
c. Content: Select the checkboxes to choose which product details to display. You can also add an action button and configure it:
Button behavior: 'Stay on the same page' or 'Go to cart page'
Picker type: Shown only when product variants are available
Text: Add a label that appears on a button, the words visitors actually read on it, such as "Explore," "Shop Now," or "Subscribe."
Button types: 'Add to cart button,' 'Redirect button,' or 'Shopify dynamic checkout button'
6. Text: Enter the content for the Header and Description fields of the product list section.
7. Color: Set the colors for the sale price and comparison price.
8. Product details
Layouts for highlighting a single product with its details.
Use this block to feature individual products on your home page, blogs, collections, and general pages like About Us. Unlike the Product list block, which redirects visitors to the product page, the Product detail block lets visitors add products directly to their cart.
You can add this block up to 20 times per page.
You can change the colors of the discounted price and the actual product price to match your store's theme.
Note: This block disappears from your page if you mark the chosen product as 'Inactive.'
9. About: Layouts designed for sharing your brand story or introducing your team
10. 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 do 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:
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.
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.
If you wish to add your page created via AfterShip Page Builder to your Shopify store navigation, in your Shopify admin, go to Content > Menu > Add Menu item > Add label > Paste the URL of your blog page > Save.
Key information
To reorder content blocks, drag and drop them into your preferred position.
To delete a block, click the trash icon.
If you switch to another Shopify theme, republish the page in Page Builder for your changes to take effect.
If you unpublish the home page created via AfterShip Page Builder, your store displays the default Shopify home page.
Need Help?
If you have any questions, contact our chat support team.