Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Joryobk
Tourist
10 0 2

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

Accepted Solution (1)

Anshul_arora
Navigator
453 128 100

This is an accepted 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;
}

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

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 9 (9)

Beae_Cass
Shopify Partner
447 167 181

Hi @Joryobk ,

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

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Demo Template

ZestardTech
Shopify Partner
5911 1067 1413

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Joryobk
Tourist
10 0 2

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?

oscprofessional
Shopify Partner
16116 2410 3126

Hello @Joryobk 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Joryobk
Tourist
10 0 2

Obkworld.com

password: 1234

Anshul_arora
Navigator
453 128 100

This is an accepted 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;
}

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

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Joryobk
Tourist
10 0 2

Hi @Anshul_arora

 

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

Anshul_arora
Navigator
453 128 100

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
uncloudedhair
Visitor
1 0 0

it didn't work for me