PageFly Section Best Practices

PageFly sections are a great way to create beautiful and effective Shopify pages quickly and easily. Let’s discover the art of effective page design with our in-depth guide on “PageFly Section Best Practices”. From layout optimization to creative styling, this resource offers expert insights and practical tips to enhance your page design skills with PageFly sections.

Uncover the key strategies for harnessing the full potential of PageFly sections, including:

How to use PageFly Saved section

PageFly Saved Section feature is created to save you hours of design work. It lets you save an existing section or create a new one and re-use it on all of your PageFly or Shopify pages. Saved sections can be used in multiple pages and will automatically sync with the original section.

If you want to show content from PageFly inside an existing Shopify page, you cannot directly embed a PageFly section into that page. Instead, save the section in PageFly, publish it, then add the saved section to the Shopify page. This lets the PageFly content appear on the existing Shopify page without changing the page URL or creating a separate PageFly page.

You can check more details in the video tutorial below:

If you move elements or change the overall structure, those changes can also affect desktop because the layout is shared across devices.
If your live mobile page looks different from the editor, check the preview or publish the page/section, because saved changes are not reflected on the live page until published.

For more details about responsive editing, please check:

https://help.pagefly.io/page-structure-and-elements/editor/user-interface/make-my-page-mobile-responsive

Let’s discover how to make a sticky section in PageFly without the need for custom CSS coding by watching this video below:

How to make a Full Width section in PageFly

With PageFly, you can easily create a full-width section on your Shopify page to create a visually impactful and immersive design that spans the entire width of the screen.

We recommend watching this video tutorial to create Full-width Section on PageFly Pages:

How to add a background image to a page or section

To add a background image, first select the page section or container where you want the image to appear, then open the Styling settings and choose a background image. If you want the image to display fully without being cropped, set Background size to contain.

If you are trying to make the image fill the whole page, add the background image to a full-width section first, then adjust the background size based on the result you want.

How to Add Text on Image (Create a Hero Banner section) in PageFly

In this tutorial, you will learn how to build a section with image and text from scratch, including how to control its layout and design elements such as font, size, color, alignment, and spacing.

How to Add Text on Image (Create a Hero Banner section) in PageFly

In this tutorial, you will learn how to build a section with image and text from scratch, including how to control its layout and design elements such as font, size, color, alignment, and spacing.

If you want the banner content to align better with other sections on the page, you can set the slider's inner container to the same maximum width as the rest of your content. If you need the text to move further left or right, adjust the content container's max width and spacing settings.

Learn to build sections with image and text in this video tutorial below:

.loox-review > div {
  width: 100% !important;
}

#offer .sc-fqbGQC.hIzRwx {
  width: 100% !important;
}

.cePmbg {
  width: 100% !important;
}

Use the selector that matches the embedded app element on your page, then save and publish the page.

How to Add Text on Image (Create a Hero Banner section) in PageFly

In this tutorial, you will learn how to build a section with image and text from scratch, including how to control its layout and design elements such as font, size, color, alignment, and spacing.

Learn to build sections with image and text in this video tutorial below:

How to eliminate horizontal scrolling

If your page has unwanted horizontal scrolling, you can add the following CSS:

html, body {
  overflow-x: hidden !important;
}

This hides horizontal overflow across the page.

How to use and customize option swatches in PageFly

PageFly supports option swatches for product options. Swatch colors are pulled directly from Shopify, so they need to be created and managed in Shopify first. In PageFly, you can then adjust the swatch display style, for example changing the swatch shape to circles.

For step-by-step guidance, check these tutorials:

https://www.youtube.com/results?search_query=option+swatches+PageFly

How to add a Flex block to your layout

If you want to create this type of layout manually, add a Flex block first, then place your content inside it. In the PageFly editor, drag the Flex block element into your page layout, then add the needed elements inside the block and adjust their size and alignment from there.

How to create a Featured Products section

You can create a featured products section in PageFly in two common ways:

Add a Product List element to your page.
Choose which products you want to display in that list.
If needed, add the product view link for each product in the Product List settings.

If you do not have real products yet, you can use placeholder products first and replace them later.

Alternatively, you can build a similar layout with a Content List element if you want to manually recreate the design.

Mobile: 1080 × 1350 px (4:5)
If you need one image ratio that works across both desktop and mobile, use 4:3.

Learn to build sections with image and text in this video tutorial below:

bottom: 0% !important;

If you want the sticky section to appear only after visitors scroll down the page, add this code in the page custom JS block:

```javascript
document.addEventListener("DOMContentLoaded", function () {
  const sticky = document.querySelector(".sticky-sec");
  if (!sticky) return;

  sticky.style.opacity = "0";
  sticky.style.pointerEvents = "none";
  sticky.style.transition = "opacity 0.3s ease";

  function handleScroll() {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;

    if (scrollPercent >= 5) {
      sticky.style.opacity = "1";
      sticky.style.pointerEvents = "auto";
    } else {
      sticky.style.opacity = "0";
      sticky.style.pointerEvents = "none";
    }
  }

  window.addEventListener("scroll", handleScroll);
});

Update the value in if (scrollPercent >= 5) to control when the sticky section appears. Increase the number to show it later, or decrease it to show it earlier.

You can also add spacing above a sticky block by setting a top value such as top: 50px;.

How to make a Full Width section in PageFly

With PageFly, you can easily create a full-width section on your Shopify page to create a visually impactful and immersive design that spans the entire width of the screen.

How to use Premade section in PageFly

We recommend watching this video tutorial to create Full-width Section on PageFly Pages:

Mobile layout tips

If your layout does not display correctly on mobile devices, first check whether the issue happens on a PageFly page only or also on default theme pages.

Learn to build sections with image and text in this video tutorial below:

Using a slideshow to display 3 slides

If you are using the Slideshow element, you cannot set the number of displayed items to be equal to or greater than the total number of slides. For example, if your slideshow has 3 slides in total, it can only be set to display up to 2 slides at once.

If you want to show all 3 items in one row on desktop, use the Content List element instead of the Slideshow element.

Landing page strategies to improve conversion

Here are some proven landing page strategies you can apply when designing a sales page in PageFly:

Start with a strong hero section

Use a clear, benefit-focused headline, a simple CTA button, and optionally a video to explain the offer quickly.

Add social proof

Include testimonials, star ratings, or customer photos to build trust and reduce hesitation.

Highlight a focused product selection

Feature 4 to 6 bestsellers and make offers easy to understand, such as showing clear savings.

Use urgency elements carefully

Countdown timers or stock counters can help encourage action when they match the offer.

Keep a sticky CTA visible

A sticky Add to Cart or call-to-action section can stay visible while visitors scroll.

Optimize for mobile

Make sure the page is easy to navigate and works smoothly on mobile devices, since a large share of traffic comes from mobile.

Test and improve over time

Try different layouts, offers, images, or CTA wording with A/B testing to find what performs best.

If you want to create a sticky section without code, follow this guide:

Page speed tips

If your page is loading slowly, these checks can help improve performance:

Optimize image sizes: Large or unoptimized images can slow down loading, especially on mobile.
Reduce page size where possible: A lighter page structure can improve loading time.
Remove unused JavaScript: Background scripts that are not needed can negatively affect page speed.
Review third-party apps: Some apps can cause slow loading or page crashes. Disable the app temporarily or contact the app provider for support if needed.
Use static images instead of slideshow background images when speed is critical: Slideshow background images are initialized after JavaScript runs, so they may appear later than the rest of the page.
Add a visible fallback image before a slideshow loads: This can improve perceived loading speed for visitors.

For more details, check the Page Speed Optimization guide:

https://help.pagefly.io/page-structure-and-elements/optimization/pagespeed-optimization

How to align icons and headings in PageFly

If icons or heading content are not aligned correctly in the editor or on the live page, you can adjust the layout with custom styling:

For heading elements, add the following in the element's Advanced CSS to keep the icon and text aligned on one line:

display: flex;

For mobile alignment issues, you can apply custom CSS like this:

@media(max-width: 767px){
  #pf-custom{
    align-items: center !important;
  }
}

If you need to build a group of icons and text that keeps its size and alignment better when duplicated, create the layout with a Flex block first.
If content is cut off on mobile or the page drifts horizontally, review row and element widths and make sure they do not exceed 100% on mobile.
If the issue only affects one PageFly page, adjust the section and element spacing, alignment, and responsive visibility in the PageFly editor, then republish the page.

How to Add Text on Image (Create a Hero Banner section) in PageFly

In this tutorial, you will learn how to build a section with image and text from scratch, including how to control its layout and design elements such as font, size, color, alignment, and spacing.

Let’s discover how to make a sticky section in PageFly without the need for custom CSS coding by watching this video below:

How to make a Full Width section in PageFly

With PageFly, you can easily create a full-width section on your Shopify page to create a visually impactful and immersive design that spans the entire width of the screen.

We recommend watching this video tutorial to create Full-width Section on PageFly Pages:

How to Add Text on Image (Create a Hero Banner section) in PageFly

In this tutorial, you will learn how to build a section with image and text from scratch, including how to control its layout and design elements such as font, size, color, alignment, and spacing.

In this tutorial, you will learn how to build a section with image and text from scratch, including how to control its layout and design elements such as font, size, color, alignment, and spacing. If you want text to overlap a banner image, you can use a section background image instead of a separate image element, then place the text content inside that section.

Learn to build sections with image and text in this video tutorial below:

Troubleshooting image upload issues in PageFly

If your image appears briefly while selecting it but becomes blank afterward, make sure you click Done to confirm the image selection before saving the page.

If the image uploads in the editor but disappears after publish or refresh, try these steps:

Re-select the image and publish the page again.
Clear your browser cache and restart the browser.
Check the page again in an incognito/private window.

If you see a File type is not valid error, first verify that the image format is supported by Shopify.

If the uploaded image looks different from other images on the page, check the image ratio. For example, a square image may be needed to match other square images in the same layout.

Adjust layout and spacing of elements in PageFly

To adjust the layout and spacing of elements in PageFly, use the settings in the element's Styling tab.

Resize an element or image: Open the element, then reduce or increase its size from the Styling tab.
Center an element: After resizing, use the alignment setting to center the element.
Adjust spacing: Select the element and change the Margin value to increase or reduce the distance around it.
Make an image round: Set the image to a square ratio first, then go to Styling > Border and set Border radius to 50%.
Fix uneven element height or alignment: In some layouts, the width of a column affects how elements align on desktop. Adjust the column width if the element cannot be resized directly.
Background image spacing issue: If a background image shows blank space when Background attachment is set to fixed, either upload a taller image or disable Background attachment: fixed and show the image in full size.

If your live page looks different from the editor, check whether custom code in your theme or page is affecting the layout.

Reduce page size to stay within Shopify's 256 KB limit

If your page shows a Template content exceeds 256 KB limit or Page Size Limit error, it means the page structure is larger than Shopify's allowed limit.

To reduce page size:

Delete unnecessary sections or elements

Remove unused content, especially extra sections, nested blocks, flex blocks, and hidden sections. Hidden sections still count toward the page size, so hiding them will not help.

Simplify the page structure

Too many containers, sections, and nested elements increase the page size. Combining separate desktop/mobile sections into a simpler responsive structure can help reduce the total size.

Optimize media files

Compress images, GIFs, and videos before uploading.

Reduce Product List content if needed

Showing fewer products in a Product List can help reduce page size.

Back up the page before making large changes

You can duplicate the page from the PageFly dashboard or export it before deleting sections.

Important notes

Page size is affected by the overall page structure, not only by image file size.
Saved sections and global sections still affect the total page size once added to the page.
If the page is over the limit, removing sections completely is required. Hiding sections does not reduce the published HTML.
In some cases, PageFly support can check the current page size, but the editor does not always show an exact size directly.

Updated on: 20/04/2026

Was this article helpful?

Thank you!