how to remove product's prices on featured collection only when it is used on home page

Topic summary

A user seeks to hide product prices in the featured collection section specifically on the homepage while keeping them visible on other pages (collection/product pages) using the Dawn theme.

Initial Problem:

  • Previous attempts removed prices across all pages, not just the homepage
  • User needed a targeted solution for the featured collection on the front page only

Successful Solution:
Multiple responders suggested adding CSS code, with the most detailed approach being:

  1. Navigate to Online Store → Themes → Customize
  2. Select the Featured Collection section on the homepage
  3. Scroll to the Custom CSS option within that section
  4. Add the CSS code: .gradient .collection .price { display: none; }
  5. Save changes

Outcome:

  • The original poster confirmed this solution worked perfectly
  • Prices now hidden on homepage featured collection but remain visible on product listing/collection pages
  • One user reported mixed results, while another confirmed it works well with the Trade theme
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

Hello,

I need help removing the product price from the featured collection only in my front page. I tried several options but none was a full success. when I try to remove the price it will apply on all the pages. I am using the Dawn theme.

1 Like

Hi @Joryobk ,

Could you please share your store URL, so that I can help you

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.gradient .collection .price{
display: none;
}

Hello @Joryobk

Please provide your store URL so I can review it and provide a solution.

Hello @Joryobk ,

As per my understanding you are looking to hide product pricing in the Home Page.

You can implement this change by following below mentioned steps -:

  1. Go to the Online Store, then Themes and click ‘Customize’ button https://prnt.sc/OG-yMQ3–56k

  2. Next, On the left side, find the section named → Featured collection and then click on it. https://prnt.sc/q-nsx4VJ-CG8

  3. After clicking, Featured collection will provide some options https://prnt.sc/fX4XdRAuz0Yk , scroll down at the end and click Custom CSS https://prnt.sc/5R98QuTPYRkj

  4. Next , add the below mentioned code in this section as mentioned in screenshot https://prnt.sc/GJoxgZfpGWJN

.gradient .collection .price {
display: none;
}

  1. Now, save the changes.

Output will look like this in Home page (product price will not visible) https://prnt.sc/TajLkSADhD2i and in Product Listing/Collection page product price will visible https://prnt.sc/s2-bZv-RrHoL

I hope it helps.

Please let me know if you have any query.

Thank you.

2 Likes

Thank you for your reply. The price removal code was applied to all the pages. Is there a way to only remove the price on the home page?

password: 1234

Hi @Anshul_arora ,

Your explanation was amazing and very easy to apply. Thank you

Thank you.

it didn’t work for me

THANK YOU! Lots of older solutions don’t work, but this one is super easy and works like a charm (Trade theme). Thank you!!!