Chapter 6: Check your result

The final step is checking the live page to make sure everything is solid.

01. Check content

02. Check visual design

  • If you have the graphic design for the page, make sure the page built in PageFly Is 99% identical to it.
    • Use chrome extension Smart Page Ruler to measure distance on live page and PerfectPixel to help to spot the difference.
    • Check appearance on real mobile devices, not resized browser or mobile mode in editor.
  • Pay attention to some of the common mistakes:
    • Top and bottom / left and right spacing are not identical and incorrect. Read more.
    • The background-position is not right. Read more.
    • Line height is not good. Read more.
    • Border styling is not as in design.
    • Full width section is set with a fixed width.
    • Misuse of Flex. Read more.

03. Check performance

Check page by Google Page Speed and make sure to have around 90 scores on both mobile and desktop.

04. Check CSS code

check your CSS code

Go carefully through each element and their containers to check Custom CSS and spot for CSS code problems.

The amount of code must be as little as possible.

05. What’s Next

Check out our other video tutorials to help you build a high-converting Shopify Store

How To Create A Custom Shopify Product Page With PageFly

How To Create A Custom Shopify Collection Page With PageFly

How To Create A Blog Post With PageFly

Navigate this series

PreviousPrevious chapter

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly