The file is uploaded but the add to cart button is grayed out and the buy now button is not showing. Also, the file that was uploaded is not showing. The picture showing right now is the generic product image I added to the product page.
Hi @Marlon_Mclean, could you check if the class names of the buttons are the same as in the script?
They may be different depending on the theme you use.
Thanks! It looks like the problem has nothing to do with the class names. Would you mind sharing a link to your website so I can check it live?
https://silkheirloompro.myshopify.com/products/silk-scarf
password is - money
Once you are in you need to copy and paste the link again so it will bring you to the correct page - SIlkheirloompro
Thanks! It looks like the structure of the product page in your theme slightly differs from the default one. Try adjusting the script like this
// Get widget reference
var widget = uploadcare.Widget("[role=uploadcare-uploader]");
// Get product image element
var productImage = document.querySelector(".product__media>img");
productImage.srcset = "";
// Get "buy now" button element
var buyNowBtn = document.querySelector(".shopify-payment-button__button");
// Get "add to cart" button element
var addToCartBtn = document.querySelector(".product-form__submit");
// Disable "add to cart" and "buy now" buttons
buyNowBtn.disabled = true;
addToCartBtn.disabled = true;
// This fires once a file is uploaded
widget.onUploadComplete(function (fileInfo) {
// We take CDN URL of uploaded image and set it as CSS background
// of the product image adjusting the position and size
productImage.style.background =
"url(" + uploadedImage + "-/quality/smart/" + ")";
productImage.style.backgroundSize = "10% 25%";
productImage.style.backgroundPosition = "24% 15%";
productImage.style.backgroundRepeat = "no-repeat";
// Enable "add to cart" and "buy now" once image uploaded
buyNowBtn.disabled = false;
addToCartBtn.disabled = false;
});
