Jump to content

Custom CSS - search result page

Recommended Posts

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.search-results {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 10px;
}
.sqs-search-page-item .sqs-main-image-container {
    width: 100%;
    float: none !important;
    padding-right: 0 !important;
}
.sqs-search-page-item .sqs-main-image-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.sqs-search-container-item .sqs-content {
    margin-top: 10px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

@tuanphan You've helped me so much with all the codes you've shared on the squarespace forum.

Usually I can find the answer I need with all the codes you share helping people, but I can't wrap my head around this search bar page.

I want to display the results like you did it for @frauhilde, and also style a little bit the search bar so it's around 50% its width and the background colour is not white but beige like my page.

Here is my website:

https://www.simpledomus.com/

pw: simple

Link to comment
On 11/10/2020 at 5:27 PM, pramirol said:

@tuanphan You've helped me so much with all the codes you've shared on the squarespace forum.

Usually I can find the answer I need with all the codes you share helping people, but I can't wrap my head around this search bar page.

I want to display the results like you did it for @frauhilde, and also style a little bit the search bar so it's around 50% its width and the background colour is not white but beige like my page.

Here is my website:

https://www.simpledomus.com/

pw: simple

Can you share link to a search result page? I can check easier.

image.thumb.png.5f7d25c86100cc6ad5fd0adb13c2b149.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

hello @tuanphanis quite busy, can someone help me with this?

https://www.simpledomus.com/search?q=ikea  this is a search result, pw is simple

I want to style the search bar so it's around 50% its width and has the following css:

{background:#EEEDEB;
border-style:none;
  border-bottom-style:solid;
  border-bottom-color:#B5A293;
border-color: #B5A293!important;}

But I can't find the way to apply this to the search bar...

 

Also the result page I would like it to look something like the attached file, with a text under the search bar saying "search results:" and only display blog titles and categories, not the text.

 

Would so much appreciate if someone can help with this!

image.png

Link to comment
@media screen and (min-width:641px) {
.search-results {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 10px;
}
.sqs-search-page-item .sqs-main-image-container {
    width: 100%;
    float: none !important;
    padding-right: 0 !important;
}
.sqs-search-page-item .sqs-main-image-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.sqs-search-container-item .sqs-content {
    margin-top: 10px;
}
.sqs-content .sqs-content {
    display: none;
}
.sqs-search-page-input {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background: #f1f2f3; /* search background */
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

The tips on this thread have been really useful although I am struggling with the size of the search block on results page. I've managed to reduce the width to 50% but can't get the height or the font to match the block on my input page.

I've tried this code and only the width has reduced.

.sqs-search-page-input {
    width: 50%;
    height: 50%;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
}
 

 

Capture.JPG

Capture1.JPG

Link to comment
On 2/1/2021 at 2:08 AM, GordonF said:

The tips on this thread have been really useful although I am struggling with the size of the search block on results page. I've managed to reduce the width to 50% but can't get the height or the font to match the block on my input page.

I've tried this code and only the width has reduced.

.sqs-search-page-input {
    width: 50%;
    height: 50%;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
}
 

 

Capture.JPG

Capture1.JPG

Can you share link to search page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

 

Hi. I used this code on our website - it works great. Exactly what I was looking for. 🙂 Only if it is possible to do something so that the product description does not appear in the search results, but only the picture block, price and product name (as on the store page with the product list)? 🙄 

Link to comment
20 hours ago, Malwina said:

 

Hi. I used this code on our website - it works great. Exactly what I was looking for. 🙂 Only if it is possible to do something so that the product description does not appear in the search results, but only the picture block, price and product name (as on the store page with the product list)? 🙄 

Can you share link to search page? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...

Site URL: https://wrasse-sparrow-6kc9.squarespace.com/search-page (try searching "skirt")

Hi all, I've been following this thread and managed to create a gridded search result for my site. But I can't quite make the adjustments that I want to, so hoping someone can help me out here?

  1. First of all, is it possible to display the search results on the search page itself (not as a drop-down Quick View)? Same as @pramirol's search page, where once you type in a keyword, it loads and results appear below the search bar, and the url automatically changes to ".../search?q=[search term]". Currently, once I hit enter on the search bar, it goes to a separate Search Result page which I cannot seem to edit without CSS because it's not under my Pages.
  2. I would like the search results to display in the same exact format as on my Product pages, which is 4 columns, no divider lines between rows, show title, price and image of product in 3:4 image ratio, with the image being the thumbnail (if uploaded) OR the first image of that product (if product doesn't have an uploaded thumbnail). Currently, it only shows the images of products with thumbnails - I do not want to have to add thumbnails to all my products!
  3. If it has to be on the separate Search Result page, I would also like my background to be #fefcf6 , to be consistent with the rest of the pages.

Anyone's help would be sooo much appreciated 🙏

Link to comment
2 minutes ago, bloom222 said:

hoping someone can help me out here

The site is currently private so you'll need you to set a public password in the visibility settings and share it with us.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 8/22/2021 at 10:11 AM, tuanphan said:

Hi. Do you still need help?

Hi @tuanphan, I've managed to do 1 and 3 but can't figure out number 2 (product image ratio etc in search results). Regarding the thumbnail images, I've uploaded a thumbnail for all products so that they would show up in the meantime. If it's possible to show the default primary image (if no thumbnail is uploaded), then that would be great!

Link to comment
18 hours ago, bloom222 said:

Hi @tuanphan, I've managed to do 1 and 3 but can't figure out number 2 (product image ratio etc in search results). Regarding the thumbnail images, I've uploaded a thumbnail for all products so that they would show up in the meantime. If it's possible to show the default primary image (if no thumbnail is uploaded), then that would be great!

Can you share link to a search results with >5 results? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 11/6/2021 at 12:52 AM, gmwilliams said:

Hi hope you don't mind but i have tried this code,

 

Is there any way to have the images above the title and all centred?

and the images larger like the original search results?

 

Thank you

 

 

Screenshot 2021-11-05 at 17.50.00.png

Screenshot 2021-11-05 at 17.50.16.png

Can you share link to search page on your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.