Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Restyling search bar and search bar results



Hi there 

This is my website url: https://www.astoud.com/

There are a few thing that i am trying to adjust on my website search bar 

1. Change font size, weight (bold), and all cap 

2. Change the "type to search" from the search bar to something else

3. Result only so product title (doesn't work on mobile) and tags, prices (if possible) 

4. For the result change the font size and weight of the product name 

5. Resize the spacing and image size between results

6. Remove the black border box 

7. Also please take a look at mobile version as well 

Here are the code for search bar that i currently use 

.search-input { border-left:
none!important; border-top:
none!important; border-right
:none!important; border-bottom: 2px
solid #000000!important }

.sqs-search-page-item .sqs-main-image-container {
    width: 50%;
    float: 3px !important;
    padding-right: 0 !important;

.sqs-block-button-element {width: 80% }
div.sqs-search-page-item .sqs-main-image-container {
    margin-bottom: 20px !important;

div.sqs-search-page-item .sqs-content .sqs-content {
  display: none !important;}

.sqs-search-page-item .sqs-main-image-container img {
    width: 30% !important;
    height: auto !important;
    top: 0 !important; bottom: 0 !important; right: 5px !important ;
    left: 0 !important;

 Thank in advance 

Screenshot (195).png

Screenshot (196).png

Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...