Make Quick Add Button Always Visible on Collections Product Grid - Stiletto Theme

Shopify Discussion
,

Topic summary

A user seeks to make the quick add button permanently visible on product grids in the Stiletto theme, rather than only appearing on hover.

Initial Solution:

  • Multiple contributors provide CSS code snippets to be added to the theme.liquid file before the or tags
  • The solution successfully makes the quick add button always visible

Follow-up Customization:

  • User requests to also keep the product title visible on hover (not just the image changing)
  • Additional CSS code is provided to display both title and button simultaneously
  • An overlap issue emerges between the title and add-to-cart button when both appear together

Positioning Challenges:

  • User attempts custom CSS to reposition the product title onto the product image but struggles with responsiveness
  • A refined solution is provided using JavaScript to move the title above the button, eliminating the need for complex responsive CSS

Ongoing Issues:

  • When clicking anchor-linked slideshow buttons, the product grid reloads and titles drop below buttons, creating large gaps between rows
  • Similar display problems occur on the recommended products section
  • The discussion remains open as the user seeks solutions for these new layout conflicts
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I was wondering if anyone had a solution for making the quick add button always visible on the collections product grid for the stiletto theme? Currently it only shows when hovering

Thanks

2 Likes
2

Hi @SanghitaWW

Would you mind sharing your store URL? Thanks!

3

Hi!

The store URL is https://75ee98-52.myshopify.com/

4
  • Here is the solution for you @SanghitaWW
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
1 Like
5
  • Here is the result you will achieve:

BSSTekLabs_0-1726157454941.png
BSSTekLabs_0-1726157454941.png1082×830 423 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
6

@SanghitaWW ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above
1 Like
7

Thank you so much! This worked perfectly. I had another quick question on this, would you be bale to help me make the product title also visible on the hover? so that only the image changes

Thanks

8

Thank you!

9

@SanghitaWW , to always show product title please try this code
1 Like
10

Thank you, this worked great!

11

@SanghitaWW , I see the title overlaps with the add to cart button when they appear together.

BSSCommerceB2B_0-1726159492190.png
BSSCommerceB2B_0-1726159492190.png1236×919 123 KB

Try changing the previous code like this to avoid that

Result

BSSCommerceB2B_1-1726159551421.png
BSSCommerceB2B_1-1726159551421.png1229×924 118 KB

1 Like
12

I was struggling with this - as the product name was actually below the product image before - so I used the following code in the custom CSS section to try to move the product name onto the product image on both mobile and desktop it but I’m not sure it’s the best solution and it’s not super responsive to screen size.

The code:
.product-item__meta {
position: absolute !important;
top: 60% !important;
margin: 0 auto !important;
width: 100% !important;
}
.product-item__product-title {
font-size: 14px;
line-height: 1;
color: #ffffff;
}
@media (min-width: 480px) {
.product-item__meta {
position: absolute !important;
top: 68% !important;
margin: 0 auto !important;
width: 100% !important;
}
.product-item__product-title {
font-size: 20px;
line-height: 0.9;
color: #ffffff;
padding-left: 12px;
padding-right: 12px;
}
}

if you have a better solution I would love to see it. Thanks!

1 Like
13

I don’t think you can use responsive design to reposition your title because it isn’t fixed in size. Instead, you can use this code before tag to move the product title above the ‘Add to Cart’ button.

and change the code you provide me like this

.product-item__product-title {
   color: #ffffff;
}

No need to use responsive css

1 Like
14

This worked like a charm - thank you so much for all your help on this! Been trying to figure it out for ages

15

Hey @BSSCommerce-B2B

I’ve run into a slight problem with this… The code works perfectly but when I press the button on my slideshow at the top of my collection page (which is linked as an anchor) it slides down to the product grid but it reloads the product grid and the product title has dropped below the button and is creating a massive gap between the rows… do you have any suggestions on how to fix this at all?

It also drops below the product card on the recommended product section on the product page - and I’m not quite sure why since it’s the same elements/code?