How to Adjust the size of predictive Searchbar image results?

shipped
New Member
6 0 0

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!

 

0 Likes
HardikDavra
Shopify Partner
1850 294 810

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

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
suyash1
Shopify Partner
2718 289 451

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
shipped
New Member
6 0 0

Hi @HardikDavra @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"

0 Likes
suyash1
Shopify Partner
2718 289 451

@shipped - I think it will not look good

suyash1_0-1618147586935.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
shipped
New Member
6 0 0

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

0 Likes
suyash1
Shopify Partner
2718 289 451

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes