Not been able to add products to cart - 'add to cart' keeps loading

website is www.thecolognefactory.co.uk

So I’ve launched my shopify website but for some reason when I go to the live website and try to add something to the cart it just leaves me with the ‘add to cart button’ loading forever (circle that spins; loading icon looping continuously). Similarly, when selecting a product variant for some reason the add to cart button greys out. If I do reload the page sometimes the item appears in the cart but then when i try to remove it from the cart it just doesn’t remove - the loading icon just keeps looping.

  1. I’ve checked that all the products are in stock.

  2. I’m using the Dawn theme.

  3. It seems to be happening with more or less all the products.

  4. I’ve had the website made by someone else, they have used custom coding and their response was that this seems to be an error with the shopify theme?

  5. There seems to be an error on the console:

Chrome is moving towards a new experience that lets people make an informed choice with respect to third-party cookies.Understand this warning
product-info.js:135 TypeError: Cannot read properties of undefined (reading ‘soldOut’)
at product-info.js:201:35
at product-info.js:125:13
(anonymous) @ product-info.js:135
Promise.catch
renderProductInfo @ product-info.js:131
handleOptionValueChange @ product-info.js:73
(anonymous) @ pubsub.js:20
publish @ pubsub.js:19
(anonymous) @ global.js:1064Understand this error
media-gallery.js:90 Uncaught TypeError: Cannot read properties of undefined (reading ‘imageAvailable’)
at image.onload (media-gallery.js:90:76)
image.onload @ media-gallery.js:90
load
announceLiveRegion @ media-gallery.js:88
setActiveMedia @ media-gallery.js:70
updateMedia @ product-info.js:302
(anonymous) @ product-info.js:178
(anonymous) @ product-info.js:125
Promise.then
renderProductInfo @ product-info.js:122
handleOptionValueChange @ product-info.js:73
(anonymous) @ pubsub.js:20
publish @ pubsub.js:19
(anonymous) @ global.js:1064Understand this error
product-info.js:135 TypeError: Cannot read properties of undefined (reading ‘soldOut’)
at product-info.js:201:35
at product-info.js:125:13
(anonymous) @ product-info.js:135
Promise.catch
renderProductInfo @ product-info.js:131
handleOptionValueChange @ product-info.js:73
(anonymous) @ pubsub.js:20
publish @ pubsub.js:19
(anonymous) @ global.js:1064Understand this error
media-gallery.js:90 Uncaught TypeError: Cannot read properties of undefined (reading ‘imageAvailable’)
at image.onload (media-gallery.js:90:76)

But the problem is across the board with all the products+variants/removing them from the cart.

  1. I also deactivated shopify payments to see if that fixed the issue; but to no avail

Can anybody help?!

Hi @mmagm995

Try to sort this issue first and try again. You have a CSS code inside a script tag. Most likely at the end of theme.liquid.

Code is

/* Ensure the main product image is positioned correctly */
.product-single__photo {
    position: relative;
    z-index: 10; /* Bring the main image to the front */
}

/* Style the thumbnail container */
.product-single__thumbnails {
    display: flex; /* Arrange thumbnails in a row */
    margin-top: 10px; /* Add space above */
    z-index: 5; /* Ensure thumbnails are behind the main image */
}

/* Ensure thumbnails are not overlapping */
.product-single__thumbnails img {
    max-width: 100%; /* Keep thumbnails responsive */
    height: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between thumbnails */
}

Sorry I’m a newbie.

what exactly am I to do with the above code do I remove it ? Or place it somewhere else??

thanks

Take the CSS code out of the tag and either move it to a custom-css setting or put it in a tag.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

If after that the add to cart still doesn’t work hire someone for extended debugging and theme repair services.

You could reach out to Laza_Binaery , or me via contact info in forum signatures.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.