Open sc1zzle opened 5 years ago
`"modalProduct": { "contents": { "img": false, "imgWithCarousel": true, "variantTitle": false, "buttonWithQuantity": true, "button": false, "quantity": false },
"templates": {
"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}}" src="{{data.currentImage.srcLarge}}" 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 class="{{data.classes.product.carousel}}">{{#data.carouselImages}}<a data-element="product.carouselitem" href="{{src}}" class="{{data.classes.product.carouselItem}} {{#isSelected}} {{data.classes.product.carouselItemSelected}} {{/isSelected}}" data-image-id="{{id}}" style="background-image: url({{carouselSrc}})"></a>{{/data.carouselImages}}</div></div>'
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px",
}
},
"button": {
"background-color": "#36cbe0",
"font-family": "Lato, sans-serif",
"padding-left": "30px",
"padding-right": "30px",
":hover": {
"background-color": "#31b7ca"
},`
Been trying to figure out how to do this very thing for the last week and having no luck. I know this has been dormant since August but just curious if there's been any headway in figuring out a work-around to this?
I also would like to see how to do this in the Buy Button for the Collections. The photos in the item preview are too small and my client would like them to zoom when hovered over. Is this possible? I am new to this
A zoom / lighbox option on the carousel image would be great as the image is just to small to see all details of a product.
Has anyone figured out a way to add zoom to the product details modal carousel for a shopify buy button? I have a WP site of a client who is requesting this customization to the buy button.