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
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024