Images forced to a grid, cant find custom code in theme

[N8Aquatics]

Hi everyone!

Early on in my websites development I had the silly idea to add some custom code to the theme in one of the many editors, I am not wanting to change the way the images display on product pages using the theme editor in shopify, but due to the custom code, no matter what settings I change in the theme editor the site displays the images based on the custom code.

I have attached a screenshot of the live page; You can see its stacked in a 2x2 grid layout, whereas the settings saved in the theme editor are for carousel (hero large, thumbnails smaller underneath). No matter what I change in theme editor, the code overrides it.

I guess I just need help locating where the code likely is that I added, as my ADHD memory just cannot seem to find it and I have scrolled so many editors now in the code editor.

If anyone can give me some advice on this or how to fix it? (Also I did have backups from when I changed the code, but it was so early on in development I would lose all the other changes).

Thanks team!

[Maximus3]

You sure you’re not pulling from cached version?

[N8Aquatics]

Wow! So you just pulled this from the live website?

[Maximus3]

Try it in incognito. Also, people are accustomed to a side-by-side view of the product page, images on one side/info on other side. The top-down setup looks pretty bad, especially on my huge monitor.

[N8Aquatics]

Yeah I actually want it side by side now haha which is why I am trying to fix this, my theme is dawn; Is there a section in the Theme Editor to have them left/right aligned?

[Maximus3]

Looking at it in the dev console, there is a css code here that makes the width 100%. Look for that and take that out. Probably the max-width as well.

[N8Aquatics]

Does this look better now?

[N8Aquatics]

The whole reason I went down this rabbit hole to try and fix this is I am having a lcp problem and I cant seem to figure out why, as seen in attached screenshot, file is compressed, now have changed everything but still 7s

[Maximus3]

Sometimes when you make a change and re-analyze it will give you a cached result. I ran it on the url on screen and it gave me a mobile performance score of 38 (layout shift). Gutted the url to base canonical product page, ran it twice and it gave me 80 and 67.

Try not to rely on this bot-ran speed index too much. It’s good to know, but it won’t give you the real world data that you need. Google has been rolling out real-user CrUX data reliance more and more over the last few years. Again, good to know so you can fix things, but honestly the PageSpeed Insights is not the end all be all. I have checked the top competitors in my field and their scores are atrocious. My speed experience for your store wasn’t bad at all, both on mobile and desktop.

[N8Aquatics]

Wow thank you so much for such a detailed and in-depth reply! I greatly appreciate it as it has been a mission to get this all set up on my own whilst juggling the physical business.

I ran an ad campaign a while ago for my Artemia Brine Shrimp product when it launched, and MS Clarity showed most people who clicked the ad to come to the product page left between 1-4 seconds, but when you checked their recording, it seems as though the page never loaded for them.

So my worry when I initially ran the test was that the important content loaded too late/the page entirely loaded too late and they left before it loaded (I would do that too personally, like skipping an ad on youtube).

I checked the data via the bot-ran tool and initially it have me a LCP of 13.7s! Which obviously is incredibly slow. Having done some changes to apps and the layout we have gotten it down to 7 seconds, which is a cut of 6s! So I am happy to leave it now.

I also struggled with conversions, we had over 600 site landings from 6k impressions, but 0 conversions (even with an offered 15% discount), granted the site/artemia page looked far worse back then - I figured something had to be broken, we never even had someone add the product to cart!

So now I am just trying to iron out everything before running another batch of ads to see how the performance looks and what insights have changed after optimizing/making content better!

[tim_tairli]

To fight LCP you may also try this:

1. Previously, converting your images from PNG to JPEG significantly lowered image files size. Granted, Shopify image engine will serve these images as WEBP anyway (if visitors browser supports), but having jpeg source may still be faster.

2. Try using LCP image preload.
   When preload is requested, server kinda tells browser: “Start downloading these files right now, do not wait until you see them linked in HTML code”.
   If you can preload your LCP image, it will load in parallel with page HTML and will finish loading noticeably faster.

For clean Dawn theme I’d go to

snippets/product-thumbnail.liquid

And modify it like this

{% liquid 
  assign preload = false

  if lazy_load == false and template.name == "product"
    assign preload = true
  endif
%}

<div class="product__media media media--transparent">
  {{
    media.preview_image
    | image_url: width: 1946
    | image_tag:
      class: image_class,
      loading: lazy,
      sizes: sizes,
      widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',

      preload: preload
  }}

Have not tested this recently though, and may need some adapting to your theme…