Hey guys,
Was hoping someone could help with button postion i would like to have the buttons placed ontop of the images not the bottom.
Topic summary
A user seeks help repositioning buttons to appear on top of images instead of below them in their Shopify store.
Two CSS solutions were provided:
-
BSSCommerce-B2B’s approach:
- Navigate to Admin → Online store → Theme → Edit code
- Locate the
base.cssfile - Add CSS targeting
.slick-list .multicolumn-card.content-containerwithdisplay: grid!importantand.multicolumn-card .image-wrapperwithorder: 2!important
-
Dan-From-Ryviu’s alternative:
- Add custom CSS directly to the multiple column section
- Use
.multicolumn-cardwithdisplay: flexandflex-direction: column-reverse
Both solutions include screenshots demonstrating the expected results. The discussion remains open with no indication of which solution the original poster implemented.
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file base.css
Step 3. Add this code to the end of file
.slick-list .multicolumn-card.content-container {
display: grid!important;
}
.slick-list .multicolumn-card.content-container .multicolumn-card__image-wrapper {
order: 2!important;
}
Result:
If it helps you, please like and mark it as the solution.
Best Regards
1 Like
You can do that by adding this code to Custom CSS of that multiple column section
.multicolumn-card {
display: flex;
flex-direction: column-reverse;
}
1 Like