Help please with wont show the product images on a collection page

Store Design
1

Hi there, I would like some help with my website. I changed some css code this morning to add a bundle deal on all bundle products and now it wont show the product images on a collection page. Can you help please?

2

Did this edit: and now i cant seem to get the product pages to show: Elegant Kitchen Kettles and Toasters Sets Matching Bundles 2024 Trends – Vibe Home

:one: Tag your bundle products

In Shopify admin:

  • Go to Products → Your Bundle Product

  • Add a tag exactly:

bundle

This is how the code knows which products get the badge.

:two: Add the badge to product cards (collections/homepage)

  1. Go to Online Store → Themes → Edit Code

  2. Open your product card file:

    • Usually card-product.liquid or product-card.liquid

  3. Paste this snippet near the top of the card (inside the card container):

{% if product.tags contains 'bundle' %}
  <div class="bundle-badge">Bundle Deal</div>
{% endif %}

:three: Add the badge on product pages

  1. Open main-product.liquid or product-template.liquid

  2. Paste this snippet near the product title or above the Add to Cart button:

{% if product.tags contains 'bundle' %}
  <div class="bundle-badge">Bundle Deal</div>
{% endif %}

:four: Style the badge

  1. Open your CSS file (base.css or theme.css)

  2. Add this CSS:

.bundle-badge {
  background: #000;            /* black background */
  color: #fff;                 /* white text */
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;          /* stays on top of image */
  top: 10px;
  left: 10px;
  z-index: 10;
  border-radius: 4px;
  letter-spacing: 1px;
}
3

Hi @vibehome ,
I think it’s coming from the badge CSS you added.

Because it’s using position: absolute and a higher z-index, it can sometimes mess with the layout if the product card/image container isn’t set properly which can make the images disappear.

You can try this:

.card,
.card__media {
position: relative;
}

Also worth quickly removing the .bundle-badge CSS and refreshing if the images come back, then that’s definitely the cause.

Then you can just adjust the positioning and add it back.

If you’re not sure which class your theme uses, feel free to share it

4

Hi, thanks so much for the message. I have spent 2 hours + trying to revert and work a fix out but no joy. If i. grant you access you could kindly check this for me as I am hopeless.

5

No need to share access here.

If you can, share the preview link. I’ll take a look.

6

ok thanks, i’ve done that - Russell Hobbs Eden Collection – Vibe Home ( all the collection pages are like this not showing the product picture)

7

.product-card-wrapper .card {
–image-padding: var(–product-card-image-padding);
}

this one missing ( check base.css)
@vibehome

8

thanks, so i am in the base.css page and where do I add this?

9

I hope there is nothing related to the product-card-wrapper ( in base.css), so you can paste the above code at the end. ( + A lot of data is missing for the card.)

10

Hey, @vibehome

This is happening because the media wrapper doesn’t have a defined width, so the image container collapses and nothing renders properly. The image exists, but without a proper width on .card__media. Fix with this..

.card .card__inner .card__media {width:100%;}

Solution
Solution1919×994 338 KB

Thanks

11

Ok great thanks so much for your help, where do i add this code please?

12

Add this, at the end of base.css file.

13

those things are already defined with CSS variable

image
image1919×866 138 KB

this whole root values are missing:.product-card-wrapper .card, .contains-card–product {
–border-radius: var(–product-card-corner-radius);
–border-width: var(–product-card-border-width);
–border-opacity: var(–product-card-border-opacity);
–shadow-horizontal-offset: var(–product-card-shadow-horizontal-offset);
–shadow-vertical-offset: var(–product-card-shadow-vertical-offset);
–shadow-blur-radius: var(–product-card-shadow-blur-radius);
–shadow-opacity: var(–product-card-shadow-opacity);
–shadow-visible: var(–product-card-shadow-visible);
–image-padding: var(–product-card-image-padding);
–text-alignment: var(–product-card-text-alignment);
}

refer dawn: Screenshot by Lightshot

14

its now working and looks great. Thank you @WizioApp . i wont be doing that again :stuck_out_tongue_winking_eye:

15

Glad it worked, happens to the best of us​:+1:

16

the only thing i can see that still happens is on this page: Elegant Kitchen Kettles and Toasters Sets Matching Bundles 2024 Trends – Vibe Home - 1 row is blank?