Tips and tricks to build better Shopify landing page with PageFly

Even if everything is “drag and drop”, building a landing page can still take time and be complicated to someone who is new to website developing or landing page design.

PageFly app is a powerful tool and made to be easy to use. But when we support our users, we realize that some users still find it hard to create a landing page with complex structure, nice responsive design, and effectiveness.

In this article, we will show you some tips and tricks to make a really powerful, nicely designed eCommerce landing page.

Table of Contents

1. Pay attention to page structure for better responsiveness
2. Build better mobile view with mobile editing
3. Avoid reducing conversion rates by using anchor link
4. Build high converting landing pages by using templates
5. Save time by copying CSS style
6. Avoid losing traffic by removing header and footer
7. Set the landing page as your homepage to get higher performance
8. Create some cool stuff with Custom CSS

1. Pay attention to the page structure for better responsiveness

Check out All You Need To Know About CSS Margin and Padding

Basically, these are all parts of a web page and they help you keep the page layout responsive to all devices. An ideal page is a page that contains many sections. In the section there are rows, each row contains columns and the elements are placed inside the column.

So the right order should be: Section > Row > Column > Element.

With PageFly, whenever you drag a new element into the page, it will automatically create higher hierarchy parts over the element (column, row, section).

There are some grid system rules below that can be very helpful for our fellow amateur developers. For example:

As you can see, there are 2 columns in 1 row. And in 1 column, there will be elements such as images, or heading, paragraph or button.

If you don't follow this structure, your page may not look nice on mobile devices. With properly columns and grid, all their pages can be responsive on any device from the largest desktop to the smallest mobile screen. That's the reason behind PageFly page structure.

2. Build better mobile view with mobile editing

More tips on creating responsive structure: 

Mobile view and desktop view are very different. Because all columns from desktop view will be transformed into 1 column only on mobile, if you show all the content on mobile, the customers have to scroll for s long time.

For desktop, we can write long content with multiple images and sections, but on mobile, it should be short and straight to the point. That is the reason why we developed the “hide on” function, with which you can decide which content should be shown and hidden on each device.

You can simply choose the element that you want to hide or show on each device, go to the Advanced setting tab, under the “hide on” setting, turn on the device that you want to hide the content on.

3. Avoid reducing conversion rate by using anchor link

Each time people click to another page, it will take time to load that page content, and the conversion rate will drop a little bit. That’s the reason why the one-page structure is very popular.

When you click on a link or a button, it will scroll down automatically to another part of the page. This technique is called anchor link, which helps you keep your customer on one page only and avoid losing traffic.

Here is how to help you do that:

Choose the section that you want to move to when people click on a button. Click the Advanced setting tab, under the Attribute setting, insert an ID (for example: install)

Then choose that button, insert that ID into URL field with the “#” in the front (for example, the ID is "install", then you need to insert "#install" in the button).

Attribute settings and other Advanced settings can be easily found in PageFly Platinum version.

4. Build a high converting landing page by using templates

In order to help our users to build landing pages faster and more efficiently, we created a library with 40+ ready to use templates. You can choose a template that really fits your niche. There are about 10 niches that you can choose from:

• Clothing & fashion
• Jewelry and accessory
• Food and drink
• Art & photography
• Electronics
• Home & Garden
• Furniture
• Health & Beauty
• Sport & Recreation
• Toys & Games
• Others

Besides, there are templates for you to create landing pages for special events, which are updated continuously:

• Black Friday & Cyber Monday
• Christmas
• General sales

These templates are carefully tested by our eCommerce experts to get the highest conversion rate.

5. Save time by copying CSS style

One of the most important elements of building a landing page is the consistency, which means that all the titles, subtitles, paragraph, and sections should be in the same style (in padding, color, and size).

I have inspected a lot of pages when supporting PageFly users, and I found a really bad trait. The titles of the same landing page did not have the same style, which really makes the page a mess.

There are a few ways that help you easily apply the same style to every similar element:

First, you can copy the custom CSS code. Whenever you set the styling to an element, it will generate a custom CSS code. Choose the element that you want to copy the style of.

Go to the Advanced tab, navigate to custom CSS and copy this code. After that, go to the element that you want to apply the same style to. Do the same and paste the code into custom CSS:

Another way that you can use is using pre-defined styling. Just go to Define pre-defined styling. From there, you can choose to define the styling of Box, Button or Text.

This feature helps you define the styling of the element once only. After that, you can use the styling for other similar elements without setting the styling again.

After defining the pre-defined styling for each feature, go back to editing and choose the element that you want to apply a style to and do as follows:

6. Avoid losing traffic by removing header and footer

One tip I usually use to increase conversion rates is to remove the header and footer of the page. Also, I see a lot of PageFly users using it.

The principle of this method is to avoid losing traffic. People are so curious. When collecting data about users behavior from Google Analytics, for a quite long time, I saw that many of them, after landing to the landing page, they click to the homepage!

When the user goes to the homepage, it means that he will hardly come back to that landing page again. The conversion rate from that landing page will drop. I call it loss of traffic. In order to avoid that, PageFly can help you hide the header and footer, which means keeping the user on that landing page only.

It’s pretty easy. From the manage page dashboard, find the page you want to remove the header and footer from. Click on the setting icon beside the page.

Check the “hide header and footer” box under Page layout, then click save. If you are using your page as a product page or homepage, make sure you do it with all kinds of pages you want.

7. Set the landing page as your homepage to get higher performance

The homepage is where you show the most interesting things about your site, featured products, and attractive deals. It’s missing if you do not prepare your homepage well.

But unfortunately, most themes do not let you freely customize your homepage. Even when you buy a premium Shopify theme at a very expensive cost, you are still stuck with their available options.

That's why PageFly was developed. To help you to transform your created landing page into a homepage, and use it under the homepage URL.

Go to Manage Page, find the page you want to set as your homepage, then check the Homepage box. 

8. Create some cool stuff with Custom CSS

PageFly will be gradually releasing new features based on user’s expectations. However, if you find some elements are missing, you can create it with custom CSS code.

I’m not an expert in coding, but creating a new element using custom CSS is possible for me. First, I use w3school.com and search for the element I want to create. They provide the exact tutorial for creating those elements. After that, go to PageFly, navigate to the Advanced element, then choose custom HTML.

Another way that you can use HTML to edit your page is using the Custom Code Editor. PageFly provides 2 fields to help you edit the custom code: CSS sectors and Javascript sectors

Conclusion

PageFly is a powerful tool and has many features that you may not have discovered yet. With a little knowledge about landing pages, marketing, and spending some hours to explore every corner of PageFly, you can definitely create a wonderful, high converting landing page.

It's a limited offer, so hurry up and

Try PageFly Now!