What CSS is needed for a consistent "Quick View" button style in Shopify?

jamescox1981
Shopify Partner
60 0 12

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!!

Replies 4 (4)

PeanutButter
Shopify Partner
385 67 181

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?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

KetanKumar
Shopify Partner
36839 3635 11972

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

MS-WEB-DESIGNER
Shopify Partner
3012 181 484

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.

SearchaniseTeam
Shopify Partner
63 0 8

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. 😎