Display 'Add to Cart' button in mobile view - Debut Theme

Store Design
,
1

Hello, as my title suggests, I’m looking for a way to display the “Add to Cart” button within mobile view of my collections pages. For example, the home page or visiting an indidivdual collection.

I do not use variants so the products are simple. However, customers hate that they have to visit an item, add it to the cart, then go back to where they were to keep browsing. I want to just be able to have them add it to their cart and continue browsing, in mobile view.

2

@musicfan88

can you please share store url so i will check and let you know

3

Hello - my store url is: JocoRecords.com

4

@musicfan88

Kindly add this code to your theme.css file all the way to the bottom

Navigate to online store >> Click edit theme code.

Now find theme.css and paste the following code to the bottom

@media only screen and (max-width: 749px){
.small--hide {
    display: block !important;}
}

I hope it will be helpful for you.

Thanks

Did it solve your issue?

- If yes, Like & Mark As Solution to help the community

- If not, let me know. also share a screenshot of the code that you added.

5

That worked to add the buttons to the mobile collections pages!
Thank you!

However, I noticed that it introduced a new bug on the “Cart” page. Now for some reason, there are two different “Quantity” boxes on the mobile cart page. I’m not sure what would be causing that. it goes back to normal when I remove this new code. Attached is a photo of the mobile cart when this code is in place.

6

Hi @musicfan88 .

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.grid__item--collection .quick-add-to-cart {
    display: block !important;
}

I hope it would help you.

7

Unfortunately, that didn’t work. That allowed the buttons to show on the home page but not any other page and no collections pages.

The first response I got actually worked, the buttons were showing on all pages while on mobile. The issue was that it was adding a duplicated “Quantity” field in the mobile cart page. So is there a tweak to that or to your code to make it work correctly on all pages?

8

@musicfan88 Try this code to theme.css to hide the extra quantity box on mobile.

@media only screen and (max-width: 749px){

.cart td:nth-child(3){display: none !important;}

}

Did it solve your issue?

- If yes, Like & Mark As Solution to help the community

- If not, let me know. also share a screenshot of the code that you added.

9

That definitely got us closer.

The extra Quantity field now disappeared, but there are two price columns and the Quantity column shouldn’t even be displaying in mobile, it should just be on the line item.

I REALLY appreciate your help on this. I was hoping this was a fairly simple fix to just add the add to cart buttons on mobile without hurting other pages. But that’s why I’m not a developer, things are difficult. I just really appreciate you and all your help here.

10

@musicfan88 Try this

@media only screen and (max-width: 749px){

.cart__row .small--hide{display: none !important}

}

Did it solve your issue?

  • If yes, Like & Mark As Solution to help the community

  • If not, let me know. also share a screenshot of the code that you added.

11

That did it! Thanks so much! I guess we just had to add a few different pieces.

For anyone else viewing this thread, here is the full code you’d want to put at the end of your theme.css file:

@media only screen and (max-width: 749px){
.small--hide {
    display: block !important;}
}

@media only screen and (max-width: 749px){

.cart td:nth-child(3){display: none !important;}

}

@media only screen and (max-width: 749px){

.cart__row .small--hide{display: none !important}

}