Help with Product Image changes in Pipeline theme

Technical Q&A
,

Topic summary

A user seeks to modify product image behavior in Shopify’s Pipeline theme, specifically wanting to:

  • Remove the top image scroll/pagination on product cards
  • Enable simple hover-to-next-image functionality
  • Hide the “add to cart” button and price on rollover

A solution is provided using custom CSS targeting three elements:

  • .product-grid-item__pagination (removes image pagination)
  • .shopify-product-form > button[type="submit"] (hides add to cart)
  • .product__grid__price (hides price)

Two implementation options are offered:

  1. Global application via Theme Settings > Custom CSS (affects entire site)
  2. Block-specific application by adding CSS to individual Collection Product Grid blocks in each template

A follow-up request addresses the image transition delay. The solution involves adjusting the slideshow delay setting under Theme Settings > Product Card > Image slideshow > Slideshow delay (recommended: 0.5 seconds instead of 5 seconds).

Status: Resolved. Both modifications successfully implemented.

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

Is there a way to take out the top image scroll on all products? I would just like the image to go to my next image when hovered over.

I would also like to take out the “add to cart” bar on the roll-over as well as the price.

Here is a link to my unpublished site:

https://xgz0jtxplxt5cnn0-57200312371.shopifypreview.com

Screenshot 2024-05-27 at 6.00.34 PM.jpg
Screenshot 2024-05-27 at 6.00.34 PM.jpg478×522 30.2 KB

2

Hi,

Could not see a built in option to do this on the theme, you can achieve this via some custom CSS.

Custom CSS

.product-grid-item__pagination {
  display: none;
}
.shopify-product-form > button[type="submit"] {
  display: none;
}
.product__grid__price {
  display: none;
}

Option 1 - Adding Globally - CSS will be present on entire website

  1. Go to Theme Editor
  2. Click the left Cog Icon Theme Settings
  3. Scroll down in the left column to Custom CSS
  4. Add the above Custom CSS
  5. Click Save

If you do the above option you don’t need to do below Option 2.

Option 2 - Adding to each occurrence of Collection Product Grid Block

  1. Go to Theme Editor
  2. In the top middle right drop-down select Collections
  3. Select Default collection
  4. In the left column Find and Select the Collection Product Grid
  5. In the right column Scroll Down until you see Custom CSS
  6. Add the above Custom CSS
  7. Click Save

Looks like you have the Collection Product Grid Block setup on the Home Page so you will need to do this for each occurrence of the Collection Product Grid Block in each Template for example…

  1. Go to Theme Editor
  2. In the top middle right drop-down select Home Page
  3. In the left column Find and Select the Collection Product Grid
  4. In the right column Scroll Down until you see Custom CSS
  5. Add the above Custom CSS
  6. Click Save

Regards

3

That worked! Thank you. Is there any way to get the rollover image to appear quicker? Right now it has a pretty long delay to go to the next image. Thank you.

Here is a link to my non-live site: https://z2fbb5cc6x4vtsws-57200312371.shopifypreview.com

4

Hi,

  1. Go to Theme Editor

  2. Click the left Cog Icon Theme Settings

  3. Scroll down in the left column to Product Card

  4. Under Image slideshow > Slideshow delay

  5. Adjust slider to your preferred speed ( 0.5 > 5 Seconds )

Regards

5

Thank you for the help. That worked.