Buy Button: Hi res images with carousel

bennyp1
Tourist
6 0 2

On my site I've managed to get hi res images showing in my product previews for my Buy Button by tweaking the following code:

 

"modalProduct": {
                            "contents": {
                                "img": true,
                                "imgWithCarousel": true
                            },

 

"img" was previously set to false.

However my issue now is that the carousel is now repeating the same image. I would like to remove the carousel but keep the thumbnails underneath so the user can select from them. Any ideas on how to do this?

If I change "imgWithCarousel" to false, the whole carousel disappears including the thumbnails.

Here is the full code:

 

<div id='collection-component-1599826506890'></div>
<script type="text/javascript">
/*<![CDATA[*/
    (function() {
        var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
        if (window.ShopifyBuy) {
            if (window.ShopifyBuy.UI) {
                ShopifyBuyInit();
            } else {
                loadScript();
            }
        } else {
            loadScript();
        }

        function loadScript() {
            var script = document.createElement('script');
            script.async = true;
            script.src=scriptURL;
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
            script.onload = ShopifyBuyInit;
        }

        function ShopifyBuyInit() {
            var client = ShopifyBuy.buildClient({
                domain: 'ben-peers-photo.myshopify.com',
                storefrontAccessToken: '51ac039b2caffccccdf7100ff36d9822',
            });
            ShopifyBuy.UI.onReady(client).then(function(ui) {
                ui.createComponent('collection', {
                    id: '224941899927',
                    node: document.getElementById('collection-component-1599826506890'),
                    moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
                    options: {
                        "product": {
                            "templates": {
                              "price": '<p class="{{data.classes.product.price}}">From £{{data.selectedVariant.price}}</p>'
                            },
                            "styles": {
                                "product": {
                                    "@media (min-width: 601px)": {
                                        "max-width": "calc(33.33333% - 30px)",
                                        "margin-left": "30px",
                                        "margin-bottom": "50px",
                                        "width": "calc(33.33333% - 30px)"
                                    },
                                    "img": {
                                        "height": "calc(100% - 15px)",
                                        "position": "absolute",
                                        "left": "0",
                                        "right": "0",
                                        "top": "0"
                                    },
                                    "imgWrapper": {
                                        "padding-top": "calc(75% + 15px)",
                                        "position": "relative",
                                        "height": "0"
                                    }
                                },
                                "button": {
                                    "font-weight": "bold",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    "background-color": "#000000",
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            },
                            "buttonDestination": "modal",
                            "contents": {
                                "options": false
                            },
                            "text": {
                                "button": "Choose size"
                            }
                        },
                        "productSet": {
                            "styles": {
                                "products": {
                                    "@media (min-width: 601px)": {
                                        "margin-left": "-30px"
                                    }
                                }
                            }
                        },
                        "modalProduct": {
                            "contents": {
                                "img": true,
                                "imgWithCarousel": true
                            },
                            "styles": {
                                "product": {
                                    "@media (min-width: 601px)": {
                                        "max-width": "100%",
                                        "margin-left": "0px",
                                        "margin-bottom": "0px"
                                    }
                                },
                                "button": {
                                    "font-weight": "bold",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    "background-color": "#000000",
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            },
                            "text": {
                                "button": "Add to cart"
                            }
                        },
                        "cart": {
                            "styles": {
                                "button": {
                                    "font-weight": "bold",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    "background-color": "#000000",
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            },
                            "text": {
                                "total": "Subtotal",
                                "button": "Checkout"
                            }
                        },
                        "toggle": {
                            "styles": {
                                "toggle": {
                                    "font-weight": "bold",
                                    "background-color": "#000000",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            }
                        }
                    },
                });
            });
        }
    })();
/*]]>*/
</script>

 

 

0 Likes