Help, how do you remove the product titles on the collection pages - refresh theme

Store Design
1

Hey,

Im using the Refresh theme and looking to remove the product titles from the squares on the collection pages.

We wish only to display the product photo and price, can any one help?

Thanks in advance!

Screenshot 2025-01-28 at 19.32.07.png
Screenshot 2025-01-28 at 19.32.07.png2450Ɨ918 275 KB

2

Hi @KellyJayne1993 If youā€™re using the Refresh theme and want to remove the product titles from the collection pages while keeping just the product photo and price, hereā€™s what you can do:

  1. Access your themeā€™s code:

    • Go to your Shopify admin.
    • Navigate to Online Store > Themes.
    • Click Customize on your Refresh theme.
    • Then, click the three dots in the top right and select Edit code.

  2. Locate the relevant file:

    • In the left-hand sidebar, open the Sections folder.
    • Look for a file like collection-product-grid.liquid or product-card.liquid (the exact name may vary depending on the theme).

  3. Edit the code:

    • Look for the code that renders the product title. It might look something like this:
### {{ product.title }}
ā€‹
  • Comment it out by wrapping it in {% comment %} tags, like this:
{% comment %}
### {{ product.title }}
{% endcomment %}
ā€‹

  • Save your changes:

    • Click Save, then refresh your collection page to see the changes.
3

@KellyJayne1993 @Ahmad31 make sure the product title, or description, is still there for screen readers or your creating accessibility issues.

Alternatively just visually hide the element using a custom css setting without having to modify theme files.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.product-card__title { display: none; }
4

Hi @KellyJayne1993

Please, share your store UR. Thanks!

5

https://wishstrings.co.uk/collections/wishstrings

6

This sounds like what im trying to achieve, we want to keep the data their just hidden.

https://wishstrings.co.uk/collections/wishstrings

Trying to hide the title on these pages, the collections. Should this work when copied into the Custom CSS box? It doesnā€™t seem to change anything? thanks so much

7

Hey, this works! However, once the title is removed the product is not ā€˜clickableā€™

I need to move the card link from the ā€˜titleā€™ to the ā€˜photoā€™ so the product is still clickable to access the product page.

I can see the code below, can this be altered/moved to change the Cardlink to the product image? Or alternative change the link to say ā€˜View Productā€™ rather than the title?

Thanks

Kelly x

{{ card_product.title | escape }}

8

Thanks for the info, if this is for all the collections in your store try this one.

  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 ā€œbase.css, style.css or theme.cssā€ file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.collection .card__content {
    display: none;
}

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!