How to Use Product Detail Content Block in AfterShip Page Builder?

Overview

To encourage shoppers to make quick purchase decisions, Shopify merchants must ensure that their product details carry all the required information and look visually appealing. Unfortunately, Shopify doesn’t give customization options, unlike AfterShip Page Builder.

With AfterShip Page Builder, you can hide default product details and add new ones to increase GMV significantly.

Step 1: Hide your default product details

Login to your AfterShip Page Builder account > Go to ‘Product pages’

Choose any of the given templates or start with a blank page, though beginning with a template will give you a head start

Now, go to the ‘Default product details’ section mentioned under the ‘Settings’ tab > Select the ‘Hide’ option


In case you want to apply your settings for all products, choose ‘All products’ option of the 'Assign products' section. Otherwise, you can select specific ones by clicking on the ‘Select products’ option

Step 2: Add personalized product details for your page

Switch from the ‘Settings’ to ‘Content’ tab > Tap on ‘Add section’

Now, a list of content blocks will appear, from which you need to choose the ‘Product detail’ block. To learn about other content blocks, click here

Note that you can add product detail block up to 20 times for each page.
You will see multiple options in 3 sections, so select according to your preferences:

Section 1: Basics

Product Media

Media size: Choose the image size ratio for your product image. Available options are 1:1 and 4:3

Media list: If your product has multiple images, you can show them by enabling this option. Also, define the position of images under the 'Display device' for desktop and mobile devices

Product Variant

Picker type: In case your product offers a wide range of options in terms of size, color, etc., then decide how you want to show them. Available options are: 'Dropdown' and 'Button'

Product Description

It’s self-explanatory, as this option lets you decide whether the product description needs to be shown or not.

Action Button

You get two options two choose from: 'Add to cart button' and ‘Shopify dynamic checkout button’. If you are going with the first option, give your button a name and decide what should happen once the shopper clicks on the button. In case you want shoppers to buy directly, choose the second option. You can add both buttons as well.

Section 2: Sales boost

Promotion Text: If you want to put some promotional content on display to tempt prospects, click on the radio button given for 'Show' and mention the text

Countdown Timer: Click on the radio button given for 'Show' if you want to add a countdown timer for instilling FOMO (Fear of missing out) in prospects' minds. Click on the 'Custom style' button to set the 'Text,' 'Timer,' and 'Color' for your countdown timer.

Section 3: Styles

It's all about setting colors regarding your sale price, comparison price, and promotional content.

Step 3: Make your product pages compelling by adding awesome colors and fonts

Now, shift from the ‘Content’ to the ‘Style’ tab

Choose the desired font from the ‘Display’ section

Define the colors regarding the page background, text, and buttons in the ‘Colors’ section

Check your settings for all the tabs, and publish your page if you are satisfied with everything you’ve done so far.

In case you are seeking help regarding more fonts, content blocks, or anything else, then please discuss with our chat support team now

Updated on: 16/05/2023