QR Code

About PageFly QR Code ElementClick to copy

Summary: The QR code element allows you to create an auto-generated QR code based on the text content.

This element comes with a single variation but we will continue to add more variations to help you save time.

How To Access QR Code ElementClick to copy

  • Step 1: Click on the Plus icon which is the Add element function
  • Step 2: Click on the QR Code element in the dropdown menu
  • Step 3: Drag and drop the element you want into the page editor and then start using it.

Note that you can search for this element by using the search function instead of finding it in the sidebar.

PageFly QR Code

Drag a variation to the layout and see how it can be configured.

How To Configure For QR Code Element?Click to copy

The QR Code element comes with various parameters for you to tackle to create a high-converting code for the page. Select the element in the layout to see its parameters.

PageFly QR Code

General SettingsClick to copy

  • Content: Input the content that appears on users’ devices when they scan the QR code.

PageFly QR Code

  • Alt-Text: Input the text for the ALT HTML tag attribute for SEO.

PageFly QR Code

  • Dimensions: Adjust the size of the QR code by dragging the black dot or by entering a number in the box on the right. Please note that the maximum size for a QR code is 500 px.

PageFly QR Code

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here.

Styling ConfigurationClick to copy

AlignmentClick to copy

There are three horizontal alignment options available: left, center, right.

PageFly QR Code

SpacingClick to copy

  • Padding: adjust the inner spacing of the QR code’s container
  • Margin: adjust the outer spacing of the QR code’s container

PageFly QR Code

BorderClick to copy

  • Border style

There are 3 border styles for QR code element, which are: solid, dotted, dashed

PageFly QR Code

  • Border color: you can adjust the color of each border and click More settings to see more parameters. Please note that this setting is available if you select one out of 3 border styles above.

PageFly QR Code

DisplayClick to copy

There are three Display styles: Inline, Block, Flex.

PageFly QR Code

You can check more information about the Styling tab here.

Best Practices For Using QR Code ElementClick to copy

  • Ensure the QR code has a clear purpose and call to action (CTA). What action do you want users to take after scanning it (e.g., visit website, download app, access special offer)?
  • Use a high-quality QR code image generated from a reputable source
  • Place clear text near the QR code that instructs users to scan it and explains the intended action

Frequently Asked QuestionsClick to copy

QR Code Stands for?Click to copy

Quick Response code

Is PageFly QR Code Free?Click to copy

Yes, check here

When Is QR Code Invented?Click to copy


Who Invented QR Code?Click to copy

Denso Wave from Dentsu

What Is Store Qr Code?Click to copy

This is a code added to your Shopify store by PageFly QR Code. This is a tool to help sellers to generate more traffic to Shopify store, and help to increase sales conversions.

Why Do I Need Qr Code?Click to copy

It’s very easy to find stores, products, locations and general information using PageFly QR Code, you can customize QR Code using PageFly, also this is a trackable tool so you could measure your store performance. You should use the Code to both generate new traffic, and to engage better with current shoppers.

Additional ResourcesClick to copy

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us