Re: Help fixing variant picker

Solved

Help fixing variant picker

leechoostore
Excursionist
17 2 2

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

Accepted Solutions (3)

BSS-TekLabs
Shopify Partner
2401 695 830

This is an accepted solution.

- Here is the solution for you @leechoostore 
- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1720861738863.png

 

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2401 695 830

This is an accepted solution.

Do you want them to display like this?

BSSTekLabs_0-1720862575915.png

 

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2401 695 830

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.

BSSTekLabs_0-1720863477033.png

 

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
6719 1814 2198

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:

Moeed_0-1720861241753.png

 

If I managed to help you then, don't forget to Like it.

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


leechoostore
Excursionist
17 2 2

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?

Moeed
Shopify Partner
6719 1814 2198

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:

Moeed_0-1720862167810.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


leechoostore
Excursionist
17 2 2

Hey thanks it fixed my issue. But is there anyway I can add rest of the images below this main image?

BSS-TekLabs
Shopify Partner
2401 695 830

This is an accepted solution.

- Here is the solution for you @leechoostore 
- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1720861738863.png

 

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
leechoostore
Excursionist
17 2 2

Hey thanks it fixed my issue. But is there anyway I can add rest of the images below this main image?

BSS-TekLabs
Shopify Partner
2401 695 830

This is an accepted solution.

Do you want them to display like this?

BSSTekLabs_0-1720862575915.png

 

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
leechoostore
Excursionist
17 2 2

Yes 🙂 

BSS-TekLabs
Shopify Partner
2401 695 830

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.

BSSTekLabs_0-1720863477033.png

 

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now