How to remove Product Title & Price from 1 product on Collection Grid

Store Design

Topic summary

A user wants to hide the product title and price from only the last item in their collection grid, which serves as an “Explore More Work” link to another page rather than an actual product.

Initial Solution Provided:

  • CSS code targeting the entire collection section was offered, which hides title/price from all products rather than just the last one.

Refined Solution:
After clarification, a more precise solution was provided:

  • Add custom CSS to the theme.liquid file (above the </head> tag)
  • Uses a conditional check for the specific collection URL
  • Targets only the last child element in the grid using :last-child selector
  • Sets opacity to 0 for just that product’s title and price information

Status: The discussion appears resolved with a working solution that specifically targets the last product in the collection grid while leaving others unchanged. The user was asked to confirm if the solution works.

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

I would like to remove the Product Title and Price from 1 product preview on the collection grid. ‘Explore More Work’ will be used to link to another page, so the price and title are not necessary. I’ve attached a screenshot of the desired outcome. Any help here is greatly appreciated :slightly_smiling_face: https://fourxfive.com/collections/all-services

Screenshot 2025-02-06 at 12.09.23 PM.png
Screenshot 2025-02-06 at 12.09.23 PM.png2850×1300 250 KB

1 Like
2

Hi @Byandrewedwards

Please, share your store URL. Thanks!

3

Sorry about that! https://fourxfive.com/collections/all-services

4

Thanks for the info, 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:
div#shopify-section-template--18721181368538__main .product__grid__info.product__grid__info--under {
    display: none;
}

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

5

Thank you for this info!! I only want to remove the product title and price from the last product. Exactly like the photo attached to the original post. Is that possible?

6

Hi @Byandrewedwards

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
{% if canonical_url == "https://fourxfive.com/collections/all-services" %}
.collection__products > .js-grid > div:last-child > .product-grid-item > .product__grid__info {
    opacity: 0 !important;
}
{% endif %}
{% endstyle %}

DaisyVo_0-1738912414518.png
DaisyVo_0-1738912414518.png1347×754 96.7 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.