How to add text and branding

Text is one of the most powerful tools in your product image toolkit. A well-placed price tag, a bold product name, or an eye-catching sale badge can turn a plain photo into a conversion-driving asset. This guide walks you through adding, styling, and managing text in the PixelFiddler template editor.

Adding a text layer

There are two ways to add text to your template.

Option A — Keyboard shortcut: Press T on your keyboard. Your cursor changes to a crosshair, ready for you to draw a text box.

Option B — The toolbar: Click the + button in the toolbar and select Text from the menu.

Once the text tool is active, click and drag on the canvas to draw the area where your text will appear. A new text layer is created instantly with placeholder content, and the Properties panel on the right opens with all available text settings.

Adding a text layer to the canvas

Editing text inline

To change what your text says, double-click the text layer directly on the canvas. This opens inline editing mode so you can type your content right where it will appear. Click anywhere outside the text box when you are done.

You can also type your text in the Properties panel using the text content field, which is useful when working with longer text or when you want to see the full content without zooming in.

Text properties

Select any text layer to see its full set of properties in the Properties panel on the right side of the editor.

Text content

The large textarea at the top of the panel controls what the text says. Type your product name, price, tagline, or any other content here. Changes appear on the canvas in real time.

Font family

Click the Font family dropdown to browse and select from the full Google Fonts library. You have access to hundreds of professional fonts at no extra cost. Type to search for a specific font name.

Choosing a font from the Google Fonts library

Font weight

Control how thick or thin the letters appear. The value is a number where 400 is normal weight and 700 is bold. Some fonts support additional weights like 100 (thin), 300 (light), 500 (medium), 800 (extra bold), and 900 (black).

Text color

Click the color swatch to open the color picker. Enter a hex color value directly (for example, FF0000 for red or 000000 for black) or use the visual picker to find the right shade. Your brand colors work perfectly here.

Text opacity

Adjust how transparent the text appears, from 0 (fully invisible) to 100 (fully solid). Lower opacity values let the background image show through the text, which is useful for subtle watermarks or understated labels.

Background color and opacity

Add a solid background color behind your text to improve readability. This is one of the most useful features for e-commerce images where text needs to stand out against busy product photos.

Background color — Pick any hex color for the rectangle behind your text
Background opacity — Control how transparent that background rectangle is

Text with a semi-transparent background for contrast

Text alignment and position

Choose from 9 alignment options that combine horizontal and vertical positioning:

	Left	Center	Right
Top	Top-left	Top-center	Top-right
Middle	Middle-left	Middle-center	Middle-right
Bottom	Bottom-left	Bottom-center	Bottom-right

This controls where the text sits within its layer bounds. For a centered product name, choose Center / Middle. For a price tag in the corner, try Right / Top or Left / Bottom.

Adding effects to text

Text layers support visual effects that add depth and polish to your designs.

Shadow

Add a drop shadow to make text stand out from the background. In the Effects section of the Properties panel, you can control:

Shadow color — Usually black or a dark shade works best
Shadow blur — Higher values create a softer, more diffused shadow
Shadow offset (X and Y) — Move the shadow horizontally and vertically
Shadow opacity — How dark or subtle the shadow appears

A subtle shadow (2—4 px blur, slight offset, 40—60% opacity) gives text a natural sense of depth without looking overdone.

Border and stroke

Add an outline around your text characters using the border/stroke effect. This is great for creating bold, outlined text that stays readable against any background. Choose a contrasting stroke color — for example, a white stroke around dark text, or a black outline around bright text.

Text with shadow and stroke effects applied

Styling text for e-commerce

Here are practical text recipes for the most common e-commerce use cases.

Price tags

Make prices impossible to miss:

Font weight: 700 (bold)
Font size: 36—48 px
Text color: A bright, attention-grabbing color like red (FF0000) or your brand accent color
Background: White or dark background at 80—100% opacity for strong contrast
Position: Bottom-right or top-right corner

Product names

Keep product titles clean and professional:

Font family: A clean sans-serif font like Roboto, Open Sans, or Montserrat
Font weight: 400 (normal) or 500 (medium)
Font size: 24—32 px
Text color: White or dark text depending on the image
Position: Center-bottom or center-top
Background: Optional semi-transparent background if the image is busy

Sale badges

Create urgency and draw attention:

Font weight: 700 or 900 (bold or black)
Font size: 28—40 px
Text color: White (FFFFFF)
Background color: Red (FF0000) or orange (FF6600) at full opacity
Position: Top-left corner
Rotation: Tilt the layer slightly (-15 to -5 degrees) for a dynamic, eye-catching angle

Calls to action

Drive clicks with bold CTAs like “Shop Now” or “Limited Offer”:

Font weight: 700 (bold)
Font size: 24—36 px
Text color: White on a dark background, or a dark color on a bright background
Background color: Your primary brand color at full opacity
Position: Bottom-center for maximum visibility

Branding consistency tips

Consistent branding across all your product images builds trust and recognition. Here are practical ways to keep your text styling uniform.

Stick with one or two fonts

Pick a primary font for headlines and product names, and optionally a secondary font for supporting text like prices or descriptions. Using more than two fonts makes images look cluttered and unprofessional.

Use your brand colors consistently

Define your brand colors (primary, secondary, accent) and use the same hex values every time. Write them down or keep a reference handy so you enter the exact same values in the color picker across all templates.

Save common styles as template patterns

Once you have perfected the look for a price tag or product title, save that template and use it as a starting point for new designs. Duplicating a well-styled template is faster and more consistent than recreating text styles from scratch each time.

Using text as dynamic variables

One of the most powerful features of PixelFiddler templates is the ability to turn any text layer into a dynamic variable. Instead of manually editing text for every product, you define a variable name (like “product_name” or “price”), and PixelFiddler replaces it automatically when generating images.

This means you can design a single template and produce hundreds of unique product images — each with the correct name, price, and description — without touching the editor again.

Learn about dynamic variables

Next steps

Now that you know how to add and style text, continue building your template design skills:

Dynamic variables — Turn text into reusable variables for bulk image generation
Working with layers — Arrange, reorder, and blend text with images and shapes
Generate images — Produce finished product images from your templates