Collection Page Show and Hide 'Add to Cart' Option

[Gii]

Hi there,

I’m trying to add a show/hide feature on the collection page similar to this but we need to include variation options:

https://shop.thenewtinsomerset.com/uk/pl/182/categories/farm-shop/staples/grains-rice-pasta

I am using Prestige theme (not 2.0 as we had alot of customisations prior to this launching).

Does anyone know of any apps that use this functionality?

[BSS-Commerce]

Hi @Gii ,

Step 1: Go to Admin → Select the live Theme you are using → Select Edit code

Step 2: Add the following code to the theme.liquid file and in front of the tag (as shown in the image below)

x-add-to-cart-button.x-add-to-cart-button {
    display: none;
}

.action.ng-star-inserted {
    display: none;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .shop .x-product-list-item {
        padding-bottom: 0px;
        transition: none;
    }
    .shop .x-product-list-item.adding-to-cart,.shop .x-product-list-item:hover {
        padding-bottom: unset;
    }
}

Result: Add to cart and Option variant button hidden


[Gii]

The website example I sent was purely for functionality reference. We want to use the feature on a different website.