How to Adjust the size of predictive Searchbar image results?

Store Design
1

Dear Shopify Community,

I need your help. I want to rearrange the size of the images getting showed when using the searchbar.

Asking the support of my theme, they redirected me to someone who charges 75$ for such a minor change.

I digged through the code and i found this under “product-grid-item.liquid”

{%- liquid
      assign fixed_aspect_ratio = false
      unless settings.product_grid_image_size == 'natural'
        assign fixed_aspect_ratio = true
      endunless
    -%}

    {%- assign preview_image = product.featured_media.preview_image -%}
    {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

    
      

        {%- if fixed_aspect_ratio -%}
          

          

        {%- else -%}
          
            {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            
            
          

        {%- endif -%}

Im pretty sure i have to edit something here as the support told me that the theme is following the code of the product grid. the images are squared right now (100x100,200x200) but I want them to be 100x60

appreciate any help!

2

For that, I need to analyze your website and then I can provide any solution over here.

So Please provide website URL and if your store is password protected then also provide password

2 Likes
3

@karim71 - size can be adjusted using css, therefore please share website link so we can check

4

Hi @Hardik29418 @suyash1 , I appreciate your help. here you have the URL and the password to enter. thank you guys in advance, stay safe :slightly_smiling_face:

https://shipped.de/

“veirao”

5

@karim71 - I think it will not look good

suyash1_0-1618147586935.png
suyash1_0-1618147586935.png1366×768 90.6 KB

6

Have a look onto this website, they are using the same theme, therefore the same search bar and somehow they made it look good

7

@karim71 - it is because their original image is square which is 200x120 and yours is 200x200

you too upload square images and it will work good.

8

I know this is old, but for people looking for an answer these days…

  1. If you can access the theme files, download it.

  2. Inspect the classes of the tag in the front when the predictive search return the images. In my case one of them is “predictive-search-item__image”.

  3. Look for it in the theme files downloaded earlier.

  4. Surely you’ll see it in css and js files.

In my case I found it in theme.js, in a function that returns the images from the search ajax call, and the code is as follows (simplified):

function renderProductImage(product) {
return [
‘<img class=“predictive-search-item__image src=”’ +
product.image.src + "';
}

So you need to replace the image url according to your needs, before the tag is returned.
In my case I replaced the ‘100x.jpg’ to a bigger resolution. You can try different resolutions in the inspector (changing the filename), until you find one that works (or search which resizes shopify does).

Replace filename code:

let product_image = product.image.url.replaceAll(‘100x.jpg’, ‘600x.jpg’);

So the final code is:

function renderProductImage(product) {
let product_image = product.image.url.replaceAll(‘100x.jpg’, ‘600x.jpg’);
return [
‘<img class=“predictive-search-item__image src=”’ +
product_image + "';
}

Hope that helps!