Editing Product Image Wrapper "Shipping Badge"

Shopify Discussion
1

Hi there,

I had someone help me years ago edit the code on my site to include a shipping badge that goes over the image on product pages to say “ships in 2-3 weeks” if the product is marked as out of stock or I’m not tracking inventory.

I cannot for the life of me figure out where this code is. I managed to update the code that displays under the add to cart button, but need the badge over the image to match. I can SEE the code when I view the source on a product page, I just don’t know what template/asset/section it’s in within my shop’s code to be able to edit it. Can anyone view this page and tell me where I can find this to edit it!?

Here’s an example: https://campclever.co/products/2023-floral-tea-towel-calendar I want the black circle to read “ships in 1-2 weeks”

Copy of the code I’ve found when viewing the source but cannot find within my shop code:

Ships in 2-3 Weeks

<img id=“ProductImage-29081328517191”

class=“product-single__image lazyload”

src=“//cdn.shopify.com/s/files/1/2657/1156/products/2023floralmockup_300x300.jpg?v=1666892536”

data-src=“//cdn.shopify.com/s/files/1/2657/1156/products/2023floralmockup_{width}x.jpg?v=1666892536”

data-widths=“[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]”

data-aspectratio=“1.0”

data-sizes=“auto”

alt=“2023 floral tea towel calendar”>
2

It’s easy to find that element if you have access to the theme files.

We do not (we are not logged in) so there is no way to tell.

Here is a hack. It’s not pretty but it works. Go to edit code in your theme and add this to end of any CSS file like style.css, base.css, whatever is the largest main .css file

span#shipping-badge-text{
    font-size:0 !important;
}

span#shipping-badge-text:after {
    content:"Ships in 2 weeks";
    font-size:13px !important;
}

CleanShot 2022-10-28 at 15.59.33@2x.jpg
CleanShot 2022-10-28 at 15.59.33@2x.jpg2530×1274 165 KB

You can edit the desired text this way.

I recommend doing a more professional solution for long term :slightly_smiling_face: This is only one we can give to you without access to store.

Feel free to dm me for more help.

3

Thank you so much, this is a great temporary fix and does exactly what I need for now. I will need to do a total overhaul of my site soon for sure so I’ll keep that in mind. Appreciate your assistance!

4

No problem :slightly_smiling_face:
ps. If it was helpful and solved the issue, you can mark the answer as a correct one.