How to remove product names and price on Spotlight theme?

Store Design

Topic summary

A user seeks to remove product names and prices from their product grid on the Spotlight theme, and wants to improve vertical image alignment to eliminate large gaps.

Solutions Provided:

  • CSS approach: Add display: none; to the .card__content selector to hide product titles and prices
  • Template editing: Locate and delete/comment out code like {{ product.title }} and {{ product.price }} in files such as product-template.liquid or product-grid-item.liquid
  • Custom code injection: Insert CSS in theme.liquid before the </body> tag (specific code appears corrupted in the thread)

Key Requirements:

The user shared their website URL with password for more precise assistance. Multiple responders requested additional details about folder locations and specific code placement.

Status: The discussion remains open with solutions offered but no confirmed resolution. The spacing/alignment issue has not been fully addressed yet.

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

I have a product grid and I want to remove the names and prices. Also, is it possible to have the images align better vertically without these big gaps? Thanks

image_2023-05-30_142823297.png
image_2023-05-30_142823297.png1759Ă—1414 290 KB

1 Like
2
  1. Locate the code in your product grid template that generates the names and prices. It might look something like this:

  

    
  

  
    ### {{ product.title }}
    

{{ product.price }}

  

​
  • Remove title and price from code and save
1 Like
3

Hi @raphael00000 ,

If you know a bit of coding you can write in the selector display:none.

Example:

.card__content {
    display: none;
}

Or If you dont mind to share your URL website with password? We can give you the exact code and instructions. Thanks!

1 Like
4

Awesome thanks, how about the spacing?

image_2023-05-30_143837326.png
image_2023-05-30_143837326.png1754Ă—1500 287 KB

5

Hi, here is my website : https://b5753a.myshopify.com

Password is gahclo

6

Hi @raphael00000 ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyHenry_0-1685452322052.png
PageFlyHenry_0-1685452322052.png1600Ă—794 139 KB

PageFlyHenry_1-1685452322054.png
PageFlyHenry_1-1685452322054.png1600Ă—777 197 KB

PageFlyHenry_2-1685452436118.png
PageFlyHenry_2-1685452436118.png1878Ă—916 193 KB

Hope this answer helps.

Best regards,

Henry | PageFly

7

Hi @raphael00000 ,

  1. Follow these step,

  2. Locate the relevant files: In the theme editor, you’ll typically find a file named something like “product-template.liquid” or “product-grid-item.liquid.” Look for files that control the product layout and display.

  3. Remove product names: Open the appropriate file and search for the code responsible for displaying the product name. It may look something like “{{ product.title }}”. Delete or comment out this code to remove the product names. Commenting out the code means adding “{% comment %}” before the line and “{% endcomment %}” after the line.

  4. Remove product prices: Similarly, search for the code responsible for displaying the product price. It may be something like “{{ product.price }}”. Delete or comment out this code to remove the product prices.

  5. Save the changes: After removing or commenting out the code for product names and prices, save the changes to the file.

  6. Preview and test: Exit the code editor and preview your store with the updated theme. Make sure to test it by visiting a product page or browsing the product listings to ensure that the names and prices are no longer displayed.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

8

Can you share what location/folder this code should be in?

Thanks!