How to Create Regular Pages With AfterShip Page Builder?
###Overview
Having eye-catching landing pages has always been crucial from the business’s point of view because they help to encourage prospects to take one step further and make a purchase.
With AfterShip Page Builder, it gets easier to create awesome pages, which further helps to showcase brand concepts in an amazing manner and increase the ad conversion rate.
Make sure your store is connected with AfterShip Page Builder. In case you don’t know how to do it, make use of this help article.
Login to your AfterShip Page Builder account to access the ‘Pages’ section
Once done, decide whether you want to begin with a template or a blank page.
By default, in the old editor, you land on a page where you can add sections to define what content your page should have. All the available sections are easy to use, however, we would like to share details on some. Please check the below info:
As far as the new editor is concerned, you can edit the page content directly from the preview panel.
Choose an image for your landing page and then define its width, alignment, and destination URL
Now come to the ‘Text’ section and enter data with respect to ‘Header’ and ‘Description’
In case you want to add a button to your landing page, one field is specifically given for the same. Give your button a name and mention the URL, where you want your website visitors to be redirected
It's pretty much similar to the aforementioned block as it also lets you upload an image of 2mb, adjust the width, add desired URL, and use these formats: .jpg, .jpeg, .gif, and .png
However, the difference lies in the image size. In this block, you can have a bigger image (960 × 480) than the aforesaid block (460 × 345).
In case you want to uplift your profits by promoting your top-selling products or want to introduce the newly-launched ones, the 'Image gallery' block can help your cause. Add a multitude of product images with the utmost ease.
Image uploading condition is as same as the above-mentioned blocks: Keep the size under 2mb and the format in any of these - .jpg, .jpeg, .gif, and .png
However, keep the dimensions small. 300 × 225 is the ideal dimension for this block.
If you want to add some engaging or informative content like quotes, statistics, etc. then this block is for you. It allows you to enter text (up to 5000 characters) and also helps you with setting the position, size, and weight.
Every brand has its story to tell, and you can tell yours with the 'Text columns with images' block. It has two sections: 'Text' and 'Content'
In the first section, define the header and description, whereas the second one is all about introducing decision makers in an appealing way. Here's how you can do it:
This block lets you promote other products to drive sales and reduce the bounce rate.
Assign products: Decide whether you want to show your best-selling products, specific product collection, or some particular products
Conditions: If you select a specific product collection, up to 50 products will be shown, whereas you will be allowed to select up to 20 items in case you want to show particular products. As far as best-selling products are concerned, up to 20 items can be shown.
Items that you've sold in the last 30 days will be considered as best-selling products. If any of your best-selling items have already been purchased by your store visitor, he/she will see other top-selling products as recommendations. In case you’ve not sold anything in the last 30 days, random products will be recommended.
Layout: Specify how many columns you would like to have while showcasing your products.
Note: It can be done only for the desktop version, as the mobile one will have only 2 columns. It is been deliberately so that store visitors get a pleasing mobile experience
Content: Click on the checkboxes to decide what product content you want to show. Also, add an action button and decide its behavior as well.
There are 3 different button types are available: ‘Add to cart button,’ ‘Redirect button,’ and ‘Shopify dynamic checkout button’.
‘Stay on the same page’ and ‘Go to cart page’ are two options you can choose from while deciding the behavior of your action button.
Besides this, you can modify the button name and also select a suitable picker type, which will be shown only when variants of products are available.
Text: Mention what your product list block should be saying by simply entering the desired content in the ‘Header’ and ‘Description’ fields
Color: Decide the colors regarding the sale price and comparison price
This block lets you increase the number of subscribers, which helps you expand your customer base after proper lead nurturing. You just need to enter details in the given fields like this:
As its name suggest, you can add a dedicated button to your page. Just give your button a name and mention the URL, where you want your website visitors to be redirected.
This block plays a pivotal role in increasing the GMV (gross merchandise value). You can show hot-selling products on your Shopify store's home page, blogs, collections, and other general pages like 'About us.'
The major difference between 'Product list' and 'Product detail' blocks is that the latter lets store visitors add products directly to their cart. However, the former redirects prospects to the product page upon clicking.
You can add this block up to 20 times. It also lets you change the color of discounted price and actual product price according to your store theme.
If you're using Shopify theme 1.0, you can show/hide this and move its position. In case of Shopify theme 2.0, you can only show/hide it.
Note: This block will disappear as soon as you mark the chosen product 'Inactive'.
If you want to add a text element along with a dedicated button over an image to grab the attention of your store visitors for a particular purpose, this block is meant for you. It has s sections: Image, Layout, Text, Button, and Color.
All the sections are self-explanatory and easy to use 🤟
This block lets you mention social media buttons on your page, which further helps you to gain more followers. Besides strengthening your online presence, it aids in increasing the sales growth 🤟
You can easily add more social media buttons if required. Simply click on the 'Add logo' option and choose the desired SM platform. Once done, enter the correct link in the given field.
After being satisfied the settings of all the added blocks, hit the 'Save' button to finish the content part
Click Settings and styles placed at the bottom of the left-hand side to set the page settings and style
Enter your page name in the Page info section
Set the SEO settings by entering Page title and Meta description
If you don't want the header and footer to be visible on your product page, choose 'Hide' radio button In the Header and footer section. Otherwise, let it set to the 'Show'
This tab is all about enhancing the look of your product page. It lets you select the font and colors regarding ‘Page background,’ ‘Text,’ and ‘Button’
Once you're done with the styling, switch to the mobile preview to check everything is alright.
After being satisfied with all of your settings, click 'Save and publish page' to make your page live.
Voilà! It’s done
Note: Apart from the dashboard of AfterShip Page Builder, you can check all your published pages from your Shopify account by simply navigating to the ‘Pages’ section
We hope these steps have made it clear how to set up a landing page with the help of AfterShip Page Builder. In case you have any questions, please feel free to discuss them with our support team working around the clock only for you.
Having eye-catching landing pages has always been crucial from the business’s point of view because they help to encourage prospects to take one step further and make a purchase.
With AfterShip Page Builder, it gets easier to create awesome pages, which further helps to showcase brand concepts in an amazing manner and increase the ad conversion rate.
Steps to create a landing page:
Make sure your store is connected with AfterShip Page Builder. In case you don’t know how to do it, make use of this help article.
Login to your AfterShip Page Builder account to access the ‘Pages’ section
Once done, decide whether you want to begin with a template or a blank page.
🖌️ Finalize the page content
By default, in the old editor, you land on a page where you can add sections to define what content your page should have. All the available sections are easy to use, however, we would like to share details on some. Please check the below info:
As far as the new editor is concerned, you can edit the page content directly from the preview panel.
👉 Let's start with the 'Image with text' block:
Choose an image for your landing page and then define its width, alignment, and destination URL
Now come to the ‘Text’ section and enter data with respect to ‘Header’ and ‘Description’
In case you want to add a button to your landing page, one field is specifically given for the same. Give your button a name and mention the URL, where you want your website visitors to be redirected
👉 Now, let's come to the 'Image' block:
It's pretty much similar to the aforementioned block as it also lets you upload an image of 2mb, adjust the width, add desired URL, and use these formats: .jpg, .jpeg, .gif, and .png
However, the difference lies in the image size. In this block, you can have a bigger image (960 × 480) than the aforesaid block (460 × 345).
👉 Try the 'Image gallery' block:
In case you want to uplift your profits by promoting your top-selling products or want to introduce the newly-launched ones, the 'Image gallery' block can help your cause. Add a multitude of product images with the utmost ease.
Image uploading condition is as same as the above-mentioned blocks: Keep the size under 2mb and the format in any of these - .jpg, .jpeg, .gif, and .png
However, keep the dimensions small. 300 × 225 is the ideal dimension for this block.
👉 Let's check what 'Text' block has to offer:
If you want to add some engaging or informative content like quotes, statistics, etc. then this block is for you. It allows you to enter text (up to 5000 characters) and also helps you with setting the position, size, and weight.
👉 Learn what we can do with 'Text columns with images' block:
Every brand has its story to tell, and you can tell yours with the 'Text columns with images' block. It has two sections: 'Text' and 'Content'
In the first section, define the header and description, whereas the second one is all about introducing decision makers in an appealing way. Here's how you can do it:
👉 Let's find out what we can do with the 'Product list' block:
This block lets you promote other products to drive sales and reduce the bounce rate.
Assign products: Decide whether you want to show your best-selling products, specific product collection, or some particular products
Conditions: If you select a specific product collection, up to 50 products will be shown, whereas you will be allowed to select up to 20 items in case you want to show particular products. As far as best-selling products are concerned, up to 20 items can be shown.
Items that you've sold in the last 30 days will be considered as best-selling products. If any of your best-selling items have already been purchased by your store visitor, he/she will see other top-selling products as recommendations. In case you’ve not sold anything in the last 30 days, random products will be recommended.
Layout: Specify how many columns you would like to have while showcasing your products.
Note: It can be done only for the desktop version, as the mobile one will have only 2 columns. It is been deliberately so that store visitors get a pleasing mobile experience
Content: Click on the checkboxes to decide what product content you want to show. Also, add an action button and decide its behavior as well.
There are 3 different button types are available: ‘Add to cart button,’ ‘Redirect button,’ and ‘Shopify dynamic checkout button’.
‘Stay on the same page’ and ‘Go to cart page’ are two options you can choose from while deciding the behavior of your action button.
Besides this, you can modify the button name and also select a suitable picker type, which will be shown only when variants of products are available.
Text: Mention what your product list block should be saying by simply entering the desired content in the ‘Header’ and ‘Description’ fields
Color: Decide the colors regarding the sale price and comparison price
👉 Let's try the 'Form' block:
This block lets you increase the number of subscribers, which helps you expand your customer base after proper lead nurturing. You just need to enter details in the given fields like this:
👉 Let's move to the 'Button' block now:
As its name suggest, you can add a dedicated button to your page. Just give your button a name and mention the URL, where you want your website visitors to be redirected.
👉 'Product detail'
This block plays a pivotal role in increasing the GMV (gross merchandise value). You can show hot-selling products on your Shopify store's home page, blogs, collections, and other general pages like 'About us.'
The major difference between 'Product list' and 'Product detail' blocks is that the latter lets store visitors add products directly to their cart. However, the former redirects prospects to the product page upon clicking.
You can add this block up to 20 times. It also lets you change the color of discounted price and actual product price according to your store theme.
If you're using Shopify theme 1.0, you can show/hide this and move its position. In case of Shopify theme 2.0, you can only show/hide it.
Note: This block will disappear as soon as you mark the chosen product 'Inactive'.
👉 Let's test the 'Image with text overlay' block now:
If you want to add a text element along with a dedicated button over an image to grab the attention of your store visitors for a particular purpose, this block is meant for you. It has s sections: Image, Layout, Text, Button, and Color.
All the sections are self-explanatory and easy to use 🤟
👉 Let's come to the last block, 'Social links':
This block lets you mention social media buttons on your page, which further helps you to gain more followers. Besides strengthening your online presence, it aids in increasing the sales growth 🤟
You can easily add more social media buttons if required. Simply click on the 'Add logo' option and choose the desired SM platform. Once done, enter the correct link in the given field.
After being satisfied the settings of all the added blocks, hit the 'Save' button to finish the content part
⚙️ Set the page settings
Click Settings and styles placed at the bottom of the left-hand side to set the page settings and style
Enter your page name in the Page info section
Set the SEO settings by entering Page title and Meta description
If you don't want the header and footer to be visible on your product page, choose 'Hide' radio button In the Header and footer section. Otherwise, let it set to the 'Show'
🎨 Now explore the options of the ‘Styles’ Tab
This tab is all about enhancing the look of your product page. It lets you select the font and colors regarding ‘Page background,’ ‘Text,’ and ‘Button’
Once you're done with the styling, switch to the mobile preview to check everything is alright.
After being satisfied with all of your settings, click 'Save and publish page' to make your page live.
Voilà! It’s done
Note: Apart from the dashboard of AfterShip Page Builder, you can check all your published pages from your Shopify account by simply navigating to the ‘Pages’ section
We hope these steps have made it clear how to set up a landing page with the help of AfterShip Page Builder. In case you have any questions, please feel free to discuss them with our support team working around the clock only for you.
Updated on: 16/05/2023
Thank you!