---
title: QR Code Customization
description: "Design and personalize your QR codes visually using our advanced plugin settings page with **live preview**. This guide explains each feature available for customizing the look, behavior, and download options of your QR code. --- ## Design QR Code ###…"
url: "https://wordpressqrcode.com/docs/qr-design/"
updated: "2025-07-25"
category: WordPress QR Code
---

# QR Code Customization

Design and personalize your QR codes visually using our advanced plugin settings page with **live preview**. This guide explains each feature available for customizing the look, behavior, and download options of your QR code.

---

## Design QR Code

### **Body Dot Shape**

Customize the main body of the QR code using dot styles and gradient effects.

[![QR body Shape](https://wordpressqrcode.com/wp-content/uploads/2020/12/bosy-shape-min.png)](https://wordpressqrcode.com/wp-content/uploads/2020/12/bosy-shape-min.png)

- **Choose Design**:
   Select from 6 unique body dot shapes. The preview will instantly update as you choose different styles.
- **First Color**:
   Main body color. Use the same color for both fields if you prefer a solid fill.
- **Second Color**:
   Secondary color for gradient effect.
- **Type**:
   Choose between `Linear` or `Radial` gradient types.
- **Rotation**:
   Set the rotation angle of the gradient (0°–360°).
- **Level**:
   Error correction level of the QR code. Default is `L` (Low).

---

##  QR Code Eye Frame

The **Eye Frame** is the outer box of the three position markers in a QR code.

[![QR Eye Ball Shape](https://wordpressqrcode.com/wp-content/uploads/2020/12/eyeball-min.png)](https://wordpressqrcode.com/wp-content/uploads/2020/12/eyeball-min.png)

- **Choose Design**:
   Select from 4 predefined eye frame shapes.
- **First Color** & **Second Color**:
   Define gradient colors. Use the same color twice for a solid design.
- **Type**:
   Choose `Linear` or `Radial` gradient.
- **Rotation**:
   Set the gradient rotation (0°–360°).

---

##  QR Code Eye Ball

The **Eye Ball** is the center dot inside each of the QR code's three eye frames.

[![QR Eye Ball Shape](https://wordpressqrcode.com/wp-content/uploads/2020/12/eyeball-min.png)](https://wordpressqrcode.com/wp-content/uploads/2020/12/eyeball-min.png)

- **Choose Design**:
   Select from 3 customizable eyeball styles.
- **First Color** & **Second Color**:
   Gradient or solid fill options.
- **Type**:
   Linear or radial gradient.
- **Rotation**:
   Adjust the gradient direction from 0°–360°.

---

## QR Code Shape + Border + Label

Control the overall layout and framing of the QR code.

[![QR Code Label](https://wordpressqrcode.com/wp-content/uploads/2020/12/QR-Code-Label.png)](https://wordpressqrcode.com/wp-content/uploads/2020/12/QR-Code-Label.png)

### **Shape & Style**

- **Choose Shape**:
   `Circle` – rounded edges
   `Square` – traditional design
- **Add Border or Label?**:
   Enable/disable the full customization of borders and labels.

---

### **Border Customization**

- **Border Round**:
   Value range: `0` (square) to `1` (fully rounded). Only applies when shape is circle.
- **Thickness of Border**:
   Set in pixels. Controls the border thickness around the QR code.
   ⚠️ *Recommended: Keep the Margin ≥ Thickness.*
- **Margin**:
   Adds clear space (padding) between the QR code and its border or background.
- **Dasharray**:
   Defines dashed border style using `dash width dash count`.
  - `0 1`: No border
  - `0 0`: Solid border
  - Custom values for dotted/dashed effect (e.g., `3 6`)
- **Border Color**:
   Use the color picker to select your border color.

---

### **Top & Bottom Labels**

#### **Top Label**

- **Enable Label for Top?**: Yes / No
- **Input Text**: Label text (e.g., your brand name)
- **Font Size**: Set the font size in pixels
- **Text Color**: Pick a color using the color selector

#### **Bottom Label**

- **Enable Label for Bottom?**: Yes / No
- **Input Text**: Text below the QR code (e.g., “Scan Me”)
- **Font Size**: Font size in pixels
- **Text Color**: Color of the bottom text

---

##  QR Code Size & Background

Customize the display and download dimensions of your QR code.

[![Size and bg](https://wordpressqrcode.com/wp-content/uploads/2020/12/size-and-bg-min.png)](https://wordpressqrcode.com/wp-content/uploads/2020/12/size-and-bg-min.png)

- **QR Code Frontend Size**:
   Set the display size of the QR code on the frontend (in pixels).
- **Download QR Code Size**:
   Set the resolution/quality of the downloadable QR image.
- **Background Color**:
   Set a background color for the QR code. Transparent by default.
- **Margin**:
   Additional spacing between the background and QR graphic.
- **Animation Preloader**:
   Optionally enable a CSS-based preloader animation while the QR code loads.

---

## Add Logo & Download Button

### **Add Logo to QR Code**

[![QR Logo](https://wordpressqrcode.com/wp-content/uploads/2020/12/logo-and-down-min.png)](https://wordpressqrcode.com/wp-content/uploads/2020/12/logo-and-down-min.png)

- **Upload Logo**:
   Click the upload button to select a logo from the WordPress Media Library.
- **Logo Size**:
   Scale the logo from `0.1` (small) to `1.0` (full size relative to the QR area).
- **Margin**:
   Adjust spacing between the logo and QR content.

---

### **Setup Download Button**

 

- **Enable Download Button**:
   Allow users to download the generated QR code as an image.
- **Download File Name**:
   By default, the file name is based on the page title or URL. Enter a custom name if needed.

---

## Live Preview

All design changes are instantly reflected in the preview panel so you can visualize the QR code before using or downloading it.