How can I style my 'Quick View' on hover button with CSS?

Store Design
1

Hi Guys

This is probably a very simply question - i’m try to get my “Quick View” on hover button styled the same as here: https://searchanise-demo.myshopify.com/collections/women?page=1&rb_vendor=Brixton

What CSS do i need please?

This is my website https://clickhab.myshopify.com/collections/all?page=1

PW: chab2021

Thanks!!

1 Like
2

Really not only css related, as quick view button has to be moved in liquid/html to be able to position it as in the reference you sent.

What theme are you using?

3

@jamescox1981

i can’t see quick view button store it’s show only for collection page but do you have use also smart filter apply doesn’t possible to smart filter

4

Dear @jamescox1981

Hope the following suggestion will help you

  • From your Shopify admin, go to Online Store > themes
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  • Go to the very bottom of this file and paste the following code:
/* Start */
#snize-search-results-grid-mode li.snize-product .snize-button {width: 100% !important; left: 0 !important; margin-left: 0 !important;border-radius: 0 !important;padding: 10px 10px !important;}
/* End*/
  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

5

Hi @jamescox1981 , Julia from the Searchanise team is here, thank you for your question!

The buttons design you asked about comes by default with the “Big Pictures” Search results widget template. You can switch your templates in the Searchanise admin panel > Search results widget > Templates & Colors tab.

However, you can still use the template you like and have your buttons designed this way. The general idea is that you need to change the position of your button, its size, color and the text format. It can be done via Custom CSS functionality that our app provides.

I have prepared the CSS code for you that should copy the referenced look for the desktop view. This code can be copied and pasted to the Searchanise admin panel > Search results widget > Custom CSS tab.

@media(min-width:1024px){
#snize-search-results-grid-mode li.snize-product .snize-button {
top: 250;
width: calc(100% - 23px);
margin-left: 76px;
transition: none;
border-radius: 0;
height: 33px;
background: #333;
text-transform: uppercase;
}
}

I would also like to mention that this code is not universal and may need some adjustments. The good news is that you can always contact our support team via Help Center form if you need any assistance with your CSS code. :smiling_face_with_sunglasses: