Table of Contents

PageFly 4.18.0: Improving Color Picker, Content List Items' Styling Synchronization & Updating Global Styles

当社の事業は、アフィリエイトから得られる手数料によって支えられています。 詳細

Hi there,

Richard here from the PageFly team! We are thrilled to announce the release of PageFly version 4.18.0. The latest update brings many exciting improvements, focusing on enhanced user experience and design flexibility. With a revamped Color Picker, essential improvements for Content List Items' Styling Synchronization, and key updates to Global Styles, this release ensures building high-converting Shopify pages is more seamless than ever. 

We've also addressed several bugs, including style conflicts between the Global Style Canvas and Polaris, as well as issues with the button not applying styles properly from Global Styles in live view, ensuring a smoother and more reliable editing experience.

Whether you are a beginner or an advanced merchant, these updates empower you to create visually stunning storefronts with less effort. Let’s dive into what’s new and how these changes elevate your PageFly experience.

Improving Color Picker with Gradients

What’s New

In previous versions, PageFly only offered a solid color picker, limiting design flexibility to flat, single-color backgrounds. This restricted users from experimenting with gradient-based designs—a popular trend for modern e-commerce storefronts.

With PageFly 4.18.0, the new gradient-enabled Color Picker allows users to create dynamic, multi-tone visuals. Key updates & benefits of this latest update include:

  • Gradient support: Users can apply multi-color gradients without external design tools, enabling more visually engaging sections and banners.
  • Color stop control:You can now set a maximum of 10 color stops, controlling exactly where colors change within the gradient.
  • Precise positioning:Adjust stop positions from 0% to 100% to fine-tune how gradients transition, ensuring brand consistency across elements.
  • Background Gradient parameter:This new parameter in the Page Editor’s Styling tab simplifies the application of gradient background colors to various elements.

The solid color picker

Old color picker

The new gradient color picker

The new gradient color picker in PageFly 4.18.0

How It Works

  • With color stop, users can control exactly where colors change within the gradient
  • The gradient color stops can be precisely positioned with percentage values ranging from 0% to 100%, offering fine-tuned control over transitions between colors
How the color picker works in PageFly 4.18.0
  • Customizing color stops within a wide range of color code
  • Applying gradient background colors to various elements in PageFly's Styling tab
Applying gradient background colors in PageFly 4.18.0

Updating Content List Items' Styling Synchronization

What’s New

The Styling Synchronization feature has been simplified in PageFly 4.18.0 to make it more intuitive and user-friendly with only 2 options. In previous versions, the styling synchronization process was more rigid, with more complex styling synchronization options (Sync to master, Unsync Content List Item element only & Unsync Content List Item and all children). Now, the latest update offers clearer synchronization controls.

 Key updates & benefits of this new update include:

  • Simplified Controls: The two-option Sync item setting removes complexity, making it more intuitive and user-friendly.
  • Increased Flexibility: The new Object Unsync parameter gives users finer control over which elements stay synchronized and which can be independently styled.
  • Cleaner Interface: The Object Unsync parameter only appears when needed, ensuring a clutter-free workspace by displaying relevant settings at the right time.

How It Works

  • The new Styling Synchronization feature in the Content List Item offers two options: selecting "Yes" will sync the styling across all content list items, ensuring consistency, while choosing "No" allows you to disable synchronization for a specific item, giving it a unique, independent style.

    The two-option Sync item setting eliminates confusion, making the process easier for users to understand and use.

    Updating Content List Items' Styling Synchronization
    • The new Object Unsync parameter allows more precise control over which elements maintain synchronized styling and which do not. Object Unsync Parameter only appears when the “No” option is selected for the Sync item.
    Object Unsync parameter in PageFly 4.18.0
    • Users now have two options for unsyncing objects: "Container" will unsync just the content list item, leaving its child elements still synced, while "All" completely unsyncs both the item and its child elements, allowing for total styling freedom.

      Updating Global Styles

      What’s New

      With the release of PageFly 4.16.0, the Gen 2 Editor with Flex Layout (Beta) introduced a modern framework that gave users greater design control.

      The Global Styles feature has received several key upgrades in PageFly 4.18.0 to enhance its compatibility with the Gen 2 Editor and provide users with more flexibility in managing their designs. In previous versions, users can only upload & manage their custom fonts in Global Styles. With this update, users can also view and upload custom fonts directly within the Page Editor, which makes the process less time-consuming.

      In addition, the following improvements are introduced in PageFly 4.18.0 updates:

      • New Container Elements in Global Styles: This element provides better structure and control for layouts, ensuring seamless styling across different page components.
      • New Field Element in Global Styles: This element ensures greater consistency across forms and interactive fields throughout the website.

      Upload custom fonts only in Global Styles in the old version

      Upload custom fonts only in Global Styles in the old version

      Upload custom fonts right in the Page Editor

      Upload custom fonts only in Global Styles in PageFly 4.18.0

      How It Works

      • Uploading custom fonts to individual elements or sections in Page Editor
      • Accessing the Global Styles settings to use the new Container elements for Flex-based sections
      New container element in PageFly 4.18.0
      • Configuring Field elements to standardize the design of input fields in Global Styles, ensuring uniformity across all forms on your site
      New field element in PageFly 4.18.0

      Final thoughts

      The PageFly 4.18.0 update offers powerful new capabilities that elevate the design experience for Shopify merchants. With features like gradient support for color pickers, refined synchronization options, and enhanced Global Styles, users can enjoy greater flexibility and control over their storefronts. These improvements reflect PageFly’s dedication to providing tools that are both easy to use and aligned with modern design needs.

      Ready to take your Shopify store to the next level? Install the PageFly app today to explore all the new features in PageFly 4.18.0 and start building pages that captivate customers and drive conversions.

      Don’t forget to visit our blog to catch up on previous updates, including:

      Explore Now