Add Images to Your Answer Options

Include visuals alongside your answer options, enhancing clarity and helping your prospects better understand each choice.

Whether you’re highlighting different styles, materials, or product variations, this feature will bring your pricing estimators to life.

Here’s how to get started:

Step 1: Edit Your Price Estimator:

Open the price estimator you want to update and navigate to the question where you wish to add images.

Step 2: Access the Image Upload

Click on the gear (COG) icon next to the answer option.

Step 3:  Upload Your Image

Choose a square image (800 × 800 px recommended) for best results. It technically can be any size, but square images display best across devices.

IMPORTANT:
Keep each image under 200 KB so it loads quickly on all devices.

If your image is bigger than this, consider:

1. Resizing the image down to around 800 px × 800 px.

2. Use an image compressor to shrink the file size. A good, free and simple to use one can be found at https://www.websiteplanet.com/webtools/imagecompressor/

3. Use the crop tool if needed to keep it perfectly square (1:1)

Step 4: Pick your Image Style (Dark or Light)

Under Image style, choose the look that fits your imagery:

Dark – Adds a soft dark gradient over the image.
Best for photos because it keeps labels easy to read.

Light – No gradient with a white background.
Best for icons or simple graphics.

Icon size rule (important):
If you’re using icons, upload them at max 75px wide. Larger icons will stretch across the card.

Quick tips

• Photos hard to read? Switch to Dark for better contrast.

• Icons looking dull on Dark? Use Light so they stay crisp.

• Use transparent PNG or SVG for icons when possible.

• Always preview on mobile before publishing. 

Common fixes

• Icon looks huge? Re-export at ≤ 75px wide and re-upload.

• Label hard to see on a photo? Choose Dark style.

Step 5:  Add a Description (Optional)

You can also include a text description. The layout will adjust automatically based on the image size and text length.

Step 6: Save Your Changes

Click ‘Save’ to finalize your updates.

We can’t wait to see how this new feature enhances your pricing estimators!

Best Image Sizes (Square)

Pick one standard and use it everywhere for a clean look:

• Lightweight (recommended): 800 × 800 px
• Ultra‑light: 600 × 600 px (smallest acceptable)
• High‑resolution: 1200 × 1200 px (only if needed)

Tip: Bigger isn’t better—small file sizes load faster and keep your estimator snappy.

File Types & Backgrounds

• WebP (best balance of quality + size)
• JPG (great for photos)
• PNG (use when you need a transparent background, like icons)
• Avoid animated GIFs for answers (heavier, distracting).

Safe‑Area & Layout Tips

• Keep key content inside a central safe area (don’t hug the edges).
• Leave a little breathing room around the subject.
• No borders needed—let priceguide’s layout handle spacing.
• If you must include text in the image, keep it large and minimal.