Product image overlay

Highlighted
Shopify Partner
13 0 1

Hi.

 

Any css expert to help up abit. Im trying to overlay the product image with my custom image (sale logo). I had taken solution  from one of the post here and make exactly the same, but it behave differently. I found out other topics here and googled, but cant resolve on my own.

 

On the main page it looks ok (wanted to reduce transparency abit, but cant find also how to do)

https://topkidzdesign.myshopify.com/ (top featured collection. This is a custom created section with custom "product-grid-item.liquid")

 

But inside collection the images cant appear (this is original  "product-grid-item.liquid" with added overlay SPAN)

https://topkidzdesign.myshopify.com/collections/test  (now i added image overlay there for all items just to see)

 

The whole idea is to create a sale items, which will also show sale image for these items in collections, this will also disappear by the timer. I already have a control flow on paper for main page, collections, products, and have tested some, all works, except stuck with image overlay. I know there is an apps to do it, but im trying to avoid apps as much as i can, as once it is disappear from the App store, i will have headache, so i rather don't implement than depends on the 3rd parties.

 

This is what inside CSS:

 

 

.sale-badge { 
body { 
  color:white; 
}
background-image:url(https://cdn.shopify.com/s/files/1/0101/5264/0612/files/5_Off_Small_792c6e41-596e-4f0c-baaa-4eaee8cfdd3c.png?8375406667756142623);
background-position:0 0;
background-repeat:no-repeat;
height:80px;
position:absolute;
text-indent:-3em;
width:80px;
}

 

This is inside "product-grid-item":

 

 

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

  <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}
          <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
        {% endif %}
        {% if product.featured_image %}

<span class="sale-badge"></span>

{%- assign image = product.featured_image -%} {%- assign max_width = width | plus: 0 -%} {%- assign max_height = height | plus: 0 -%} {%- include 'image-logic' with width: max_width, height: max_height -%} {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px"> <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"> <img class="lazyload no-js" data-src="{{ img_url }}" data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto" alt="{{ image.alt | escape }}" {% comment %}style="max-height: {{ height }}px;">{% endcomment %}> </div> </div> <noscript>

 

I guess its interfering with these items, but cant find a solution to overwrite this just for my image:

 

.sold-out {
  .product-grid-image,
  .product-list-image {
    position: relative;
    img {
      opacity: 0.7;
    }


.product-grid-image {
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin: 0 auto $gutter/2;

  img {
    display: block;
    margin: 0 auto;
    @include transition(opacity 0.3s ease-out);
    @include backface();
  }
}

 

 

0 Likes
Highlighted
Shopify Partner
1839 176 680

Hi Tommy,

 

The opacity is easy to adjust - the CSS property is literally called opacity. You already set the base opacity in your sold-out class nested in img selector and set to 0.7 - to make it more opaque, increase the value, to make it more transparent, decrease the value.

 

As for the more important part

 


But inside collection the images cant appear (this is original  "product-grid-item.liquid" with added overlay SPAN)

https://topkidzdesign.myshopify.com/collections/test  (now i added image overlay there for all items just to see)


Could you try and explain that a little different - I am not sure what you are trying to achieve or what is blocking you there?

Thanks in advance and best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Shopify Partner
13 0 1

Hi Karl

Basically just want the same as on main page - overlay images to appear. The issue is - what you saw classes - sold-out, product-grid-image and img - is a original Shopify classes set for product images which i currently can't overwrite when overlaying my image. 

0 Likes
Highlighted
Shopify Partner
13 0 1

Had set this style in CSS, but the image still stucking on the left

.sale-badge { 
background-image:url(https://cdn.shopify.com/s/files/1/0101/5264/0612/files/5_Off_Small_792c6e41-596e-4f0c-baaa-4eaee8cfdd3c.png?8375406667756142623);
background-repeat:no-repeat;
background-position:0px 0px;
height:80px;
position:absolute;
opacity: 0.6;
text-indent:-3em;
width:80px;
}

i put it with DIV container or with SPAN, both option are stucking on the side of the product image, no overlapping it. When i put it inside Product image container, image opacity is follow shopify class, which is like 0.3 and can't overwrite, i try it inside CSS and inside HTML, both no effect. 

 

aaa.jpg

0 Likes
Highlighted
Shopify Partner
13 0 1

Ended up contacting Shopify Support, because my theme is Free, so they helped me to set up the image overlay. Thx alot to Darragh!! Now all works flawlessly.. Some additional divs were created and magic peace of CSS was added, some lines are more advance coding there, so not possible to do for a beginner (but i think depends on your theme structure also).

1 Like
Highlighted
New Member
1 0 1

Hey Tommy12,

I am looking at the same thing as you.
If you wouldn't mind, could you share the various edits and CSS you changed to get it working?

Thank you
Tim

1 Like
Highlighted
Shopify Partner
228 27 47

@StylePort 

Please give your store URL. to check this and provide solution.

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
0 Likes