Code to hide Price on this page

Does anyone know the code for me to add to remove this “£0.00” from this page?
To clarify I only need it hiding on this page for these products. I have other products on my site which I still need the price to be shown. But just for this page I need the price hidden, if this helps all these products use the “Default Product” template and all my other products which still need the price use another product template.

thanks in advance
Charlie

  • Here is the solution for you @CraigReep
  • Please follow these steps:

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.collection .card-information {
    display: none !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Hello @CraigReep
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-card.css
add this code at the end of the file.

.card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) {
display: none;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

Didn’t see the replies :confused: .

Hi @CraigReep ,

Please use the below steps to hide the price from this page:

  1. In your Shopify admin, navigate to “Online Store” under Sales Channels. Click the three dots next to the theme you wish to edit, then select “Edit Code”. Refer to the screenshot for guidance.

  1. Next you can find theme.css/base.css/style.css(it will be based on your theme file)

Add this css code:

#shopify-section-template--21026794668356__featured_collection_bmtxpT .card-information,
#shopify-section-template--21026794668356__featured_collection_LaQQTG .card-information,
#shopify-section-template--21026794668356__featured_collection_WwxmRX .card-information,
#shopify-section-template--21026794668356__featured_collection_qq4kKE .card-information,
#shopify-section-template--21026794668356__featured_collection_a8mkey .card-information{
display:none !important;
}

Result:

If you need further assistance, feel free to reach out!

I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

Hi please read my original post, I don’t want to hide price on all products. I explained that

Hi please read my original post, I don’t want to hide price on all products. I explained that in the post

Hi please help more Im unsure where to paste this code?

Hi @CraigReep

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.section-template--21026794602820__main-collection-product-grid-padding .price {
    display: none;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hi that’s for the wrong part of the site. Please check the screenshot. this page is when you click the “build your gate” button at the top of the home page.

You can add the line of code to your theme file in the following ways:

Go to your Shopify Admin.

Navigate to Online Store > Themes.

Find the theme you’re using and click Actions > Edit code.

In the left sidebar, find and click on an existing CSS file in the assets folder (e.g., theme.css, styles.css, main.css). It depends upon your theme.

If you find an issue finding the css file, you can put the css in theme.liquid.

In the Shopify Admin, go to Online Store > Themes.

Click Actions > Edit code for your theme.

In the left sidebar, under the layout directory, click theme.liquid.
Inside the head tag, you can put the CSS


#shopify-section-template--21026794668356__featured_collection_bmtxpT .card-information,
#shopify-section-template--21026794668356__featured_collection_LaQQTG .card-information,
#shopify-section-template--21026794668356__featured_collection_WwxmRX .card-information,
#shopify-section-template--21026794668356__featured_collection_qq4kKE .card-information,
#shopify-section-template--21026794668356__featured_collection_a8mkey .card-information{
display:none !important;
}

This will work for you.

I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

Hello @CraigReep

I would suggest installing the hide price app and take support of the app developer if required.

Hello @CraigReep
Yes — this can be done, and using a separate product template is the right approach :+1:

Instead of hiding prices globally with CSS (which affects other products), you should hide the price only inside that specific product template. The common way is:

  • Edit the product template used for this page (for example product.default or its section)
  • Add a template-specific class or wrap the price block and hide it only there

This keeps prices visible on other products that use a different template.

If you prefer not to touch theme code, Hide price app handles this cleanly by letting you hide prices per product or template without impacting the rest of the store

Hope this helps :+1: