Remove Text from Product Title on Home Page

Store Design
, , , , , , , ,
1

Hey,

I’d like to remove text from below my products.

I’m using the theme “Crave” and can’t figure it out.

I’ve used: “.card:not(.ratio)>.card__content { display: none !important; }” as code to remove the text which works, but then the images can’t be clicked any longer.

Any help?

My Store (3de791.myshopify.com)

2

Hi @SkillGappedGG ,

This is Kate from PageFly - Shopify Landing Page Builder App.

The previous code you used might have inadvertently affected the clickability. I suggest you to try this:

  • Go to your Shopify admin and navigate to “Online Store” > “Themes.”
  • Find the “Actions” dropdown for your “Crave” theme and select “Edit code.”
  • In the left sidebar, click on “Assets” and then open the “theme.scss.liquid” file.
  • Scroll to the bottom of the file and add the following CSS rule:
.template-product .card__content {
    display: none;
}
  • Click on the “Save” button to save the changes.

This CSS rule targets the “.card__content” element specifically on the product pages. It should remove the text below the product images without affecting their clickability.

Remember to preview your changes and ensure everything looks as expected. If you encounter any issues or need further assistance, don’t hesitate to reach out.

Hope my suggestions can help! Let me know if you have any questions.

Best regards,

Kate | PageFly Team

3

Theme.scss.liquid doesn’t exist in my files. Added that to the bottom of Theme.liquid & nothing changed.

I should also mention, these are products that are in a collection.

I still have text under my products.

Screenshot 2023-08-06 221524.png
Screenshot 2023-08-06 221524.png538×341 14.4 KB

4

Hi @SkillGappedGG

Please add this code in your theme.liquid file above tag

{% if template == 'index' %}
.card__heading { opacity: 0; font-size: 0px !important; } 
{% endif %}
5

Hello @SkillGappedGG ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → theme.scss.liquid file

Add this following code at the bottom of page

.your-text-class {
  display: none;
}

Replace “.your-text-class” with the actual CSS class of the text element you want to hide

Save and preview

Hope this can help.

Transcy

6

Added it like you said, now I just have this ugly text at the top, and the titles are still showing.

Screenshot 2023-08-06 223110.png
Screenshot 2023-08-06 223110.png1682×894 330 KB

7

Hey,

As I’ve said previously, I don’t have a theme.scss.liquid file and if I add that code just to ‘Theme.liquid’ nothing changes.

8

Hello there,
please add this css Layout > theme.liquid and paste this at the bottom of the file:-

{% if template == 'index' %}

{% endif %}
9

Hey,

It worked, but now my products can’t be clicked on.

10

Hello @SkillGappedGG

In this we have to change the structure.

Thank you :slightly_smiling_face:

11

I just want to know how to remove the text man. That’s it. I’ve been sitting here for now 10 straight hours trying to figure it out and nobody has an answer.

12

Hi, I’m sorry that my suggestion didn’t work. Have you solved the matter?
I think it’s better to contact Theme support or the related page builder support team to share access store and check it directly. It takes time to test and revise code to figure out the best one.