Predictive-search Not displaying images on See All Results - Mobile

[garywornell]

Prestige Theme v10.10.0

On mobile only, predictive search works correctly and shows product thumbnails while typing in the search box. However, when I click “View All Results”, the search results page loads without product images. The product cards, titles, prices, and quick-add (+) buttons all appear correctly, but the images remain blank.

Tested on iPhone using:

• Safari

• Chrome

• DuckDuckGo

Same issue in all browsers.

On desktop, including Chrome Responsive Mode/mobile simulation, the images display normally.

I’m trying to determine whether this is:

• a known Prestige theme bug,

• an iOS Safari/lazy-loading issue,

• JavaScript conflict from an app,

• or a damaged/modified .liquid file.

Has anyone experienced this or know which file/snippet controls image loading on the search results page? Attached Screen shot.

Thanks.

[Moeed]

Hey @garywornell

I just checked and here’s a screenshot of Safari. For me it displays all fine.

Are you working on a draft theme or is the issue happening on live theme? Let me know.

Best,
Moeed

[garywornell]

Oh Moeed, That is a surprise. I’m working on this in Nepal, internet speeds can be deceptive and it could be that the images - lazy loading - may just give up. In any case, your findings are a bit of a relief and if anyone out there finds the issue then I would be very grateful to hear from them. Thanks for your time. Gary

[garywornell]

For anyone with this issue I received a response from Maestroo this morning regarding the ‘bug’. Here is their reply.
Thank you for reaching out! We’re happy to assist you!

Ah, indeed, this is a bug due to a recent Safari change, but the issue has already been fixed in recent theme versions.

If you don’t want to update the theme now, you can fix this in your current theme version by editing the product-cart.liquid file. Before editing the theme files, make sure to duplicate your theme to create a backup copy of your current version. This way, if something goes wrong, you would still have the backup.

To edit this, on line 70, replace the {% capture sizes %} by:

{%- capture sizes -%}
          {%- assign products_per_row_desktop = section.settings.products_per_row_desktop | default: 3 -%}

          {%- if stacked -%}
            (max-width: 699px) calc(100vw / {{ section.settings.products_per_row_mobile | default: 2 }}), (max-width: 999px) calc(100vw / {{ 3 | at_most: products_per_row_desktop }} - 64px), calc((100vw - 96px) / {{ products_per_row_desktop }} - (24px / {{ products_per_row_desktop }} * {{ products_per_row_desktop | minus: 1 }}))
          {%- else -%}
            (max-width: 699px) 74vw, (max-width: 999px) 38vw, calc((100vw - 96px) / {{ products_per_row_desktop }} - (24px / {{ products_per_row_desktop }} * {{ products_per_row_desktop | minus: 1 }}))
          {%- endif -%}
        {%- endcapture -%}

If you don’t have coding knowledge and aren’t sure how to edit, I can apply this fix for you.

Wish you a great day ahead!