> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.custompricecalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Customize the Look and Feel of Your Calculator

## About This Guide

This guide covers advanced appearance customization using CSS snippets — for things the built-in styling panel doesn't cover, like custom fonts, field spacing, swatch grid layouts, and more.

> **Try the built-in controls first** — no code needed. You can change colors, round the corners, and set custom messages directly inside the CPC app. [See the appearance & styling guide →](https://support.custompricecalculator.com/en/article/styling-hiding-objects-elements-from-your-product-page-ojwc8z/)

**How to apply any snippet below:**
1. In your Shopify admin, open the CPC app
2. Go to **Settings → Custom CSS**
3. Copy and paste the snippet(s) you need
4. Click **Save** — changes appear on your store immediately

You can combine multiple snippets by pasting them one after another. Each snippet is independent and won't interfere with others.

> **Finding a color code:** All colors use hex codes (e.g. `#f7f7f7`). To find the hex code for any color, use [this free color picker](https://www.google.com/search?q=color+picker) — just pick your color and copy the # code shown.

---

## 1. Change the calculator width

Makes the calculator fill the full available space, or set a specific maximum width.

```css
/* Full width */
#calculator {
  width: 100% !important;
  max-width: 100% !important;
}
```

```css
/* Fixed max width (change 500px to whatever fits your layout) */
#calculator {
  max-width: 500px;
}
```

*Use when: the calculator appears too narrow or too wide compared to the rest of the product page.*

---

## 2. Add a heading above the calculator

Displays a custom title above all calculator fields.

```css
#calculator::before {
  content: "Configure your product";
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #111111;
}
```

*Change "Configure your product" to any heading text you like. Change `#111111` to any color — [find your color code here](https://www.google.com/search?q=color+picker).*

---

## 3. Change the calculator background color

Gives the calculator a background to visually separate it from the rest of the page.

```css
#calculator {
  background: #f7f7f7 !important;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
}
```

*Change `#f7f7f7` (background) and `#e0e0e0` (border) to any colors — [find your color code here](https://www.google.com/search?q=color+picker). Use `transparent` to remove the background entirely.*

---

## 4. Change the calculator font to match your theme

Forces the calculator to use your theme's font instead of the default.

```css
#calculator,
#calculator * {
  font-family: inherit !important;
}
```

*Use when: the calculator text looks different from the rest of your store.*

---

## 5. Change label font size and color

Makes the field labels larger, smaller, or a different color.

```css
#calculator .element label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333333 !important;
  margin-bottom: 8px !important;
}
```

*Change `16px` for size and `#333333` for color — [find your color code here](https://www.google.com/search?q=color+picker).*

---

## 6. Change the calculated price display

Styles the price output shown by the calculator.

```css
#calculator .price-marker span {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}
```

*Change `22px` for size and `#111111` for color — [find your color code here](https://www.google.com/search?q=color+picker).*

---

## 7. Hide the "Price" label above the calculated total

Hides the label that says "Price" above the calculated price, leaving just the number.

```css
#calculator .price-marker label {
  display: none !important;
}
```

*Use when: you only want to show the price number, not the label.*

---

## 8. Hide Shopify's native price (show CPC price instead)

Hides the original product price shown by Shopify so only the CPC calculated price is visible.

```css
.price__regular,
.price__sale,
[class*="price--"] .price-item {
  display: none !important;
}
```

> **Note:** Price selectors vary by theme. If this doesn't work, contact support and we'll find the right selector for your theme.

*Use when: the Shopify price and the CPC price are both showing and it looks confusing.*

---

## 9. Hide Shopify's native quantity selector

Hides the quantity input that Shopify adds by default.

```css
.product-form__quantity,
[class*="quantity"],
quantity-input {
  display: none !important;
}
```

> **Note:** If this doesn't hide the quantity field on your theme, contact support with your theme name.

*Use when: there's a quantity box showing that you don't want.*

---

## 10. Hide Shopify's native variant picker (color/size dropdowns)

Hides the standard Shopify variant selectors when CPC is handling options instead.

```css
.variant-picker,
.product__variants,
[class*="variant-"] fieldset {
  display: none !important;
}
```

> **Note:** Theme-specific selectors may be needed. Contact support with your theme name if this doesn't work.

*Use when: Shopify's own color or size selectors are showing alongside your CPC calculator.*

---

## 11. Control swatch image size

Changes the size of image swatches (used in image selector elements).

```css
.swatch-picker .swatch-label {
  height: 80px !important;
  width: 80px !important;
}
.swatch-picker .swatch-label img {
  height: 80px !important;
  width: 80px !important;
}
```

*Change `80px` to whatever size looks best. Use when: swatch images are too large or too small.*

---

## 12. Show swatches in a grid instead of a row

Arranges swatches in a multi-column grid rather than a single horizontal row.

```css
.swatch-picker {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
```

*Change `4` to set how many columns you want (3, 5, etc.). Use when: you have many swatches and they overflow or wrap messily.*

---

## 13. Remove the spin arrows from number inputs

Hides the up/down arrows that appear inside number input fields.

```css
/* Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
```

*Use when: the small arrows in number fields look out of place with your theme.*

---

## 14. Style the dropdown (select) element

Changes the background color and text color of dropdown menus.

```css
#calculator .element select {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}
```

*Change `#ffffff` (background), `#333333` (text), and `#cccccc` (border) to your preferred colors — [find your color code here](https://www.google.com/search?q=color+picker).*

---

## 15. Make number inputs full width

Stretches number input fields to fill the available width.

```css
#calculator .element input[type="number"] {
  width: 100% !important;
  box-sizing: border-box !important;
}
```

*Use when: number inputs appear too narrow.*

---

## 16. Add spacing between calculator fields

Adds more breathing room between each input row.

```css
#calculator .element {
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
}
```

*Change `20px` to adjust the gap. Use when: fields feel cramped together.*

---

## 17. Add a divider line between each field

Adds a subtle line between calculator fields for a cleaner layout.

```css
#calculator .element {
  border-bottom: 1px solid #eeeeee !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}
```

*Change `#eeeeee` to any color — [find your color code here](https://www.google.com/search?q=color+picker).*

---

## 18. Round the calculator corners

Gives the calculator a rounded card appearance.

```css
#calculator {
  border-radius: 12px !important;
  overflow: hidden !important;
}
```

*Change `12px` for more or less rounding. Use when: your theme has rounded elements and the calculator looks too square.*

---

## 19. Add a custom loading message style

Controls the appearance of the loading message shown before the calculator appears.

```css
.cpc-loading-message {
  display: block !important;
  font-size: 14px;
  color: #888888;
  padding: 10px 0;
}
.cpc-calculator-target[data-cpc-ready="true"] .cpc-loading-message {
  display: none !important;
}
```

*Change `#888888` to any color — [find your color code here](https://www.google.com/search?q=color+picker).*

---

## 20. Hide a specific calculator field by its label name

Hides one specific field without affecting the others.

```css
#calculator .element[data-element="YOUR FIELD LABEL:"] {
  display: none !important;
}
```

*Replace `YOUR FIELD LABEL` with the exact label of the field you want to hide (case-sensitive).*

---

## Need something else?

If none of these cover what you're looking for, [chat with us](https://support.custompricecalculator.com/en/#) and we'll create a custom snippet for your store.