Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an 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&width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';
targetElement.appendChild(newDiv);
}
});
</script>
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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&width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&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.
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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
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&width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&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.
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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&width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';
targetElement.appendChild(newDiv);
}
});
</script>
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
I have seen that problem. Please wait for me a few minutes.
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
This is an 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&width=900" alt="Brase Breizh" srcset="//brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=390 390w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=585 585w, //brasebreizh.fr/cdn/shop/files/thumbnail_Illustration_sans_titre_3.png?v=1716533549&width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';
targetElement.appendChild(newDiv);
}
});
</script>
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
it works perfectly thanks a lot
i've an other question on an other post if you know the answer it will be great
Is that possible with this logo : https://cdn.shopify.com/s/files/1/0827/5528/9434/files/thumbnail_Illustration_sans_titre.png?v=17165...
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.
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Here you are @BSSCommerce-TA
https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791
thanks a lot
@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&width=900" alt="Brase Breizh" srcset="https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 ?v=1716533549&width=390 390w, https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 ?v=1716533549&width=585 585w, https://cdn.shopify.com/s/files/1/0827/5528/9434/files/logo.png?v=1718902791 ?v=1716533549&width=780 780w" width="390" height="97.00102354145342" loading="eager" class="header__heading-logo motion-reduce"></div>';
targetElement.appendChild(newDiv);
}
});
</script>
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024