When you press add to cart from the collection, I am getting a pop up but I want a mini product page below (see Images) How can I do this?
Store url: www.lachique.co
Thank you
Topic summary
A user wants to modify their store’s “add to cart” behavior on collection pages. Currently, clicking “add to cart” triggers a popup, but they want to display a mini product page sliding in from the side instead (similar to Hampton Lane’s implementation).
Proposed Solution:
- Navigate to: Online Store → Theme → Edit Code
- Open
theme.liquidfile - Add custom CSS code within
{% style %}{% endstyle %}tags - The code targets specific product page elements when
template.name == 'product' - Uses
display: none !importantto hide certain blocks (product-price, shopify-app-block, sales-point-block)
Status: The discussion appears to be providing a technical CSS-based workaround, though the solution seems incomplete as the code snippet cuts off mid-implementation. The approach focuses on hiding elements rather than fully implementing the sliding mini product page functionality requested.
yes, whenever you press add to cart/quickview I want at a product page coming from the side like: https://www.hamptonlaneco.com/
-
Navigate online store → theme → edit code.
-
Open theme.liquid and then put following code in {% style %}{% endstyle %}
{% if template.name == ‘product’ %}
.product-block–sales-point {
display: none !important;
}
.shopify-app-block {
display: none !important;
}
.product-block–price + div {
display: none !important;
}
{% endif %}