Venue - General - Hide the cart from your visitors
This article is for merchants who want to prevent visitors from purchasing their products online by hiding access to their store checkout page.
This article is not intended as a complete solution and technically minded visitors may still be able to discover the cart URL and other elements. Shopify is an ecommerce platform and it's almost impossible to completely disable all the commerce features of your store.
This article is not intended as a complete solution and technically minded visitors may still be able to discover the cart URL and other elements. Shopify is an ecommerce platform and it's almost impossible to completely disable all the commerce features of your store.
Recommended: If you only sell in-store and wish to disable the checkout on your store completely, then Shopify Support will be able to advise you on the options for setting this up.
The following instructions will provide you with some custom CSS code that you can add to your store to hide the following features:
- Header cart link / Header cart icon
- Product Page - Add To Cart Buttons
- Product Page - Quantity Selectors
- Homepage Featured Product - Add To Cart Button
- Homepage Featured Product - Quantity Selectors
Instructions
Warning: Before beginning, we recommend you duplicate your existing theme as a safety precaution. Follow steps 1-3 below but select Duplicate instead of Edit code at Step 3.
- 1
- Log in your Shopify store admin https://shopify.com/admin/themes
- 2
- First thing you should do is duplicate your theme for safety backup if anything goes wrong. To do this look for the Actions dropdown button next to the Customize button and select Duplicate.
- 3
-
On the theme click on the button with the three dots and select the Edit code option.
- 4
- When the code view appears scroll down and find the Assets folder on the left of the window. Inside that is the theme-critical.css file. (for the themes older than version 4.7, the file is named theme-critical.scss.liquid)
- 5
- Scroll right to the bottom of this file and once you can go no further paste in the CSS custom code below.
- 6
- Lastly save your work and then check that all is working as expected.
.product-single__add.product-single__add, .product-single__qty.product-single__qty, .product-featured__qty.product-featured__qty, .product-featured__add.product-featured__add, .js-cart-trigger.js-cart-trigger, .cart-draw-trigger-icon.cart-draw-trigger-icon, .product-btn.product-btn--hover { display: none !important; } .product-featured__price.product-featured__price { border-bottom: 0px; } .header-trigger--right.header-trigger--right { right: 30px; text-align: right; } @media screen and (max-width: 980px){ .header-trigger--right.header-trigger--right { right: 18px; } }