To change the colors used by Searchify in "auto install" mode you need to specify your own CSS file.
Here are the steps.
- Download the Searchify CSS file. This is available at http://<your-store-name>.searchifyapp.com/searchify/searchify-1.0.css (replace <your-store-name> with your store name).
- Upload the CSS file into your theme's asset area.
- Include the CSS file in the <head> section of the theme:
{{ 'searchify-1.0.css' | asset_url | stylesheet_tag }}
You can now edit the CSS file to change the colors to match.
Image files
We recommend referencing the image files from the the Searchify site so you don't need to copy them to your theme's assets area. To do this, replace all image urls to reference www.searchifyapp.com/searchify.
For example, where it says "url(as_pointer.gif)" change it to "url(//www.searchifyapp.com/searchify/as_pointer.gif)".
Hover
The following CSS can be used to highlight a product row when you mouse over it:
div.searchify_results ul li.searchify_product a {display: inline-block; width: 100%;}
div.searchify_results ul li.searchify_product a:hover {background-color: #555;}
div.searchify_results ul li.searchify_product a:hover div.searchify_image_container img {border: 1px solid #555;}
Comments
0 comments
Please sign in to leave a comment.