Hello, Does anyone know how to hide the
description, color variant, and collection tabs on the quick view?
Hey @yonicque
I can’t seem to find the quick view option on your website, do you have it disabled? Let me know
Best,
Moeed
Its on mobile. You can see it there - yonicque.com
I would’ve provided you the CSS code to remove them but they’re all using the same class, I think it would be better if you remove the code directly from the quick add popup.
If you’re not familiar with coding then no worries, just drop your collaborator request code in my private messages and I’ll get it sorted out for you.
Cheers,
Moeed
I can add the code if thats ok with you
Try this code, add it at the end of theme.css file
@media (max-width: 768px) {
.modal__centered-content .product-single__vendor {
font-size: 24px;
margin-bottom: 5px;
font-weight: bolder;
}
.modal__centered-content .product-single__title {
font-size: 21px;
}
#PageContainer#PageContainer .modal__centered-content .product-block.product-block--price {
margin-bottom:0px !important;
}
.modal__centered-content .product-block {
margin-bottom: 7px !important;
}
.modal__centered-content .product-block .icon-and-text {
justify-content: center;
}
.modal__centered-content .product-block--sales-point + .product-block {
display: none;
}
.modal__centered-content .variant-wrapper:has(fieldset[name="Color"]) {
display: none !important;
}
.modal__centered-content .variant-wrapper {
text-align: center;
}
.modal__centered-content .sales-points [data-product-inventory] {
font-size: 13px !important;
}
.modal__centered-content .product-block--tab {
display: none !important
}
#PageContainer#PageContainer .modal__centered-content .grid__item {
padding-left: 0;
}
.modal__centered-content .variant-input-wrap label {
font-size: 13px !important;
}
body:has(.modal--is-active) #smile-ui-lite-container {
display:none;
}
}
It turned out beautiful, I had to hide some more components. But I noticed that when we navigate to the collection page and select the + (quick view) option it slightly adjusts from product card to product card. It doesn’t stay the same height per option.
Please see MEDIUM OUTFITS | YONICQUE – Yonicque - I noticed it happens when I select the products with the videos verse the products without the videos.
The Fairy outfit is the one giving me the problems. (black and white dress)
Do you know why its auto-adjusting like this?
Hi @yonicque
Well, I think it might be difference in video aspect ratio, so its demensions not same as images. A bit narrower. But I did not notice the issue in height, but in width. Like 100px is modal with video, narrower than one with an image.
Try to add this at the end of theme.css
@media (max-width: 768px) {
#PageContainer#PageContainer .modal__centered-content .grid__item {
min-width: 317px;
}
}
You can try adding a space after the colon, then none, then space then !important right before the semicolon
display: none !important;
Or you can try the z-index to make it appear behind the modal.
can you post the exact code?
Try this, again at end of theme.css but also remove some leftovers there
@media (max-width: 768px) {
html.modal-open #shopify-chat {
display:none !important;
}
}
Leftovers I see
________________________________________ {
}
It looks beyond amazing now. Thank you!
Hello @Laza_Binaery I noticed that the code you’ve placed to hide the icon for both the rewards/chat only works for the quick view. I reached out to Klaviyo in regards to our Wheel Marketing sign up form, because I knew that it was on their end and not your code. They suggested that they could not fix this. Can you please assist me to applying the hide icons code to this form too on mobile?
For some reason @Laza_Binaery the buy now button is displaying a subscription message when none of our products are set for subscription. I removed the subscription messaging but its still displaying. Do you know where this is coming from
Please disregard the last issue - The motion theme developers provided me with code:
small#shopify-buyer-consent-modal {
**display: none;**
}
To hide those two buttons when the wheel is visible on mobile, add the following code to the end of theme.css
@media (max-width: 768px) {
body.klaviyo-prevent-body-scrolling #smile-ui-lite-container {
display: none !important;
}
body.klaviyo-prevent-body-scrolling #shopify-chat {
display: none !important;
}
}
They are still showing with the menu. Is there a way we can hide it here? @Laza_Binaery
Yes, similar code
@media (max-width: 768px) {
html.js-drawer-open #smile-ui-lite-container {
display: none !important;
}
html.js-drawer-open #shopify-chat {
display: none !important;
}
html.js-drawer-open .needsclick {
display: none !important;
}
}
Brilliant its fixed now. I appreciate you! @Laza_Binaery