Removing Product Titles and Prices -- Debut Theme

The_LA_Bag_Lady
Tourist
3 0 1

Hello, 

I'm using Debut theme and trying to remove product titles and prices from the featured collection on my homepage. I may like to remove titles from all pages so if I can be helped with both that'd be great. 

Couldn't get image to load of what I'm trying to do, so here's the my drive link. 

https://drive.google.com/file/d/0B4M6nKsCwSCHaHBFaFNNUFl2ckU/view?usp=drivesdk

Thank you! 

The LA Bag Lady

 

 

0 Likes
Liam
Shopify Staff
Shopify Staff
651 19 253

Hi LA Bag Lady,

Liam here from Shopify - thank you for your question :)

Great to see you are looking to set up your home page exactly how you would like, so let's see how you can hide titles and prices of products just on the home page. The easiest way to do this might be to add some custom Liquid logic to Debut. 

The file we are looking to edit is can be found within the Edit HTML area in your snippets folder and it is called product-card-grid.liquid. The code which generates the title and and price of products when they are displayed within a collection can be found from line 29 to line 35, and looks like this:

<div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
      <div class="grid-view-item__meta">
      {% include 'product-price' %}
      </div>

What we can do here is give this code a condition that it will only load on pages which are not the home page. To do this we will wrap the code in tags which contain Logic conditions. Our support docs describe in greater detail how these tags work. The unless control flow tag will allow us to set up a rule where the code for the title and price will load on a page unless the page is the index page.

The tag for this would look like: unless template == "index" and once the tag is added, your code should look like this:

{% unless template == "index" %}
      <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
      <div class="grid-view-item__meta">
      {% include 'product-price' %}
      </div>
 {% endunless %}

(Remember to close the Liquid logic with {% endunless %}. )

Removing titles from all pages would be an easier CSS edit and you would just need to add this to the very bottom of your stylesheet (theme.scss.liquid file in assets):

div.h4.grid-view-item__title {
  display: none;
}

I hope this helps LA Bag Lady, if you have any questions on the above points, please let me know.

Cheers,
Liam | Partner Education
 
support@shopify.com

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

AltDnaApparel
New Member
1 0 0

Hi. Having the same problem.

 

Can I literally just copy and past the code above in my snippet? If so, should it replace lines 29-35?

 

Thanks

 

AltDnaApparel

0 Likes
epilogio
New Member
2 0 0

Hi! It doesn't seem to work , It does hide the product and prices from homepage but in other collections the prices that are displayed are shopify's default prices for unassigned products. (19.99) It doesn't seem to pull out the correct prices assigned to this store's products.

 

 

 

 

 

 

 

 

Capture 1.PNGCapture 2.PNG

0 Likes