Shopify themes, liquid, logos, and UX
the moving banner I want as seen on watchgang.com
my store:
https://sharpenedpride.myshopify.com/
password:
urteiy
hi @jrodgers29
This is PageFly - Free Landing Page Builder.
This moving banner you want we called that scrolling margue, in order to do that it is require a lot of custom code, so i suggest you follow this instruction
https://www.w3schools.in/html/marquee-tag
If you not comfortable to do that, you should hire developer or expert to do that
Hope this helps.
Best regards,
PageFly
Yeah I was just going to copy code from google inspect and then change the images. But I'm not sure where to add the copied code to shopify and where to save the imgs so they can can be pulled by shopify.
Hi, @jrodgers29 you have images in png format or SVG that you want to add to this slider.
Yes I can get imgs fomr anywhere online, but the slider is the issue
I have developed the code for the slider please collect all images and them to me. so I can add them.
Hi @jrodgers29 , sorry for the late reply here is the code.
please go to customizer and add a new custom liquid section and paste the following code.
<style>
logo-carousel{
display:block;
overflow:hidden
}
logo-carousel.logo-carousel{
margin:25px 0;
}
@media (min-width: 992px){
logo-carousel.logo-carousel{
margin:40px 0;
}
}
logo-carousel .logo-carousel__container{
display:flex;
height: 90px;
}
logo-carousel .logo-carousel__images{
-webkit-animation-name:animate;
animation-name:animate;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-duration:var(--imgSpeed);
animation-duration:var(--imgSpeed);
display:flex;
align-items: center;
}
logo-carousel .logo-carousel__image{
flex:0 0 150px;
width:150px;
height:175px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
position:relative;
margin: 0 20px;
}
logo-carousel .logo-carousel__image{
flex:0 0 auto;
height:auto
}
logo-carousel .logo-carousel__image.empty{
background-color:#f7f7f9;
border-right:1px solid #E2E2EA
}
logo-carousel .logo-carousel__image.empty:before{
content:"6:7";
left:16px;
bottom:16px;
position:absolute;
font-family:FuturaPT-Heavy,sans-serif;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#e2e2ea;
font-size:30px;
line-height:30px
}
logo-carousel .logo-carousel__image-column{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:block
}
logo-carousel .logo-carousel__image img{
display:block;
pointer-events:none;
transition:opacity .32s ease
}
logo-carousel .logo-carousel__image-column img.lazyloaded{
opacity:1;
height: 100%;
}
.logo-carousel__image-column:hover{
opacity:0.8;
}
img[alt="GQ"]{
width: 56px;
height: auto;
opacity: .6;
}
img[alt="BuzFeed"],img[alt="NBC"],img[alt="Esquire"],img[alt="Maxim"]{
width: 90px;
height: auto;
opacity: .6;
}
img[alt="NBC"]{
width: 90px;
height: auto;
opacity: .6;
}
@-webkit-keyframes animate{
to{
-webkit-transform:translateX(-100%);
transform:translate(-100%)
}
}
@keyframes animate{
to{
-webkit-transform:translateX(-100%);
transform:translate(-100%)
}
}
</style>
<logo-carousel class="logo-carousel"><div class="logo-carousel__container">
<div class="logo-carousel__images" style="--imgSpeed: 30s;">
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/NBC-logo-90.png" alt="NBC" class="logo-carousel__image-column nbc"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Maxim_Magazine_Logo.svg.png" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/buzzfeed-logo-black-transparent-1-420x79.png" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Esquire_logo.png" alt="Esquire" class="logo-carousel__image-column esquire"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/gq-logo-png-transparent.png" alt="GQ" class="logo-carousel__image-column gq"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/NBC-logo-90.png" alt="NBC" class="logo-carousel__image-column nbc"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Maxim_Magazine_Logo.svg.png" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/buzzfeed-logo-black-transparent-1-420x79.png" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Esquire_logo.png" alt="Esquire" class="logo-carousel__image-column esquire"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/gq-logo-png-transparent.png" alt="GQ" class="logo-carousel__image-column gq"></div>
</div>
<div class="logo-carousel__images" style="--imgSpeed: 30s;">
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/NBC-logo-90.png" alt="NBC" class="logo-carousel__image-column nbc"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Maxim_Magazine_Logo.svg.png" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/buzzfeed-logo-black-transparent-1-420x79.png" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Esquire_logo.png" alt="Esquire" class="logo-carousel__image-column esquire"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/gq-logo-png-transparent.png" alt="GQ" class="logo-carousel__image-column gq"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/NBC-logo-90.png" alt="NBC" class="logo-carousel__image-column nbc"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Maxim_Magazine_Logo.svg.png" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/buzzfeed-logo-black-transparent-1-420x79.png" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/Esquire_logo.png" alt="Esquire" class="logo-carousel__image-column esquire"></div>
<div class="logo-carousel__image"><img src="https://www.linkpicture.com/q/gq-logo-png-transparent.png" alt="GQ" class="logo-carousel__image-column gq"></div>
</div>
</div>
</logo-carousel>
Wow that's incredible. is there a way to increase the size of the logos?
This was super helpful! Thank you so much! You just contributed to my first steps into the coding world, I have always wanted to add code and I even managed to edit it! Now I only have 1 question, the banner itself redirects people clicking on it to: www.linkpicture.com how to prevent that?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024