- Remove the Search Results Page title: "Showing # of results for ..."
.isp_results_summary_wrapper { display: none !important; }
- Remove all products borders
li.isp_grid_product { border: none !important; }
li.isp_grid_product div.isp_product_info { border-top: none !important; }
li.isp_grid_product:hover form.isp_add_to_cart_form::before { border-right: none !important; }
li.isp_grid_product:hover form.isp_add_to_cart_form::after { border-left: none !important; }
li.isp_grid_product form.isp_add_to_cart_form { border-bottom: none !important;}
div.isp_product_info::before { border-right: none !important; }
div.isp_product_info::after { border-left: none !important; }
- Remove the gray boxes on preload
div.isp_center_container ul#isp_search_results_container li.isp_grid_product.isp_grid_product_skeleton {
display: none;
}
div#isp_left_container_facets .isp_single_facet_wrapper.isp_single_facet_wrapper_skeleton {
display: none;
}
- Change the favorites hearts color
.favorite_is-favorited .heart { fill: #c72929 !important; stroke: #c72929 !important; }
- Change the 'Sort by:' text design (bold to normal)
.isp_sorting_and_result_view_wrapper #isp_search_res_sorting_menu li#search_res_sorting_title {
font-weight: normal !important; }
- Change the 'Sort by:' text design (bold to normal)
li.isp_grid_product { width: 30%; height: 75%;}
- Product badge position - stretched at the bottom of the product
.isp_badge .isp_product_image_wrapper:after {
background-size: 100%; background-position: bottom; }
- Change 'compare at price' design
#isp_product_quick_view_model .isp_compare_at_price, li.isp_grid_product div.isp_product_info .isp_compare_at_price {
color: #000 !important;
font-style: italic !important;
text-decoration:
line-through !important; }
- Change product image size
#isp_search_results_container li.isp_grid_product .isp_product_image {
width: 200px !important; /* Custom width */
height: 200px !important; /* Custom height */ }
- Customize color swatches for each color
span.product-color-swatch.isp-product-color-swatch-black {
/* replace 'gray' with the color as named in your product variants, omitting non-word characters such as '/' */ background-color: #eeeeee; /* replace with the necessary color */ }
- use an image instead of a plain color
span.product-color-swatch.isp-product-color-swatch-plaid {
/* replace 'plaid' with the color as named in your product variants, omitting non-word characters such as '/' */ background-image:URL("https://cdn-gae-ssldefault.akamaized.net/images/swatches/plaid.png"); /*replace with the URL of your own image (20x20 px) */}
- Change the swatch shape to square
.isp_product_color_swatch .product-color-swatch { width: 20px !important; height: 20px !important; border-radius: 0% !important; border: 1px solid #000 !important; }
- Change product Price font
.isp_product_price_wrapper { font-size: 12px; /* Default size - 17px */ color: #4d5959; font-family: "Cabin", sans-serif; font-weight: bold; }
- Change the colors of the 'add to cart' button
li.isp_grid_product input[type="submit"].isp_add_to_cart_btn {
color: blue !important; /*text color*/
background: green !important;
font-size: 12px !important; }
- Change the colors of the 'add to cart' background – upon hover
input.isp_add_to_cart_btn:hover { background: #000 !important; }
- Change the colors of the quick view button - upon hover
#isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button:hover {
color: #000 !important; background-color: (255,255,255,0.9) !important; }
- Change the colors of the quick view button
#isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button {
color: #000 !important; background-color: (255,255,255,0.9) !important; }
- Make the Add To Cart button always display
li.isp_grid_product form.isp_add_to_cart_form {
display: block; /* Display "Add to Cart" button at all times */ }
div.isp_center_container ul#isp_search_results_container li.isp_grid_product {
min-height: 435px; /* Make the grid product high enough so the "Add to Cart" button is visible. This is a custom height which might be different for each site */ }
- Make the quick view button always display on the left corner of the product
#isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button {
position: absolute !important;
left: 10% !important width: 10% !important;
display: block !important;
top: 0; }
- Change the font style:
.ui-autocomplete, .as_magento_price,.isp_price_compare_at_price_exist,.as_magento_product_name,.as_magento_product_desc, .as_magento_product_section, .n_b_acp {
font-size: 11px !important; font-weight: normal !important; }
- Change the space between items
ul.ui-autocomplete .ui-menu-item { margin: 5px 0 !important; }
- Change the "Show-all-results" footer font style
li#acp_footer_css:hover { color: #fff; } li#acp_footer_acp { font-size: 16px !important;}
- Show SKU
.as_magento_product_sku { display: block !important; }
- Changing the filters titles (attributes) design
.isp_single_facet_wrapper .isp_facet_title .isp_facet_title_name { color: #000 !important; }
- Changing the filters values (attribute values) design
#isp_left_container_facets .isp_search_res_facets_container .isp_facet_value a {
color: #000 !important; font-size: 13px !important; }
- Removing the borders between the filters
#isp_left_container_facets .isp_search_res_facets_container .isp_single_facet_wrapper {
border-bottom: none !important; }
- Spacing out the left sidebar
#isp_left_container_facets .isp_search_res_facets_container .isp_facet_value {
margin: 4px !important; }
- Avoid showing the filters counter
span.isp_facet_value_counter { display: none !important; }
- Changing the ' + Show more' and ' - Show less' design
#isp_left_container_facets .isp_search_res_facets_container .isp_facet_show_hide_values {
font-size: 0.75em !important;
color: #707070 !important;
}
- Changing the filters tags design
div#isp_search_results_filter_tags .isp_filter_removable_tag {
background-color: #e8e8e8 !important;
font-size: 0.8em !important; color: #000 !important;
}
- Changing the title design
.isp_related_title {background: transparent;text-align: center;font-size: larger;}
- Changing the image size
.isp_related_product_image_wrapper {height: 200px;}
- Changing the left & right icons
button.slick-prev {background-image: url(slick-b-left.png);}
- Changing the quick view fonts
#isp_product_quick_view_model {font-family: Raleway, sans-serif;font-weight: 400;}
- Setting the left side width
#isp_product_quick_view_model .isp_quick_view_content_left {width: 55% !important;}
- Design the "compare at price"
#isp_product_quick_view_model .isp_compare_at_price {text-decoration: line-through;font-weight: 400;margin: 0!important;}
- Design the Add to Cart button
#isp_product_quick_view_model .isp_quick_view_add_to_cart_btn_quick_view {background-color: #f4590d;border: 1px solid #f4590d;color: white;}