Build a Professional Shopify Product Page with PageFly

Table of Contents

1. Introduction
2. Quick Analysis of the Mack Weldon Product Page
3. Configuring the Theme Settings
4. Building a Product Page in PageFly
5. Fine-Tuning Each Part of the Product Detail Section
6. Adding the Shipping Policy and AfterPay Paragraph
7. Styling Each Element Like the Reference Design
8. Adding a Materials & Care Block
9. Adding an Image and Content
10. Adding a Review Section
11. Mobile Optimization
12. Conclusion

Building a Complete Product Page in PageFly

In this tutorial, we will guide you on how to build a complete product page in PageFly. We will use a page from the Mack Weldon website as a reference and show you how to create a similar page using PageFly. We will cover everything from configuring the theme settings to fine-tuning each part of the product detail section, adding the shipping policy and AfterPay paragraph, styling each element like the reference design, adding a materials & care block, adding an image and content, adding a review section, and mobile optimization.

Quick Analysis of the Mack Weldon Product Page

Before we begin building the product page, let's take a quick analysis of the Mack Weldon product page. The page is simple and clean, yet fully detailed with information like shipping policy, pricing, key features, and so on. In the Buy section, we have a common 1/2 layout here. On the left, there are product images and a quick description of the product's features. On the right, we have two parts: a product detail block and a material block. In the product detail block, there is a review element and a color swatch. These elements aren't available in PageFly yet, so you need to use 3-rd party apps for that.

To understand further how the design of this page is made, you can right-click and select, open inspector. Here you can find out about the font, the color swatch, and the spacing that Mack Weldon uses. You can copy and paste it into a notepad for reference.

Configuring the Theme Settings

To save time when building a page, we will configure the font family and the color in the theme settings. Here, we will change the font heading to Montserat and the body text font to Lato. This way, PageFly page will inherit the theme's font. Alternatively, you can also choose other fonts or upload your own in PageFly.

Building a Product Page in PageFly

Now let's head to PageFly and create a new product page. In the page settings, we will hide the theme's default buy section and assign the page to our polo shirts. Then we will drag and drop the Product Detail element in the editor. By default, the max width of a section in PageFly is set to 1170px, which is quite narrow when compared to our reference layout. So we will increase it a little bit. We will also change the background color of this section.

Fine-Tuning Each Part of the Product Detail Section

Now we're going to fine-tune each part of this section. First of all, we will design the layout of the product image. The next item is the product features part. We will use the slideshow element for this section. We will delete the unnecessary elements and add an image to each slide. We will add a left margin to this element so that it will align with the product image. In this case, we will use the percentage number so that the margin fits well on every device type.

Moving on to the right side, this part will have two parts: a product detail block and a material block. Then we need to create two blocks for it. We will move these elements inside the proper block. We will add the rating star element to this section. You can easily do this by heading to the add third party element button, find the element you need, and drag and drop it to the product page. We will also delete the default product element and replace it with the Product Personalizer by Zepto to add a color swatch to our product page.

Adding the Shipping Policy and AfterPay Paragraph

Now let's add the Shipping Policy and the AfterPay paragraph to the page. You can edit and add the link to the Shipping Policy in the General tab. The AfterPay line is a little tricky since it has a paragraph and an image in the same line. You will have to add another block element, add the paragraph and the image into this block. Then select Styling > Display > Flex > Wrap > choose Wrap. To make the button width separate from the product quantity selector, select the button go to Styling and move to the CSS code parameter add: width: 100%; to make the button full width.

Styling Each Element Like the Reference Design

Now let's style each element like the reference design. Then, again, you can open the inspector to precisely duplicate the style of Mack Weldon page. For the materials & care block, we will add a heading and a list element to it. You can also change the icon of the list. To make the icon and the text align vertically, we will increase the margin right of some list icons.

Adding an Image and Content

The next section is simpler than the previous one. We will add a full-width section. Now let's create another column. Next, let's add an image and content. We will add it as a background image of a column. This will give us more flexibility when cropping the image. Finally, let's style the section like our reference design.

Adding a Review Section

With this section, let's add another full-width layout. Add a heading and a product list in it. In the product list, you can click on the product image to configure the hover action and turn on product badge. Set the condition for the badge to show up on the live view. In this case, we will choose the condition when a product contains a staff pick tag a badge will show up. You can add the tag to your products in Shopify admin.

Mobile Optimization

For the mobile version, we need to re-adjust the padding and margin of them. Notice that if we adjust a parameter that has a mobile icon on the left, the change won't affect other versions. In this section, you can see that on the mobile version, the text appears first before the image, unlike our reference design. To reverse this hierarchy, select the row > go to styling > display > flex > select wrap reverse. We will continue to adjust other sections to make sure every displays properly on desktop and mobile.

Conclusion

In conclusion, building a complete product page in PageFly is easy and straightforward. By following the steps outlined in this tutorial, you can create a professional-looking product page that is fully optimized for SEO and user experience. With PageFly, you can easily customize every aspect of your product page, from the layout to the font and color scheme. So why wait? Start building your own product page in PageFly today and take your online store to the next level.

Highlights

• Building a complete product page in PageFly is easy and straightforward.
• You can create a professional-looking product page that is fully optimized for SEO and user experience.
• With PageFly, you can easily customize every aspect of your product page, from the layout to the font and color scheme.

FAQ

Q: Can I use PageFly to create a product page for any type of product? A: Yes, you can use PageFly to create a product page for any type of product.

Q: Do I need any coding skills to use PageFly? A: No, you don't need any coding skills to use PageFly. It's a drag-and-drop page builder that is easy to use and requires no coding knowledge.

Q: Can I customize the font and color scheme of my product page? A: Yes, you can customize the font and color scheme of your product page using the theme settings in PageFly.

Q: Can I add a color swatch to my product page using PageFly? A: Yes, you can add a color swatch to your product page using a third-party app like Product Personalizer by Zepto.

Q: Can I add a review element to my product page using PageFly? A: No, you need to use a third-party app like Judge.me to add a review element to your product page.