Ride Theme product card quick add modal simplify

Store Design
, ,

Topic summary

Goal: simplify the product card quick add modal to only show variant options, quantity, and add-to-cart; optionally open on hover.

Changes shared: a CSS snippet to narrow the modal on desktop and hide image, title, price, and extra text for screens ≥750px. This partially worked.

Issues reported: on mobile, the product image still shows and stretches to full screen. Additionally, after opening any other product’s quick add modal, the first product card’s quick add button becomes disabled on both desktop and mobile.

Diagnostics: a screenshot indicated code to remove, and an app (Pre‑Order & Restock | Timesact) was identified as the likely cause of the disabling behavior, with advice to disable or contact the app’s support.

Latest update: the app was deleted, but the button-disabling issue remains. No confirmed fix yet.

Key open points:

  • How to hide the image on mobile within the quick add modal.
  • Root cause of the quick add button disabling after app removal.

Context notes: CSS and HTML snippets are central to the issue, and screenshots were used to point out code and the implicated app.

Status: ongoing, no resolution or action items beyond app removal and code adjustments mentioned.

Summarized with AI on January 31. AI used: gpt-5.
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.