How to Create Home Page for Your Shopify Store With AfterShip Page Builder?

Overview

‘Make your first impression the best one’ is something that every growing brand should work upon. When buyers get a pleasant experience on their first visit to your store, they not only shop quickly, but also spread a word about their awesome shopping experience. Yes, you guessed that right, it drives more sales 🤟

AfterShip Page Builder, apart from bringing life to dull product pages and facilitating the landing page creation, helps you overhaul the home page of your Shopify store. Let’s learn how:

Steps to create an awe-inspiring home 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 ‘Home page’ 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 try some blocks:

👉 '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 you change its position by simply doing drag and drop.

👉 '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 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

👉 '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.

👉 '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.

Note: This block will disappear as soon as you mark the chosen product 'Inactive'.

👉 '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

Set the SEO settings. Check in-depth details here

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.
In case you switch to any other Shopify theme, you have to publish the page again in the Page Builder to get your changes reflected.
Your store will show a default Shopify home page if you unpublish the one created by AfterShip Page Builder.

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