Add QR Code Shopify Custom Coding – Verified Easy Methods

Using this method you can generate QR codes for products, discount codes etc. When user scan this QR code user can see the details of the product if it is the product QR code. In this method you can use the QR code generator tools like QRServer to generate the QR code and add this into the theme using liquid. Here is the final result, check the GIF below to see how it will look before we go through the steps.

Follow these steps to Add QR code By Goqr.me

Step 1: Navigate to Online Store > Themes > Edit Code

Step 2: Go to the main-product.liquid file or product.liquid depending on the theme you are using.

Step 3: Add the following code in your desired place where you want the QR code to appear in your storefront.

  
    <div class="qr-code-wrapper">
        <img
            src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ shop.url | append: product.url | url_escape }}"
            alt="QR Code for {{ product.title }}">
        <p>Scan to view this product</p>
    </div>

  

Add the following css optional if you want some styling in your theme.css or base.css file based on the theme. Or directly included into the product.liquid file between <style></style> tags.

    
        <style>
            .qr-code-wrapper {
                text-align: center;
                margin-top: 20px;
            }
            .qr-code-wrapper img {
                border: 1px solid #ddd;
                padding: 10px;
                background: #fff;
            }
        </style>

    

Step 4: Click Save to save the changes.

Method 2: QR Code for Discount Links

Discounts in the online Store play a vital role for customer trust and increase conversions. You can create the QR code for different discounts and sent to the user via email, social media plat form or using the promotional banner inside the website. User have to scan the code to get the discount. Here is the final result, check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Shopify Admin > Discounts

Step 2: Click on the Create discount button and choose the type of discount you want to add from the list.

Step 3: For discount code use discount code tab add code of your choice like Summer20. Add the discount value and select the collections or products based on your requirements.

Step 4: Click Save.

Step 5: Click on Promote and click on Get a shareable link 

Step 6: Copy your discount code link from here.

Step 7: Got to QR code generator website and paste your code here

Step 8: Click on the Embed button.

Step 9: Adjust the size of the QR code and other settings according to the needs and copy the HTML embed code.

Step 10: Paste this code in your theme at the desired location like announcement bar, promotional banner etc. or you can send to the customer via emails as well. 

  
        <img class="qr-code__image"src="https://api.qrserver.com/v1/create-qr-code/?color=000000&bgcolor=FFFFFF&data=https%3A%2F%2Ftest-shop-schema-markup.myshopify.com%2Fdiscount%2FFree30&qzone=1&margin=0&size=150x150&ecc=L" alt="qr code" />
        <style>
            .qr-code__image {
                text-align: center;
                border: 1px solid #ddd;
                padding: 10px;
                display: block;
                margin: 0 auto;
            }
        </style>
  

Step 11: For example OS 2.0 theme click on add section and add custom liquid section in your page where you want to show.

Step 12: After adding embed code click Save. Add appropriate css for styling as per your requirements.

Method 3: Create a Custom Section for QR Code 

If you want more flexibility and freedom, you can create a custom Shopify section that can be placed anywhere on your website. For this, you’ll need coding knowledge. Navigate to Shopify Admin > Themes > Edit code, and in the Sections directory, create a new section and name it something like custom-qr-code-section. Add the coding logic for the QR code and save the changes. Follow these steps to add a custom section in your Shopify store.

Step 1: Navigate to Online store > Themes > Edit code 

Step 2 : Create a new section and name it like custom-qr-code.liquid.

Step 3: Add this code here.

  
    {% if section.settings.qr_link != blank %}
        <div class="qr-section">
        <img 
            src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ section.settings.qr_link }}" 
            alt="QR Code" width="" height="" loading="eager">
        <p>{{ section.settings.caption }}</p>
        </div>
    {% endif %}
    {% schema %}
        {
            "name": "QR Code Section",
            "settings": [
                {
                    "type": "url",
                    "id": "qr_link",
                    "label": "Link to Encode"
                },
                {
                    "type": "text",
                    "id": "caption",
                    "label": "Caption",
                    "default": "Scan the code"
                }
            ],
            "presets": [
                {
                    "name": "QR Code"
                }
            ]
        }
    {% endschema %}

  

Step 4: Click Save.

Step 5: Navigate to Online Store > Themes > Customize

Step 6: Add this Section in your desired page.

Step 7: Add a link here for which you want to generate QR code. And add css additionally for your styling(Optional).

Step 8: View your Online Store to see the results. 

Method 4: Use Shopify QR Code Generator Apps for Advanced Customizations 

If you are not comfortable with coding then you can install shopify apps from the Shopify app store and configure it using theme editor. Link this app with your store using App embed setting.  Here is the final result, check the GIF below to see how it will look before we go through the steps.

Follow these steps to add Shopify apps for the QR code from Shopify theme store.

Step 1: Navigate to Shopify Admin > Apps

Step 2: Click on All recommended apps button here.

Step 3: Navigate to the Shopify app store using this link.

Step 4: search for the app you want to add eg. o2o QR Code Unlimited app.

Step 5: Click on the Install button 

Step 6: Open the app settings and click on this Create your first QR code button.

Step 7: Choose the type of QR code you want to generate for example home page product page etc.

Step 8: Add name of the Code and set conditions like auto apply discount when scanned and add the discount code here which you created in the Shopify Admin.

Step 9: Download QR code image from here.

Step 10: Add this image into your store using Theme Customizer or directly add this using Shopify assets. Draq and drop file to this folder.

Step 11: Navigate to the file where you want to add it and add this code for example in the announcement bar and style it according to the need.

  
    <img style="display: block; margin: 0 auto;" src="{{ 'QR_code_1.png' | asset_url }}" width="200" height="200" alt="QR code">
  

Apps like 

1. K: QR code generator hub
2. O2o QR code Unlimited
3. Spice QR code Generator
4. Super QR code generator

Bottom Line 

Adding QR codes to your Shopify store is a smart and practical way to improve user experience and boost mobile engagement. Whether you're guiding customers to a product page, offering instant discounts, or supporting offline marketing with scannable links, the methods above cover every need from basic embeds to app-powered customizations.