Why aren't product images displaying on my website?

[prinxluv]

Hello, I need help please!!

My product images are not loading all of a sudden on my website.

Other images are fine, but just the product images are not loading and it just shows white space.

The product main images are not appearing, just the title of the product is appearing.

If I click on the title and go to the product description pages, all the images are shown.

This happens in the main homepage and also in collection pages.

I did not change any codes, it normally worked just fine and problem suddenly happened.

my website is www.beabie.com.

Please Help Me!!!! Thank you..

[Kimi]

Hi, @prinxluv.

I've tried accessing your website on my end and am experiencing the same thing, even after accessing it from different browsers, devices and via incognito mode. Because of this, the issue is most likely deeper than a browser caching one.

To troubleshoot this, you can install a fresh copy of a Shopify theme by going to Online store > Themes > Explore free themes and select a theme to add to your library. From there, click on Actions > Preview, and you can then see if your product images will appear on your store's home and collection pages.

If the issues don't persist on the fresh theme, there may be a third-party code on your theme that's preventing your images from appearing as expected. Did you recently install a third-party app on your store at all?

If you need further help to look into your issues, you can contact our team so that we can take a closer look at your account from our end. We aren't able to do this via the Community Forums at this stage, but you can reach out to our support team via our help centre here. Once you've logged in to your store on our help centre, select a topic that best fits your query or situation. After that, you'll be taken to a page with a list of relevant support articles, and you can scroll to the bottom of that page to select your preferred contact method with our team. From there, our Live Support team can assist with your query further.

Just a note however, I notice you're using a third-party theme? If this is the case, because the theme you're using has been made by developers outside of Shopify, our Live Support team's scope of support might be a bit limited. Just something to keep in mind for future references too, when contacting our team to troubleshoot potential theme-related issues.

In the meantime, as we've been taking a look at your homepage here, I notice that there isn't a lot of information on your homepage that tells your visitors about your brand. It would be a great opportunity to introduce potential customers to your brand here, so that they can get a small snippet of what your business is about, beyond the products. Take a look at our resources below on homepages, in case this is an area of your store that you'd like to work on further:

• Homepage content and messaging
• Homepage design ideas and examples

[PageFly-Richard · Accepted solution]

Hi @Prinxluv

I’m Richard Nguyen from PageFly- Free Landing Page Builder

-Go to Online Store->Theme->Edit code

-Asset-> general.scss  paste the below code at the bottom of the file.

.card-image .image--style {

   position: static !important;

}

Hope my solution works perfectly for you!

Best Regards;

Richard | PageFly

[dailyhue]

Hello, I also have the same issue however when following your steps I was unable to find Geneal.scss in Assets. please advice im unsure if i have to edit this in myself as a new asset and then continue ? 

[trendytrioshop]

I can't find the general.scss. Is there a different line I can put it under?

[Techsoothe]

Sure you fixed it by now but I found that unchecking the box for they will all show up 🙂

"Hide other variants’ media after selecting a variant"

[TheContessa]

Where do I find this box to uncheck? 🙂

[d8896a]

Hi Facing same issue. But not able to find general.scss file. Please suggest what to do now.

[1122_abs]

Im facing this issue 

and this is my custom code 

<h1 class="customCollageTitle">{{ section.settings.custom_collage_title }}</h1>

<div class="customCollage">
{% for block in section.blocks %}
<div
class="customBlock"
style="
grid-area: {% case forloop.index %}
{% when 1 %} a
{% when 2 %} b
{% when 3 %} c
{% when 4 %} d
{% when 5 %} e
{% when 6 %} f
{% when 7 %} g
{% when 8 %} h
{% when 9 %} i
{% when 10 %} j
{% when 11 %} k
{% endcase %}
"
>
{% assign image_url = block.settings.collage_image | image_url: 'large' %}
{% assign image_width = 300 %}
<!-- Specify desired width in pixels -->
{% assign image_height = 200 %}
<!-- Specify desired height in pixels -->

<img
class="collageImage"
src="{{ image_url }}"
alt="{{ block.settings.title | default: 'Collage Image' }}"
width="{{ image_width }}"
height="{{ image_height }}"
>
</div>
{% endfor %}
</div>

<style>
.customCollage {
width: 100%;
display: grid;
gap: 15px;
padding: 50px;
grid-template-columns: repeat(3, 1fr); /* Adjust columns as needed */
grid-template-areas: "a a b b c d"
"e f b b g g"
"h f i j j k";
position: relative;
}

.collageImage {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}

.customBlock:hover .collageImage {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
margin: auto;
border: 15px solid white;
box-shadow: 0 0 50px crimson;
z-index: 1;
transform: scale(1.1); /* Scale up on hover */
}

.customCollageTitle {
text-align: center;
margin-bottom: 0;
font-size: clamp(15px, 5vw, 45px);
}
</style>

{% schema %}
{
"name": "Custom Collage",
"settings": [
{
"type": "text",
"id": "custom_collage_title",
"label": "Custom Collage Title"
}
],
"max_blocks": 11,
"blocks": [
{
"name": "Collage Image",
"type": "collage_image",
"settings": [
{
"type": "text",
"id": "title",
"label": "Collage Title"
},
{
"type": "image_picker",
"id": "collage_image",
"label": "Collage Image"
}
]
}
],
"presets": [
{
"name": "Custom Collage"
}
]
}
{% endschema %}

[zarhfashion]

sir in my store products is shown but when i search in Google but if someone opens my store through Instagram or Facebook then they can't find products only products prices will shown