Hello,
I have the motion theme and I am trying to add the quick add section to our website for MOBILE devices using the Al assistant, but it is not working. Is this possible?
1 Like
What exactly would you write in the AL assister because I’ve written please make Quick Add visible on mobile for product card and its not showing and I also requested it for the collection page product grid.
1 Like
I really need to add it for mobile, the customers do not visit desktop as often and the developers do not want to add it because they say it may make the website slower. It hate that I purchased this theme and it doesn’t have this feature. I need it because I am an online premium boutique owner.
1 Like
I am looking for an easy approach that could be added right now effectively and efficiently as possible for our customers.
2 Likes
This sounds easy but how can I do this or word this with the Shopify AI assistant tool?
1 Like
Yes, please send me the code here. I can add it now.
1 Like
on all of the featured sections, including the collection grids. ( you may like sections) etc
1 Like
Absolutely DO NOT give these scammers your email, or contact them off the public forum.
2 Likes
Wonderful, thank you!
Would you happen to know how to fix this?
1 Like
Your theme already has a Quick View Modal which is like a pop-up. It’s on the upper right corner of the product card when you hover. This pop-up is your theme’s version of the quick buy button.
Otherwise, yes you can absolutely ask Sidekick to help you create a true add to cart or buy now button. The problem is that Sidekick can’t directly edit from the code editor (it’s needed to add a block to the product card). So you need to be able to do that if you want it to be a block and not a section…
Here’s some questions you can ask:
I need a quick add button on the product card
I'd like to add an actual add to cart button on the product card
Can you create a custom liquid add to cart block within the product card
Sidekick is pretty good, but it’s not perfect, and a lot of the time it relies on previous knowledge, not necessarily what is actually going on on your end, so you have to be persistent. Keep asking it, keep saying that doesn’t work. Especially in other things like Flow.
It should tell you to add some schema code to the product-card snippet or something similar. Then some more code to add to product-card.liquid then some javascript. It’s not as easy as “enabling it through css” like others have said.
1 Like
This topic is temporarily closed for at least 4 hours due to a large number of community flags.
This topic was automatically opened after 12 hours.
Hi @yonicque
Motion theme has a Quick Add feature; check the Theme settings under Product Tiles.
Select the “Enable quick shop feature” that will display on the desktop. And I do not know why you say
It is literally the first feature they have on their theme page
But to get back to the issue, even if you enable it will show on hover on desktop, but for mobile, they decided to hide it. I would leave Quick Add on the desktop as it is , it i snice feature and to be consistent with mobile too, but if you really want to hide it, then use
.grid-product__content .quick-product__btn {
display: none !important;
}
Copy that code to the end of assets/theme.css. But the main thing is to show on mobile use this code after the previous one, or just at the end of the same theme.css.
@media (max-width: 768px) {
.grid-product__content .quick-product__btn {
display: block !important;
opacity: 1;
}
}
That should be enough.
And also do remove all AI-genreated code that did not work.
When I tried to add it - The method only worked for hiding it on desktop but on mobile it did not open once the + sign (quick add) was opened. It doesn’t show any options nor a box to add on mobile. Do you know why is this so? I also tried to adjust the size of the mobile pixels and it still did not work.
I tried it and it created an add to cart section but not within the grid like we’d hoped.
The quick shop modal, is just a popup. Not much different than clicking on the product and being directed to the product page. For some reason your theme designed it to not be active on mobile, so that’s probably why the button doesn’t do anything when you click it even if it is visible.
As for an ATC button on mobile, your products have many variants that need to be chosen, so a simple add to cart button isn’t a very good idea, and either a pop-up window or a complete product page is a better option, especially when you have limited space like mobile. The site has many things on screen as it is. I think I already told you that before but it’s worth noting again, since you want to add more things.
There’s nothing wrong with clicking on a product card and going to the product page. Most people prefer this anyway. Even when I do implement a quick add feature, it rarely gets used.
1 Like
I see now, my bad.
There is JavaScript code that prevents events on mobile as there is no hover on mobile. I tried to add some code but no luck. Got it to work, but you have to tap Quick add two times to show, but that is not good for customers.
And here was code to adjust the size and position of the circle, but no need for now
.quick-product__btn {
height: 35px;
right: 5px !important;
top: -10px;
width: 35px;
z-index: 2;
}
I do not have access to the code directly, but trying from browser. And will update you if I find good solution.
1 Like
I appreciate you helping. I really hate using external apps especially when it can be applied within using code. I wish this was more simple.
1 Like
Thank you for your feedback but I have to disagree. In my industry, women love to add to the cart and keep scrolling on the collection page to not lose their pace. When purchasing the theme I was under the impression that the app would come with this quick add option, but I was mislead. I will come up with a sound solution soon. Thank you for your help.
1 Like