Shopify Buy Button - image with carousel

Solved
foti
Tourist
8 1 2

Hi

 

I am using the Shopify buy button channel. I can see a way that I can disable imgwithCarousel, however this removes everything and just keeps hte image. The only option I want to disable is image selector underneath. I still want the arrows to navigate left and right of the image. Is there an option to do this at all?

 

Thanks

 

KetanKumar
Shopify Partner
17258 1869 6450

Hello, @foti 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
foti
Tourist
8 1 2

Hi Ketan,

 

Thanks for your reply.

 

The page is https://steelcitybevco.com.au/shop/soft-drinks

 

This is just a test page for now as we are still building. Its password protected. The password is abcd123

 

Cheers

 

Foti

KetanKumar
Shopify Partner
17258 1869 6450

@foti 

Thanks for UR.

Sorry for that i can't see anything can you please provide screenshot 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
foti
Tourist
8 1 2

Below is what happens when I disable "imgCarousel" - I lose the ability to navigate left and right.

 

When I turn "ImgCarousel" on I get the Left and Right navigation, PLUS the image selector on the bottom. Basically I just want to remove the image selector. Hope that makes sense.

 

image.png

0 Likes
KetanKumar
Shopify Partner
17258 1869 6450

can you please enable to slider

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
foti
Tourist
8 1 2

Sorry - do you mean enable ImgCarousel ?

0 Likes
foti
Tourist
8 1 2

This is an accepted solution.

Hi All, I was able to figure this out my own using research. The infortmation on github was able to show me how it was all working. Very useful.

 

Basically I did this by using templates: 

https://github.com/Shopify/buy-button-js/blob/master/src/templates/product.js

 

I removed the bottom section of the code and pretty much reconstructed imgwithCarousel as per below. Added this in the templates and it was good to go.

 

  imgWithCarousel: `<div class="{{data.classes.product.imgWrapper}}" data-element="product.imageWrapper">
                      <div class="main-image-wrapper">
                        <button type="button" class="carousel-button carousel-button--previous">
                          Left
                          <img class="carousel-button-arrow" src="//sdks.shopifycdn.com/buy-button/latest/arrow.svg" alt="Carousel Arrow"/>
                        </button>
                        <img class="{{data.classes.product.img}}" alt="{{data.currentImage.altText}}" src="{{data.currentImage.src}}" data-element="product.img" />
                        <button type="button" class="carousel-button carousel-button--next">
                          Right
                          <img class="carousel-button-arrow" src="//sdks.shopifycdn.com/buy-button/latest/arrow.svg" alt="Carousel Arrow"/>
                        </button>
                      </div>
                    </div>`,

 

 

0 Likes
thealiciabruce
New Member
4 0 0

Can you expand on where exactly you added this to the code? I am desperately trying to fix mine and support has been of no help!

0 Likes
foti
Tourist
8 1 2

Hi, sorry its been a while since I did this, but I pretty much had to re-code it. I followed the following guide:
https://github.com/Shopify/buy-button-js/blob/master/src/templates/product.js

The replaced the code under I added in the section. Templates: {  where "imgWithCarousel":  is with mine above.

It pretty much removed the preview on the bottom.

0 Likes