Shopify themes, liquid, logos, and UX
Hi, I would like to move the "Shop Now" button to the bottom of my mobile banner.Does anyone know how to do this?
If you apply the option: 'Show container on mobile' The button will be placed below the image.
This option is within the 'Mobile Design' section by selecting the banner from the Shopify customize panel.
It did move it down. I'd like it to be on the graphic under "Christmas Collection". Is that possible?
do you have some basic css skills?
Pour obtenir des réponses ultra-rapides et des personnalisations sur mesure, contactez-moi directement : https://comeup.com/fr/@guilerminmouafo
Can be done! It took me a little while to find a solution.
Look for a file called: section-image-banner.css and add the following code to the end of the document:
@media screen and (max-width: 749px) {
.banner__buttons {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}
}
I hope it helped you!
In case you don't know how to access it, simply follow these steps :
1. Online Store > 2. Themes > 3. Three points about the current theme > 4. Use the search engine to find the file > 5. Add the above code.
It worked great, thank you! but instead of editing from the code editor, I added your code in the css section on the theme editor. with a small edit:
@media screen and (max-width: 749px) {
.banner__box {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}
}
it's possible to do this by modifying the css a little.
Pour obtenir des réponses ultra-rapides et des personnalisations sur mesure, contactez-moi directement : https://comeup.com/fr/@guilerminmouafo
Okay! do you have a code? I apologize, I don't know anything about css or coding a website.
okay, to get the code I need to inspect the element before adding the css. if it's too complicated for you, I can make the changes directly in your shop if you let me.
Pour obtenir des réponses ultra-rapides et des personnalisations sur mesure, contactez-moi directement : https://comeup.com/fr/@guilerminmouafo
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025