Remove Product Title In Collection （impulse theme）

Shopify Discussion

Topic summary

A Shopify store owner using the Impulse theme wanted to hide product titles on collection pages for mobile devices while keeping them visible on desktop.

Solutions Provided:

Multiple community members offered CSS and Liquid code solutions:

  • Liquid approach: Add conditional code to theme.liquid file before the </body> tag that targets collection templates
  • CSS approach: Add media query code to theme.css or template-collection.css targeting mobile viewports (max-width: 767px or 768px) to hide product title elements

Resolution:

The issue was successfully resolved. The original poster confirmed the problem was solved and thanked multiple respondents for their help. The discussion demonstrates typical Shopify theme customization requiring either template logic modifications or responsive CSS targeting.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

I don’t want to display the product title here on the mobile phone, but it can still be displayed on the computer.

shengwenwen_0-1679987110137.png
shengwenwen_0-1679987110137.png446×883 115 KB

Any help is most welcome.

Thank you

2

Hey @shengwenwen
Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag
{%  if template contains 'collection' %}

{%  endif %}
3

Hello @shengwenwen ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

4

Hello @shengwenwen ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1679988475886.png
GemPages_0-1679988475886.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1679988494024.png
GemPages_1-1679988494024.png1564×938 91.7 KB

{%  if template contains 'collection' %}

{%  endif %}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

Hi @shengwenwen ,

Please follow this instruction to do that.

Go to Online store > Themes > Edit code > Assets > open theme.css or theme.css.liquid and then add this code at the bottom of file

@media only screen and (max-width: 767px){
.collection-content .grid-product__title {
    display: none !important;
}
}
6

Hello @shengwenwen ,

You can try to do this:

Go to Online Store → Themes → Actions → Edit code

Ref- step 1.png
Ref- step 1.png1434×819 104 KB

Go to Assets → template-collection.css → Add the following code at the bottom of page:

@media only screen and (max-width: 768px) {
  .product-single__title {
    display: none;
  }
}

Save and preview

Let us know if you need any further support

OneCommerce.

1 Like
7

@shengwenwen
add below code into theme.liquid file

{%  if template contains 'collection' %}

{%  endif %}
8

Thank you so much for your help

Worked perfectly!

9

Hi Dan_From_Ryviu，

Thank you for your reply.

My problem has been solved.

1 Like
10

Hi OneCommerce，

Thank you for your reply.

My problem has been solved.

11

Hi Ujjaval，

Thank you for your reply.

My problem has been solved.