3 min read

QR Codes #

The QR Codes tool allows customers to generate and customize QR codes directly inside the Design Studio. QR codes can be used for websites, contact information, social media profiles, product information, event registration, digital payments, and many other applications.

Instead of creating QR codes with external tools, customers can generate, customize, and position QR codes directly within their product design.

This guide explains how to configure the QR Codes tool and the customization options available in Product Designer App.

What Are QR Codes? #

A QR Code (Quick Response Code) is a two-dimensional barcode that stores information such as:

  • Website URLs
  • Contact information
  • Email addresses
  • Phone numbers
  • Social media links
  • Product information
  • Event details
  • Payment links
  • Custom text

Customers can scan the QR code using a smartphone camera or QR code scanner.

QR Code Workflow #

Typical workflow:

Open Design Studio
        ↓
Open QR Codes
        ↓
Enter QR Content
        ↓
Generate QR Code
        ↓
Customize Colors & Size
        ↓
Position QR Code
        ↓
Save Design

Enable the QR Codes Tool #

The QR Codes tool can be enabled or disabled for each Product Base.

Navigate to:

Product Base → Design Studio Settings → Tools

Enable QR Codes to display the QR Code panel in the Design Studio.

If disabled, customers will not be able to generate QR codes.

Add a QR Code #

Customers can create a QR code by entering the content they want to encode.

Common examples include:

After entering the content, the QR code is generated automatically and added to the design.

Open QR Code Menu

Edit QR Code Content #

Customers can modify the QR code content at any time.

Examples include:

  • Changing a website URL
  • Updating contact information
  • Replacing a social media profile
  • Editing promotional text

When the content changes, the QR code is automatically regenerated.

QR Code Colors #

Customers can customize the appearance of the QR code using the available color options.

Depending on your configuration, they may:

  • Change the foreground color
  • Change the background color
  • Use predefined colors
  • Match product colors
  • Apply brand colors

The preview updates instantly inside the Design Studio.

Recommended Colors #

For maximum scan reliability:

  • Use dark foreground colors.
  • Use light backgrounds.
  • Maintain strong color contrast.
  • Avoid low-contrast color combinations.

Examples of recommended combinations:

  • Black on White
  • Dark Blue on White
  • Dark Green on White

Poor color contrast may reduce scanning performance.

Resize QR Codes #

QR codes can be resized directly on the canvas.

Customers can:

  • Increase size
  • Reduce size
  • Scale proportionally
  • Position the QR code within the Design Area

The QR code remains fully editable after resizing.

Move and Rotate #

QR codes can be:

  • Moved freely
  • Rotated
  • Centered
  • Aligned with other design elements

This allows customers to integrate QR codes naturally into product layouts.

QR Code Options #

Depending on your Product Base configuration, QR codes may support the following options:

  • Edit Content
  • Change Foreground Color
  • Change Background Color
  • Resize
  • Rotate
  • Duplicate
  • Lock (if enabled)
  • Delete

Available options may vary depending on your Design Studio configuration.

QR Code Options

Combine QR Codes with Other Elements #

QR codes can be combined with:

  • Text
  • Photos
  • Artwork
  • Team Names & Numbers
  • Shapes
  • Barcodes

This makes QR codes useful for both functional and decorative product designs.

Common use cases include:

  • Business cards
  • Product labels
  • Event tickets
  • Marketing materials
  • Promotional merchandise
  • Packaging
  • Restaurant menus

QR Codes and Printing #

For reliable printing and scanning:

  • Keep QR codes inside the printable area.
  • Avoid placing important elements over the QR code.
  • Maintain adequate size for scanning.
  • Use high-contrast colors.
  • Test the QR code before publishing the product.

Product Designer App automatically exports QR codes with the final print files.

QR Codes and Pricing #

QR codes are treated as design elements.

If your Printing Type includes:

  • Element Pricing
  • Color Pricing
  • Area Pricing

The QR code may be included in the final price calculation depending on your configuration.

Pricing updates automatically as customers edit their design.

Troubleshooting #

QR Code does not appear #

Verify that:

  • The QR Codes tool is enabled.
  • QR content has been entered.
  • The Product Base has been updated.
QR Code cannot be scanned #

Possible causes include:

  • Low color contrast
  • QR code is too small
  • Design elements overlap the QR code
  • Incorrect QR content

Always test the QR code using a mobile device before production.

QR Code looks blurry #

This may occur when:

  • The exported image is low resolution.
  • The QR code has been scaled excessively.
  • Print settings are incorrect.

Verify export settings and test print files before production.

Colors affect scanning #

Some color combinations may reduce readability.

Use dark foreground colors and light backgrounds whenever possible.

Best Practices #

For the best customer experience:

  • Enable QR Codes only when needed.
  • Use clear instructions for customers.
  • Encourage high-contrast color combinations.
  • Test QR codes before publishing products.
  • Keep QR codes large enough for reliable scanning.
  • Avoid placing QR codes too close to product edges.
  • Verify exported PNG, PDF, and SVG files before production.

The QR Codes tool allows customers to add interactive and functional elements directly to their products. By combining customizable content, color controls, and flexible placement options, Product Designer App makes it easy to create professional QR-enabled designs that remain both visually appealing and fully scannable.

Video: How to Use Design Tool in Product Designer App
What are your Feelings
Scroll to Top