Remove Product Titles from collection pages - Debut Theme

Store Design
, ,
1

Hello all,

I’d like to remove the product title from the image displayed on collection pages only.

For example, here https://everydaypeoplecartoons.com/collections/licensing the first cartoon has “live in the moment” under it, the second has “books”, I’d like all those removed so that the cartoons can be displayed on their own without the title.

Many thanks for helping if you can.

Cathy

2 Likes
2

To remove the product titles from the images displayed on collection pages in the ELLA theme, you’ll need to make some changes to the theme code. Here’s how you can do it:

  1. From your Shopify admin, go to “Online Store” → “Themes”.

  2. Locate the ELLA theme and click on “Actions” → “Edit code”.

  3. In the theme editor, find and click on “Snippets” in the left sidebar.

  4. Look for a file named “product-card-grid-item.liquid” or similar.

  5. Open the file and search for the code that displays the product title. It might look like {% if section.settings.show_product_title %}{{ product.title }}{% endif %}.

  6. Remove or comment out this line of code by adding {% comment %} before it and {% endcomment %} after it, like this:

{% comment %}
{% if section.settings.show_product_title %}
{{ product.title }}
{% endif %}
{% endcomment %}

  1. Save the changes to the file.

  2. Now, go to “Sections” in the left sidebar of the theme editor.

  3. Look for a file named “collection-template.liquid” or similar.

  4. Open the file and search for the code that renders the product grid.

  5. In the product grid code, find the line that includes {% include 'product-card-grid-item' %}.

  6. Add a parameter to the include statement to pass a variable indicating not to show the product title. It should look like this: {% include 'product-card-grid-item', show_product_title: false %}.

  7. Save the changes to the file.

3

Hi @Cathy_Thorne ,

I understand that you want to remove all the product titles.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles.
  4. At the bottom of the file, add the following CSS code:
.h4.grid-view-item__title.text-center {
    display: none;
}
2 Likes
4

Brilliant! Thank you Rose_Dim

5

Another question pls. If I wanted more space in between the rows, like there is in between the columns, could I do that?

1 Like
6

Hi @Cathy_Thorne ,

Welcome to Shopify. I adore your work.

Just few suggestions.

  1. Try to water mark your cartoon images, so noone can snipe and make a copy of it.

  2. I would suggest to provide an option to include a frame on your typed poems.

  3. Add an option to create cards/postcards on your cartoons

  4. Your cartoons are so clever and entertaining, I would suggest to sell those as well

  5. Provide a snippet of your sample poem, so people knows what they are buying for

I think that is it for now. I wish you the best. Only few people have a talent like you :blush: Do not let them steal your work

7

Yes, you can add more space in between.

.grid__item.grid__item--collection-template.small--one-whole.medium-up--one-third {
    padding-bottom: 10px;
}

You can change the 10px if its not enough. Thios is for the row.

.grid__item.grid__item--collection-template.small--one-whole.medium-up--one-third {
    padding-right: 10px;
}

this is for the columns.

Same instructions you can Copy and Paste at the end of the .css file. dont forget to SAVE.

8

Thank you so much, worked super well!

9

please let me know how I can send you payment for this help?

10

No worries happy to help. :blush:

1 Like