Styling:

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.

Advanced Styling:

In our advanced styling section, you can:

Hide anything from the product pages where your calculator is (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 left navigation and then click the Advanced tab


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.
Was this article helpful?
Cancel
Thank you!