Jump to content

Restyling search bar and search bar results

Recommended Posts

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
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.