Hello guys,
I’m just staring with personalizing themes and stuff in shopify , and with shopify in general.
I already did some customization to the dawn theme to fit my niche , but I would like to modify the banner and create something nicer.
I have in mind an animated banner that fades in and out between couple images.
Something like this would be super nice:
https://themes.shopify.com/themes/blockshop/styles/beauty/preview
Anyone nice enough to explain me shortly how to do that? eventually maybe they have something similar and can help me with the CSS code and guide me where do I need to add it for it to work?
Thank you very much , really appreciate it!
You can make banner like you gave refrence site.
if you have some experience on the js , css you can do this swiper js
https://swiperjs.com/
not necessarely the same , since I don’t know any css nor JS either , just a simple fade in fade out (images replacing each other) would do it , or do I need js for that aswel?
I tried to use chat gpt and add sections as he instructed me , but then when I go to theme settings I can’t find the section I created for assets and sections
code provided by chatgpt:
for HTML markup (for a new section)
and
.banner-slideshow { width: 100%; height: 300px; /* Adjust height as needed */ position: relative; overflow: hidden; } .banner-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .banner-image.active { opacity: 1; }
for new asset
then tells me to go to theme settings and add the images there but I don’t see the new section in there
you need to create the section on liquid to use this code .
I did create the section and the assets , and then I tried to include it in theme.liquid but still doesn’t show up