Shopify themes, liquid, logos, and UX
I wanted to add image slider so I did some coding for that but it messed up the variant picker popup.
Can you please help me fix it?
You can click on "Choose options" to see the issue
https://leechoo.com/collections/swings
Solved! Go to the solution
This is an accepted solution.
- Here is the solution for you @leechoostore
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.quick-add-modal__content-info {
flex-flow: column !important;
}
.quick-add-modal__content-info .carousel-cell:not(:first-child) {
display: none !important;
}
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
Do you want them to display like this?
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
You need to find the code that displays these images. Then put the first image outside, above the div tag with the class "carousel product__image-slider". and the style for the div tag has the class "carousel product__image-slider" as display: flex. then remove display: none from the previous code.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hey @leechoostore
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.quick-add-modal__content-info {
display: flex !important;
flex-flow: column !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it.
Best Regards,
Moeed
Thanks for your reply Moeed. I want just 1 image to be shown or maybe one big image with small images below it. Would that be possible?
Hey @leechoostore
Keep the previous code and add this new code above </style> in theme.liquid file
.quick-add-modal__content-info .carousel-cell:not(:first-child) {
display: none !important;
}
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hey thanks it fixed my issue. But is there anyway I can add rest of the images below this main image?
This is an accepted solution.
- Here is the solution for you @leechoostore
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.quick-add-modal__content-info {
flex-flow: column !important;
}
.quick-add-modal__content-info .carousel-cell:not(:first-child) {
display: none !important;
}
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hey thanks it fixed my issue. But is there anyway I can add rest of the images below this main image?
This is an accepted solution.
Do you want them to display like this?
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Yes 🙂
This is an accepted solution.
You need to find the code that displays these images. Then put the first image outside, above the div tag with the class "carousel product__image-slider". and the style for the div tag has the class "carousel product__image-slider" as display: flex. then remove display: none from the previous code.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Learn 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, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025