How to Adjust the size of predictive Searchbar image results?

karim71
Tourist
21 0 2

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.' -%}

    <a href="{{ product.url | within: collection }}" class="grid-product__link">
      <div class="grid-product__image-mask">
        {%- if fixed_aspect_ratio -%}
          <div
            class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
            data-bgset="{% render 'bgset', image: preview_image %}"
            data-sizes="auto">
          </div>
        {%- else -%}
          <div class="image-wrap"
            style="height: 0; padding-bottom: {{ 100 | divided_by: preview_image.aspect_ratio }}%;"
            >
            {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <img class="grid-product__image lazyload"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080]"
                data-aspectratio="{{ preview_image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ preview_image.alt | escape }}">
            <noscript>
              <img class="grid-product__image lazyloaded"
                src="{{ preview_image | img_url: '400x' }}"
                alt="{{ preview_image.alt | escape }}">
            </noscript>
          </div>
        {%- 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!

 

Replies 7 (7)

Hardik29418
Shopify Partner
2858 407 1073

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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
karim71
Tourist
21 0 2

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

https://shipped.de/

"veirao"

suyash1
Shopify Partner
9077 1129 1479

@karim71 - I think it will not look good

suyash1_0-1618147586935.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
karim71
Tourist
21 0 2

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

 

kikikickz.com

suyash1
Shopify Partner
9077 1129 1479

@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.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

suyash1
Shopify Partner
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

pclavell
Visitor
1 0 0

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 <img> 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 <img> 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!