All Collections
Building Calculators
Styling (Hiding Objects / Elements from your Product Page)
Styling (Hiding Objects / Elements from your Product Page)

Hiding Variant Default Variants from Product Page

Written by Kristina
Updated over a week ago


Using our styling section you can:

  1. Select the colors of the calculator so it matches your store's design

  2. Select if you want the edges of the calculator to be rounded or squared

  3. 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")

  4. Display a progress bar for file uploads and insert the custom text that will be displayed to customers while loading the file.

Custom CSS Styling:

Hiding objects/elements from your product page:

  1. Go to the product page you see the object you want to hide using CHROME browser. In this example, I will hide the QUANTITY object.

  2. Right-click on the object [ in this case Default_CPC_XXX] you want to hide and then click "Inspect"

  3. The below example is build using the default quantity button in Shopify, you can do the same for the Variant name

  4. 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

  5. Go to the Custom Price Calculator app in your store, click Calculators on the top navigation, and then click Custom CSS.

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

  7. 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.

Did this answer your question?