How to Create Product Pages With AfterShip Page Builder

Overview

Creating informative yet compelling product pages is imperative to accomplish goals like securing whopping sales figures, boosting conversion rate, building a better website experience for prospects, and so on.

AfterShip Page Builder exactly helps you with that. It lets you give a new look to your product pages, which not only sets apart your Shopify store from others but also leads to a positive WOMM (word-of-mouth marketing).

Steps to create product pages:

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 ‘Product 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.

👉 'Default product details'

This block is not editable because it is related to all the product content, which is already live on your Shopify store. But 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.

👉 'Image with text'

Choose an image for your product page and start defining its width, alignment, and destination URL

Now scroll down to the ‘Text’ section and provide content for ‘Header’ and ‘Description’


In case you want to add a button, give it a name and mention the URL, where you want website visitors to reach

👉 'Image'

It lets you upload an image with the dimensions of 960 × 480, which will be a way bigger than the one you can upload on the aforesaid block.

Keep the size under 2mb, set the width, and mention the desired URL.

Please stick to these formats while uploading an image: .jpg, .jpeg, .gif, and .png

👉 'Image gallery'

This block enables you to highlight your top-selling products and introduce the newly-launched ones for a better sales growth. You can effortlessly add a multitude of product images.

Image uploading condition is as same as the above-mentioned blocks: Keep the size under 2mb and the format should be any of these - .jpg, .jpeg, .gif, and .png

The difference lies in the dimension, which should be around 300 × 225.

👉 'Text'

Add enticing and informative content like quotes, statistics, etc. with this block in minutes. It lets you add content (up to 5000 characters) and also offers other settings like position, size, and weight to ensure a better placement and appearance.

👉 'Text columns with images'

It has two sections: 'Text' and 'Content'

The first section is all about defining the header and description, whereas the second one simply lets you introduce decision makers in an appealing manner. Here's how you can do it:

👉 'Product list'

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 has 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

👉 'Form'

This block lets you gain more subscribers, which further results in customer base expansion and enhanced sales growth. Just enter details properly in the 'Text' and 'Button' sections.

👉 'Button'

Add a dedicated button to your product page with this block. Mention a name and the URL, where you want shoppers to be redirected.

👉 'Image with text overlay'

Add a text element along with a dedicated button over an image and easily draw the attention of shoppers. It has 5 sections: Image, Layout, Text, Button, and Color.

All the sections are self-explanatory and easy to use 🤟

👉 'Social links'

Increase the followers of your brand pages created over public platforms like Facebook, Twitter, etc. by adding social media buttons on your product page.

All you need to do is to add a logo and link for each social media button you're going to add.

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

Scroll down to the ‘Assign products’ section and decide whether you want to apply your changes to all products or some specific ones

Set the SEO settings. Check in-depth details here

In the Default product details section, 'Show' radio button is selected by default. However, if you want the default product details to be disappeared, select 'Hide' radio button.

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.

Key information:

If you have added multiple content blocks and want to change their order according to your preference, you can do it by simply doing drag and drop.
The ‘Trash box’ icon is also there to let you delete any block you want.
Maximum 100 products can be selected.
In case you switch to any other Shopify theme, you have to publish the page again in your AfterShip Page Builder account to get your changes reflected.

We hope that all the mentioned steps are clear to you. In case you have any questions, please discuss them with our support team now 👍

Updated on: 16/05/2023