# QR code

### About PageFly QR Code Element

The [QR code element](https://help.pagefly.io/manual/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 Element

* Step 1: Click on the Plus icon, which is the “**Elements**” on the left menu bar
* 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.

![](/files/xtAQMw662LqX4jum33WY)

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

### How To Configure For QR Code Element?

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.

![](/files/r4QBpiEATMnQqu7kzx17)

#### General Settings

**Content**

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

![](/files/IGLG7mCUacslqFXt3IEi)

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

![](/files/wloKsy7WXEtXhscSSsNx)

**Display**

* QR code size: 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.

![](/files/sOIGHFUKvexznPjN8dlW)

* Align self: there are three alignment options available, including Left, Center, and Right

![](/files/Pn6yws0lhLA3Trjl2qUm)

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters [here](https://help.pagefly.io/manual/elements-general-settings/)

#### Styling Configuration

**Legacy Editor**

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

![](/files/bKsACtnp1n7ldXGmDQQF)

You can check more information about the Styling tab [here](https://help.pagefly.io/manual/elements-style-settings/)

**Gen 2 Editor**

{% hint style="warning" %}
**Important Note**: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ([slot plans](https://help.pagefly.io/manual/pricing-plans/)).
{% endhint %}

Note that in Gen 2 Editor, there is no alignment settings in Styling tab.

For more styling setting options, refer to [this article](https://help.pagefly.io/manual/elements-style-settings/).

### Best Practices For Using QR Code Element

* 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 Questions

**1. What does QR code stand for?**

Quick Response code

**2. Is PageFly QR code free?**

Yes, check here

**3. When is QR code invented?**

1994

**4. Who invented QR code?**

Denso Wave from Dentsu

**5. What is Store QR code?**

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.

**6. Why do I need QR code?**

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 Resources

* [How to Edit PageFly HTML Liquid Element?](https://help.pagefly.io/manual/html-liquid-element/)
* [Button element to create a stunning Call To Action](https://help.pagefly.io/manual/button-element/)
* [How to](https://help.pagefly.io/manual/image-element/) [Use Image](https://help.pagefly.io/manual/image-element/) [Element with PageFly?](https://help.pagefly.io/manual/image-element/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/page-structure-and-elements/pagefly-elements/advanced/qr-code-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.