Shopify themes, liquid, logos, and UX
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!!
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?
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
Dear @jamescox1981
Hope the following suggestion will help you
/* 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*/
If you still need help you can contact us by using the link or email given at signature.
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. 😎
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024