Shopify themes, liquid, logos, and UX
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!
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
Hi @Hardik29418 @suyash1, I appreciate your help. here you have the URL and the password to enter. thank you guys in advance, stay safe 🙂
"veirao"
@karim71 - I think it will not look good
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
@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.
@karim71 - size can be adjusted using css, therefore please share website link so we can check
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):
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024