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

Store Design
, , ,

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

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.

Screenshot 2023-10-03 at 11.29.16 AM.png
Screenshot 2023-10-03 at 11.29.16 AM.png2632×2066 682 KB

1 Like
2

Hi @Joryobk ,

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

3

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;
}
4

Hello @Joryobk

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

5

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
6

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?

7

password: 1234

8

Hi @Anshul_arora ,

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

9

Thank you.

10

it didn’t work for me

11

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