Articles on: Building Calculators

Styling (Hiding Objects / Elements from your Product Page)


Using our styling section you can:

Select the colors of the calculator so it matches your store's design
Select if you want the edges of the calculator to be rounded or squared
Insert any custom text that will be displayed to your customers after they add an item to the cart (Example: "Allow a moment while we build your custom product")
Display a progress bar for file uploads and insert the custom text that will be displayed to customers while loading the file.

Basic Styling:

Custom CSS Styling:

In our Custom CSS styling section, you can:

Hide anything from the product pages where your calculator is (for example: quantity button, headers, etc). To learn more, see below.
Customize the calculator's code completely by using your own custom CSS. To do this you may want to reach out to a developer to help you with this.

Hiding objects/elements from your product page:

Go to the product page you see the object you want to hide using the CHROME browser. In this example, I will hide the QUANTITY object.
Right-click on the object you want to hide and then click "Inspect"

Once the right console opens, go over all the text blocks until the object you want to hide is completely highlighted, like in the below photo. Right-click on the text you have found, and go to Copy and click Copy Selector

Go to the Custom Price Calculator app in your store, click Styling on the top navigation and then click the Display Settings followed by Custom CSS.

Paste the text in the first text input field, click "Hide Element" and then click Save


Your product page will now no longer show the hidden object

You can follow this process for any object on your store. Any product where you embed the calculator will no longer show any of the hidden elements. You can always click on Reset to Default to remove any changes you have made.

Updated on: 21/10/2022

Was this article helpful?

Share your feedback


Thank you!