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 →
How to apply any snippet below:
- In your Shopify admin, open the CPC app
- Go to Settings → Custom CSS
- Copy and paste the snippet(s) you need
- 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 — 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.
/* Full width */
#calculator {
width: 100% !important;
max-width: 100% !important;
}
/* 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.
#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.
3. Change the calculator background color
Gives the calculator a background to visually separate it from the rest of the page.
#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. 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.
#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.
#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.
6. Change the calculated price display
Styles the price output shown by the calculator.
#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.
7. Hide the "Price" label above the calculated total
Hides the label that says "Price" above the calculated price, leaving just the number.
#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.
.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.
.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.
.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).
.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.
.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.
/* 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.
#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.
15. Make number inputs full width
Stretches number input fields to fill the available width.
#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.
#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.
#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.
18. Round the calculator corners
Gives the calculator a rounded card appearance.
#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.
.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.
20. Hide a specific calculator field by its label name
Hides one specific field without affecting the others.
#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 and we'll create a custom snippet for your store.
Updated on: 26/07/2026
Thank you!