Build a Professional Shopify Product Page with PageFly
Build a Professional Shopify Product Page with PageFly
Table of Contents
- Quick Analysis of the Mack Weldon Product Page
- Configuring the Theme Settings
- Building a Product Page in PageFly
- 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
- Mobile Optimization
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.
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.
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.
- 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.
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.
I am a shopify merchant, I am opening several shopify stores. I use ppspy to find Shopify stores and track competitor stores. PPSPY really helped me a lot, I also subscribe to PPSPY's service, I hope more people can like PPSPY！ — Ecomvy
To make it happen in 3 seconds.
- App rating
- Shopify Store
- Trusted Customers
- No complicated
- No difficulty
- Free trial
- The Hidden Reality of One-Product Stores
- Mastering Taxes for Young Entrepreneurs
- Mastering Taxes for Online Business Owners
- Why Dropshipping Stores Outperform Aliexpress for Online Shopping
- The Ultimate Guide to Dropshipping: How It Works and What You Need to Know
- Mastering Profit Calculations for Your Amazon Business
- Discover the Best Dropshipping Companies: A Comprehensive Guide
- Boost Your Trading Success with Mechanical Rules
- The Ultimate Guide to Dropshipping with Big Cartel
- Master Drop Shipping with Bigcommons