Refresh theme - Add a picture or my logo under my slider video

[BraseBreizh]

HI 

My website is : https://www.brasebreizh.fr 

I would like to add my logo under my video slider, I would like it centered and not big

could you help me ?

Thanks a lot 

[BSSCommerce-TA]

Hi @BraseBreizh 

We checked and it looks like you are using Custom Liquid for your videos. You can insert this code to the Liquid code field like this

<img src="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce" sizes="(max-width: 780px) 50vw, 390px" style="
    position: absolute;
    bottom: 70px;
    right: 20px;
    width: 200px;
">
    

Save the settings and continue adding css code

Navigate to Online store => Themes => Edit code
Find the base.css file and add insert this code to your file css

.color-scheme-3.gradient div {
    position: relative;
}

The editing result will look like this:

Hope this can help you.

[BraseBreizh]

Hi 

I am Sorry that's not what i Wanted 

I would like to add a picture (my logo) between my slider and the bloc below but always keep my logo where it's too

[BSSCommerce-TA]

Hi @BraseBreizh,

Is this what you want?

Follow these steps:
step 1: Navigate to Online store => Themes => Edit code
stap 2: Find the theme.liquid file and add insert this code to your file (insert this code above tag </body> like this)

 <script>
      document.addEventListener('DOMContentLoaded', function() {
          var targetElement = document.querySelector('.shopify-section-group-header-group .color-scheme-1.gradient');

          if (targetElement) {
              var newDiv = document.createElement('div');

              newDiv.innerHTML = '<div style="display: flex;justify-content: center;background: #202020;"><img src="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';

              targetElement.appendChild(newDiv);
          }
      });
    </script>

 Hope this can help you.

[BraseBreizh]

Hi @BSSCommerce-TA 

I have had the code but it's not working any idea ?

[BSSCommerce-TA]

Hi @BraseBreizh ,

I'm so sorry that I sent the code incorrectly before. Please replace it with this code.

<script>
document.addEventListener('DOMContentLoaded', function() {
var targetElement = document.querySelector('.shopify-section-group-header-group .color-scheme-3.gradient');

if (targetElement) {
var newDiv = document.createElement('div');

newDiv.innerHTML = '<div style="display: flex;justify-content: center;background: #202020;"><img src="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';

targetElement.appendChild(newDiv);
}
});
</script>

[BraseBreizh]

thanks @BSSCommerce-TA but still not working, the logo is not at good place 😕

[BSSCommerce-TA]

I have seen that problem. Please wait for me a few minutes.

[BSSCommerce-TA · Accepted solution]

Hey @BraseBreizh ,
Here is the exact code for your problem. Please replace it

<script>
document.addEventListener('DOMContentLoaded', function() {
    var targetElements = document.querySelectorAll('.shopify-section-group-header-group .color-scheme-3.gradient');

    if (targetElements.length >= 4) {
        var targetElement = targetElements[3]; 

        var newDiv = document.createElement('div');

        newDiv.innerHTML = '<div style="display: flex;justify-content: center;background: #202020;"><img src="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&amp;width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';

        targetElement.appendChild(newDiv);
    }
});
</script>

[BraseBreizh]

it works perfectly thanks a lot

i've an other question on an other post if you know the answer it will be great

[BraseBreizh]

Is that possible with this logo : https://cdn.shopify.com/s/files/1/0827/5528/9434/files/thumbnail_Illustration_sans_titre.png?v=17165... 

@BSSCommerce-TA 

[BSSCommerce-TA]

@BraseBreizh ,

That's possible, but please send me a photo with a smaller background area. The photo you are sending has a very large background area, which makes the logo not look good.

[BraseBreizh]

Here you are @BSSCommerce-TA 

https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 

thanks a lot

[BSSCommerce-TA]

@BraseBreizh ,
Please replace it with this code

<script>
document.addEventListener('DOMContentLoaded', function() {
    var targetElements = document.querySelectorAll('.shopify-section-group-header-group .color-scheme-3.gradient');

    if (targetElements.length >= 4) {
        var targetElement = targetElements[3]; 
    
        var newDiv = document.createElement('div');
    
        newDiv.innerHTML = '<div style="display: flex;justify-content: center;background: #202020;"><img src="https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 ?v=1716533549&amp;width=900" alt="Brase Breizh" srcset="https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 ?v=1716533549&amp;width=390 390w, https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 ?v=1716533549&amp;width=585 585w, https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 ?v=1716533549&amp;width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';
    
        targetElement.appendChild(newDiv);
    }
});
</script>