Ride Theme product card quick add modal simplify

Store Design
, ,
1

I want to change my Product Card quick add modal so it simply shows the variant options, quantity, and add to cart. No product image or title, etc.

Extra points if it can pop up with hover.

2

Hi @sjmet ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
	.quick-add-modal__content {
		width: 30% !important;
	}
}
@media screen and (min-width: 750px) {
	.quick-add-modal__content .product__media-wrapper {
		display: none !important;
	}
	.quick-add-modal__content .product__info-wrapper {
		width: 100% !important;
		max-width: 100% !important;
	}
	.quick-add-modal__content .product__title,
	.quick-add-modal__content .price,
	.quick-add-modal__content .product__view-detail,
	.quick-add-modal__content .product__text {
		display: none !important;
	}
}

Hope it helps!

1 Like
3

Thank you Litos!

This is definitely a step in the right direction.

The image still appears on mobile, and it stretches to fill the screen.

Also the quick add button of the first product card on the page disables if I open any other product’s quick add modal. This occurs on both desktop and mobile.

Button for this card starts as:

Choose options

Then if I open any another product’s quick add button it switches to:

Choose options
4

Hi @sjmet ,

Please remove code here:

Screenshot.png
Screenshot.png1144Ă—778 88.7 KB

Hope it helps!

1 Like
5

Hi @sjmet ,

I have checked and the error is caused by the app you installed: Pre‑Order & Restock | Timesact

So you can disable and test again, it will work fine. Or you can contact the app directly for support, they will help you check it quickly.

Screenshot.png
Screenshot.png1382Ă—403 24.8 KB

Hope it helps!

6

I deleted the app and the issue remains.