How to Design Custom Quiz Button Images in Canva and Add Them to GoHighLevel | PrettyQuizCodes
Home ▸ Blog ▸ Quiz Button Images

How to Design Custom Quiz Button Images in Canva and Add Them to GoHighLevel

Connor Callahan June 1, 2026 5 min read

How to Design Custom Quiz Button Images in Canva and Add Them to GoHighLevel

Why Button Images Change Quiz Performance

Text-only answer buttons produce a clinical experience. The respondent reads a label, clicks it, moves on. Nothing about that sequence creates engagement. Image card buttons work differently: the respondent scans a visual, identifies with it, and clicks. The action feels like a choice rather than a form entry. For any quiz built as part of a complete how to design a GoHighLevel quiz system, adding images to the answer options is one of the highest-impact improvements available. This walkthrough covers the full process from Canva setup through URL entry in the quiz HTML.

Setting Up the Canva Design

Open Canva and create a new design using the custom size option. Set the dimensions to 200 by 200 pixels. The unit selector matters: choose pixels, not inches. At this size, the image fills the quiz card correctly without scaling issues inside the quiz code layout.

Create one page per answer option. If the question has four answers, the Canva file has four pages. Name the design something descriptive before you start: "Question 1 Images" is enough to identify it when you come back later. Name each page by button: "Q1 Button 1," "Q1 Button 2," and so on. When you have multiple questions with multiple images, this naming convention is what keeps the upload and URL-mapping process from becoming a guessing game.

Designing Each Button

Search Canva Elements for an icon or illustration that represents each answer option. The goal is a clear, simple image that communicates the answer concept at a glance. Resize the icon to fill the canvas. Use the Position tool to center it exactly. Consistent sizing across all buttons matters: when the icons are different sizes relative to their canvases, the quiz cards look uneven.

Apply the brand color using the color picker. Have the hex code ready before you start. Click the icon, open the color picker, and paste the hex code directly. Copy the completed icon from the first page to subsequent pages before swapping the icon for each answer option. This preserves the sizing and centering so you do not have to reposition each one from scratch.

Exporting Correctly

Go to Share, then Download. Select PNG format. Check the Transparent Background option before downloading. This step is not optional. The custom quiz code controls what color the button background becomes when a respondent hovers over or selects it. If the Canva image has a white or solid background baked in, the quiz code cannot override it and the selection state styling will not display. Transparent background is what allows the quiz code to take over.

Select all pages before downloading. Canva exports a ZIP file containing one PNG per page. Unzip the file to access the individual images. At this point you have four named PNG files ready to upload.

Uploading to GHL Media Storage

In GoHighLevel, go to Media Storage. Click Upload, select all four PNG files at once, and click Open. After the upload completes, do not navigate away yet. Click the three dots on the first image and select Get Link. The URL copies automatically. Repeat for each image. Write down all four URLs, or paste them into a temporary document, before leaving the media storage screen. Going back to collect missing URLs after you have opened the quiz HTML editor adds unnecessary steps.

Adding Image URLs to the Quiz Code

Open the quiz in GHL. Click the gear icon on the question you are updating. Go to Edit HTML. Scroll to the image card section for that question. Each image card has a URL field in the code. Select the existing URL in that field completely before pasting the new one. Do not use Command V without first selecting the existing URL. Pasting without selecting first does not register the new value correctly in the HTML editor. Click Yes to save after each paste.

Repeat this for each card. When all four URLs are updated, preview the quiz to confirm the images are loading. The custom code already includes behavior that turns the selected button image white when a respondent clicks it. That behavior is built into the quiz code and requires no additional configuration.

One thing worth noting before you start: the full image workflow works cleanest when all your images are finalized before you begin updating URLs in the HTML editor. Going back into Canva mid-process to adjust sizing or colors and then re-uploading creates additional URL-mapping steps that compound quickly across 16 questions. Design all images for a question set, export the full ZIP, upload all at once, collect all URLs, then open the HTML editor once and work through each card in sequence. That order keeps the process linear and avoids the back-and-forth that adds time to what should be a straightforward update.

For related customization tasks including hiding the native form and working with CSS selector paths, read customize your GoHighLevel quiz code.

Quiz code that ships ready.
Image cards, scoring, and automation built in.
GoHighLevel quiz code tool
$147 one-time · $17/mo · 10 niche systems included

Keep Reading

More on GoHighLevel quiz design and customization

Design
How to Design a GoHighLevel Quiz
The complete guide to building a custom quiz in GHL: image cards, branded styling, question types, and the design decisions that affect completion rates.
Customization
Customize Your GoHighLevel Quiz Code
Three practical tasks: swapping images in HTML, hiding the native form with CSS, and finding the correct CSS selector path using the browser inspector.
Conversions
Increase Conversions With Your GHL Quiz
How question wording, sub-headlines, answer labels, and the five UX elements work together to move more leads through to submission.

Common Questions

200 by 200 pixels. This is the standard size for image card buttons in a custom GoHighLevel quiz. Create the design at exactly this size in Canva using the custom size option with units set to pixels. Images that are a different size or aspect ratio will not display correctly inside the quiz card layout.
The custom quiz code controls what happens to the button background when a respondent hovers over or selects it. If the image has a white or colored background baked in, the code cannot override it and the hover and selection states will not display correctly. A transparent background lets the quiz code apply the correct color behavior on interaction.
Upload the images to GHL Media Storage, click the three dots on each image, and select Get Link to copy the URL. In the quiz, click the gear icon on the question, go to Edit HTML, and scroll to the image card section for that question. Select the existing URL in the image field, then paste the new URL. Do not use Command V without first selecting the existing URL or the paste will not register correctly.
Yes, if the icon concept applies to multiple questions. More commonly, each question has its own set of images that match the specific answer options for that question. Name each set by question number in Canva before downloading to stay organized. When uploading to GHL, upload all images at once and collect all URLs before going back into the quiz code.