Customize Your Calculator's Appearance (Colors, Layout & Hiding Elements)

Start Here — No Code Needed

Before touching any CSS, try the built-in styling controls inside the CPC app. These let you change colors, round the corners, and set custom messages with a simple point-and-click interface — no code required.

How to access the styling panel:

1. Open the CPC app in your Shopify admin
2. Click on the calculator you want to style
3. Go to the Appearance tab

From there you can:

• Change the calculator background color — so it blends in or stands out against your page
• Change the text and price colors — to match your store's brand
• Round or square the corners — choose the shape that fits your theme
• Set a custom loading message — the text shown to customers while the calculator loads (e.g. "Building your custom product...")
• Set a file upload progress message — shown when a customer is uploading a file through the calculator

Need more control over the look? If the built-in panel doesn't cover what you need — custom fonts, hiding Shopify's native price or quantity fields, advanced layouts — see our CSS customization guide for ready-to-paste snippets.

Putting Elements Side by Side

Every element has a Width setting in its editor, under Design. Set it to Full, 1/2 or 1/3 to choose how much of the row that element takes up. Elements set to 1/2 or 1/3 sit next to each other on the same row where there is space, and stack automatically on narrow screens. A common use is setting Width and Height to 1/2 each, so customers enter both dimensions on one line instead of two. To find it, open the calculator builder, click the element you want to change, and look under Design in the editor.

Hiding Elements from Your Product Page

Sometimes you'll want to hide things that Shopify shows by default — like the native price, a quantity box, or variant dropdowns — because CPC is handling those instead. This is done using the Custom CSS panel with a built-in "Hide Element" tool that doesn't require you to write any code.

How it works: You find the element on your page, copy its selector (a unique identifier), paste it into CPC, and click Hide. Here's the step-by-step:

Step 1 — Find the element you want to hide

Go to your product page in Chrome. Right-click on the element you want to hide (for example, the Shopify quantity box or a variant label) and click Inspect.

Step 2 — Copy the selector

The browser's developer panel will open on the right. Hover over the code lines until the element you want to hide is highlighted on the page. Then right-click that line of code → Copy → Copy Selector.

Step 3 — Paste it into CPC and hide

Go to the CPC app → Home → Custom CSS.

Paste the selector into the first text field, click Hide Element, then click Save.

That element will no longer appear on any product page where the calculator is embedded.

You can follow this process for any element on your store. Click Reset to Default at any time to undo all changes.

Video walkthrough

Need more advanced styling? See our CSS customization guide for ready-to-paste snippets covering fonts, colors, spacing, swatch sizing, and more.

Updated on: 19/08/2026