How to remove product titles & prices from featured collection on home screen (Simple Theme)

F2preborn
Visitor
1 0 1

I am using the Simple Theme. I would like to know if there's any way I could remove/hide the product titles and prices on my home page's featured collection. I've been looking through the code to see if I could find a quick solution, though every other discussion on the forum seems to only have the answer for other themes.

 

Here is my current page, still with product titles and prices:

 

example2.png

 

And here is an example from another site of what I would like mine to look like:

(no product titles/ prices)

 

example1.PNG

 

 

 

 

Replies 39 (39)

Bo
Shopify Staff (Retired)
1793 196 467

Hey there, @F2preborn 

 

Bo here from Shopify Support! 

 

That is a really great question, this will take just a little bit of coding. This tutorial is specific to an unedited version of the Supply theme, Version 8.0.3.  We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial

 

  • Go to Online Store > Actions > Edit Code.
  • Open the Snippets Folder > product-grid-item.liquid.
  • On the start of line 67 add {% comment %} right before the <p>{{ product.title }}</p>.
  • On line 95 add {% endcomment %} and click Save. 
  • The end result should look like this:

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

mattrsullivan
Visitor
1 0 1

Hi Bo, I'm using the Debut theme, so it may be different for me, but it looks like the description Online Store > Actions > Edit Code should read Online Store > Themes > Actions > Edit Code

 

Either way, that path may help folks using the Debut theme find their way to the editor.

 

In the Debut theme, I was able to comment out the area near the end of product-card-grid.liquid to remove the pricing from all my catalog pages. This was exactly what I needed, so I'm stoked to have run across your initial solution. Thx!

Screenshot 2019-07-26 11.25.32.png

Sandip
Shopify Expert
45 2 8

Hey @mattrsullivan 

 

Go to line number 35

 

And copy this line and add one condition 

{% unless template contains 'index' %}

-------------Paste code which you copy

{% endunless %}

 

So it will hide

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: info@plusinfosys.in
Skype: ramani.sandip948
roaring
Tourist
7 0 3

Hello Sandip,

 

I'm trying to do this with the 2022 Minimal theme, hiding product name and price on the homepage, can you help me as the instructions above do not align with this theme.

 

Thanks!

 

site: shopunwahr.com

Creative Director, UNWAHR Lében
Webstore: shopunwahr.com / unwahr.xyz
Direct Contact: arob@unwahr.xyz
suyash1
Shopify Partner
9077 1129 1479

@roaring - can you please share your page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
slyestfr11
New Member
5 0 0

i need help doing this 

drkfigure.com

pw Black1

oscprofessional
Shopify Partner
15830 2369 3071

@slyestfr11 

.card__information {
display: none;
}

 

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
slyestfr11
New Member
5 0 0

This worked but I can't click on the items how do I fix this

oscprofessional
Shopify Partner
15830 2369 3071

@slyestfr11 ,

Use this CSS

.card__content {
    opacity: 0;
    height: 0;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
slyestfr11
New Member
5 0 0

thank you a lot

slyestfr11
New Member
5 0 0

on the product pages how can I center prices instead of having them left aligned.

oscprofessional
Shopify Partner
15830 2369 3071

@slyestfr11 ,

Its already in center. 

oscprofessional_0-1673850287329.png

if my previous post is helpful then please like and accept it.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3071

@roaring ,

Please share the password please..

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
anny1985
Visitor
2 0 0

Hi Bo,

I tried with your tutorial but it is not the same as you described.hoi.PNG

 

suyash1
Shopify Partner
9077 1129 1479

can you give me website link? I will do it via css and let you know how to hide titles and prices from the page collection, i will show you screenshot as well

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
anny1985
Visitor
2 0 0

Please check you email. Thank you!

ironicvancover
Visitor
1 0 0

mine is also like this and im not sure how to do it

Godisgood
New Member
4 0 0

hi bo

 

can you help me out 🙂

 

product page code.JPG

suyash1
Shopify Partner
9077 1129 1479

@Godisgood wrote:

hi bo

 

can you help me out 🙂

 

product page code.JPG


can you give me your website URL? you are welcome to contact me

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Godisgood
New Member
4 0 0
Hi suyashi!!

My website is lewisscott.online
suyash1
Shopify Partner
9077 1129 1479
add following css to the end of your theme.scss file and it should do it

.template-index . product__title, .template-index
.product__prices{display:none;
opacity:0; visibility:hidden;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
oscprofessional
Shopify Partner
15830 2369 3071

Hello ,

If you want to remove product titles & prices from featured collection on homescreen then use below css

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.template-index .product__title, .template-index .product__prices {
	display: none;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Godisgood
New Member
4 0 0

ooo it worked thank you

 

Godisgood
New Member
4 0 0
hi

unfortunately it didnt work


EMWA
Tourist
21 0 1

Hi,

I would like to Remove product titles and prices from my Collections page on my shopify. I am currently using the theme Narrative. Thank you! 

 

suyash1
Shopify Partner
9077 1129 1479

@EMWA - please share your website page link

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
EMWA
Tourist
21 0 1

http://sh-t-we-made.myshopify.com

Hi! Thank you so much for your reply,

I was able to hide the product name by adding -  {% comment %} <h3 class="card__name h4">{{ product.title }}</h3> {% endcomment %}
to the beginning and end of line 13. see picture below but i can’t seem to get rid of the price
 
Thanks 

Screen Shot 2021-02-18 at 5.49.37 PM.png

suyash1
Shopify Partner
9077 1129 1479

@EMWA - add this css to the end of theme.scss and check

.\.card_price {display: none; visibility: hidden;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
EMWA
Tourist
21 0 1

I tried this and it seems to remove it but it ruins the rest of the formatting 

suyash1
Shopify Partner
9077 1129 1479

@EMWA - we are just hiding price, should not affect other pages or content

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
EMWA
Tourist
21 0 1

I was able to hide it! thank you very much.

I was wondering if you knew how to change products to be viewed to 3 items per row on mobile site? On desktop it is formatted fine but when opening on mobile it changes to 1 product per row when i want 3 per row Thank you 

suyash1
Shopify Partner
9077 1129 1479

@EMWA - it can be done using css, but will look squeezed

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
EMWA
Tourist
21 0 1

do you think 2 will fit? 

suyash1
Shopify Partner
9077 1129 1479

@EMWA - added both, will look like this

suyash1_0-1613710665088.png

suyash1_1-1613710683745.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
EMWA
Tourist
21 0 1

Thank you so so much that was so helpful 

suyash1
Shopify Partner
9077 1129 1479

@EMWA - welcome

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
ParadigmParable
Visitor
1 0 0

This amazing I am trying to do this on my site very simply with a single product centered. Would you be able to assist? @suyash1 

suyash1
Shopify Partner
9077 1129 1479

@ParadigmParable - can you please share your pagelink?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
OurWiseTribe
Tourist
3 0 0

Hi

 

We are using Dawn 3.0 and I have closely followed the thread, to try a few of the suggested solutions without success because my theme does not have similar files mentioned here to edit (except for base.css).

 

I am thinking maybe to edit component-card.css is the solution.

 

component-card css file .png

 

Note - our web site is in beta so needs password access if someone needs to inspect our .css to help me 😉