Start a new topic

Add to cart (mobile view)

I have turned on the add to cart button and it works great.  However since there is no hover functionality on a touch screen the add to cart button is always hidden.  This is a big issue for us since most of our traffic is on mobile.


How can I edit the custom CSS to make it always show.  I can move the button placement but I can't seem to figure out how to make it visible all the time.


Thanks!

Hello!


Thank you for your message.


Please let us know the address of your store so that we can check it.


Thank you.

Hi Alexey.


The store is www.sleeknail.com.  Also I am referring to the add to cart button on the search result widget page.


Thanks!

Hi,


Angelina from Searchanise here. Thank you for the provided address.


In order to see the Add to cart button you should hold your finger on the product in search. If you want the button to be visible permanently please add the following CSS to Searchanise admin panel - Search results widget - Custom CSS section:


.snize-mobile-design #snize-search-results-grid-mode li.snize-product .snize-button {

    opacity: 1;

    visibility: visible;

  }


.snize-mobile-design #snize-search-results-list-mode li.snize-product .snize-button {

    display: inline-block;

    margin-left: 15px;

    opacity: 1;

}


If you face any difficulties, feel free to contact us!

Thank you Angelina!


Got it to work.  Didn't realize there was an opacity set

You're welcome Poli! I was glad to help.

Hi Searchanise,



Is it possible to get the snippet of code for the mobile search pop up so we can style it? (see attached)


Would be great to get into that and really style it to our brand, thanks!

Hi,


You can adjust look and feel of the search widget by adding necessary Custom CSS on the Instant search widget > Custom CSS page of your Searchanise control panel. Please let us know if you need any assistance with that and we will be glad to assist you.

Hi Alexey,


Yes I get that, but what i cannot see is the class names or IDs to target my CSS to as this box only shows on mobiles and I cannot inspect the code sadly


Thanks

Hi,


You can use the Toggle device toolbar tool in Google Chrome browser in order to emulate the mobile view. The search bar in mobile has the snize-mobile-top-panel class. Please check it.


Thank you.

Thanks Alexey, but the Chrome device emulator, doesn't launch the mobile search box, it seems it really only comes up when you are actually on a phone.  Is there any chance you could provide the HTML block for the search box?


Thank you

Dear Dave,


Unfortunately, we cannot provide source code of instant search widget. As we mentioned earlier the Toggle device toolbar tool in Google Chrome browser gives an ability to emulate the mobile view where you can view mobile instant search widget. It seems that mobile instant search widget is viewed via developer tools right after the Toggle device toolbar tool is launched in desktop version of the storefront. Once you launched the Toggle device toolbar tool, please reload the page and try to inspect mobile instant search widget once again.


Thank you.

Thank you Alexey, we have it now!

Dear Dave,


You are welcome. We were glad to help you.

Login or Signup to post a comment