Overview
AfterShip Page Builder lets you create and customize blog post pages for your Shopify store without any coding. You can configure the page settings, adjust the styles, edit individual sections, and add new sections and elements to build your page.
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.
This article walks you through each configuration step so you can design and publish a blog post page that matches your bran
Steps to create blog pages with AfterShip Page Builder
Your store must be connected with AfterShip Page Builder in order for the blog pages to reflect online. Know more about store connections here.
Go to the Pages > Blog post pages in your AfterShip Page Builder admin
Choose a pre-built template or start with a blank page.
Step 1: Configure the page settings
Once you open your blog post page in the editor, go to the Settings tab in the left panel to configure the basic page details.
Blog
Blog name: Choose or create a blog to publish your post to. You can manage your blogs in your Shopify settings.
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
blogs/your-blog-name/your-page-url.
SEO settings
Search results preview: See how your page will appear in search engine results.
Page title: Enter a title for search engines (up to 70 characters).
Meta description: Add a short description of your page (up to 320 characters) to improve click-through rates from search results.
Header and footer
Select Show or Hide to control whether your store's header and footer appear on the page.
Tags
Add tags (for example: Vintage, cotton, summer) to organize your blog posts (up to 100 characters).
AfterShip branding
To remove the "Powered by AfterShip" branding for free, click Contact support to verify your store.
Step 2: Customize the page styles
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
Step 3: 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: Your saved custom sections
Add a blank section: Start from scratch and build the section with your own elements
Intro: Introduction layouts with images, text, and buttons
Images: Image-focused layouts
Product list: Showcase multiple products
Product details: Highlight a single product
About: Brand story layouts
Custom section: Build your own section
Select a template from the library to add it to your page. You can also rearrange, duplicate, delete, or download a section using the icons that appear when you hover over it.
Step 4: 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.
Step 5: Add elements to a section
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: Add a heading
Description: Add body text
Image: Insert an image
Button: Add a clickable button
Spacer: Add vertical spacing between elements
Line: Insert a divider line
Email signup form: Collect email subscribers
Social links: Link to your social media profiles
Accordion: Add collapsible content, such as FAQs
Contact form: Let visitors reach out to you
Video: Embed a video
Countdown timer: Create urgency for sales or launches
Custom code: Add your own HTML or code
Step 6: Edit the elements in a section
You can edit each element directly within its section.
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
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.
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.
Step 7: 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 want to revert your changes, click Back to previous version.
FAQs
1. Why am I not able to locate my blog page on my Shopify store after publishing it?
Your blog page doesn’t get added automatically to the navigation bar of your Shopify store. Until you don’t add it manually, it will be saved in the AfterShip Page Builder and you can only access it on Shopify by directly opening the complete page URL in the browser.
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.
2. What's the ideal way to publish multiple pages under a particular section of my Shopify store?
We've noticed that some users create multiple pages (with wrong settings) via AfterShip Page Builder and then expect them to see on their Shopify stores.
The ideal way to publish multiple pages under a particular section is to always keep the same 'Blog name' for all your posts. For ex: If you set the blog name like 'My blogs' for a page 1, you should keep using the same blog name for others as well.
Note: Blog name and Blog title are two different things, so the latter could be anything, but the former has to be the same every time.
Once done, proceed in this way:
Navigate to your Shopify store’s Navigation settings.
Decide whether you want to show your blog posts in the main menu or footer menu > 'Add a menu item' option
Give it a suitable name and choose Blogs option from the dropdown menu to select your blog page for the 'Link' field
Tap on the 'Add' button > Finally, hit the 'Save menu' or 'Save' button to complete the process
In case you need any help with the blog pages, drop a message to our chat support team now.