Fashe Shopify - Cart not appearing on mobile

Hi there,

I’ve been working on a Shopify store using Fashe and it’s almost finished, but I’ve realised that are some very significant issues with the way the theme appears on mobile. I would appreciate if you someone could please provide a fix for these problems, otherwise this theme is pretty unusable considering the fact that more than half of website traffic for e-com comes from mobile devices.

List of issues:

  1. The number of items added to cart do not appear on upper-right corner of the shopping bag as they appear on desktop; they appear very far to the right, making it almost invisible if you do not scroll right.

  2. When you click on the shopping bag/cart icon in the header, there is a small cart window popping up rather than loading the cart page… That is fine if that’s what the intent is but the pop up is not appearing at the top of the page but rather halfway across the page (extremely weird and very confusing… you won’t be able to see it unless you scroll down and I’m sure most people would just assume the function is not working - extremely bad considering it’s the CART). Furthermore, the pop that does appear halfway across the page is badly positioned, literally half of it is invisible as the position is not centred.

  3. When you are viewing the cart page, you have to scroll across in order to see the price and quantity… Very annoying and and would once again be extremely confusing for a customer who just wants to know how much he’s paying.

  4. When you click on the account icon in the header, the account page is not loaded like it does on desktop.

I love this theme and I appreciate the fact that it’s free but there are some major issues with it at present. Would appreciate if you guys could provide fixes and update the relevant code.

Thanks,
Chris

Hi again,

Sorry to double post but I don’t think I’m able to edit my post?!

I’ve managed to fix 1, 2, and 4 through css and html but still no luck with 3.

I was also wondering of how to make it so that when a color is selected on the product page (the color swatch), the image changes to the variant selected e.g. you select the red swatch and the corresponding variant image is displayed. Another thing that I was curious about is whether there is a way to make the product image (not just the name) clickable without removing the overlay (.block2-overlay).

Many thanks!

Hi there,
Thanks for keeping in touch.
Unfortunately carrying out the changes you desire here would require a bit of custom work which is beyond the scope of our support. I would recommend services from Envato Studio (https://colorlib.com/out/envatostudio).

Please let us know if you have any more questions.
Kind Regards,
Support.

Hi Christian,

I have the exact same problems. The cart and account buttons not working on the mobile site is so frustrating. Could you let me know how you managed to fix this problem at all?

Many thanks

Sam

hey christian,
have you already solve your probs? if yes! i need your help thanks!

Hi there

First of all please take our apologies for delayed answers,
I just sent this ticket to an appropriate person who can give us help us in this problem

Hi Noda,
thanks for the help, i really love this theme pls make it as a normal shopify theme :slight_smile:

Hi Christian,

I had the exact same problem. After hours of messing around i finally resolved the problem.

you need to edit the code in header-1.liquid

if you go into the code and paste the line below into line 62 it will fix the problem.

<div class=“header-wrapicon2”>

attached is a screen grab of the code. if your lines 61,62,63 match the image attached then you should be home and dry :-).

How bout this issue? in the mobile version the cart doesnt update unless we refresh the page. can you help me to fix this problem?

Hello, christianbenson !

Hope you’re doing well :slight_smile:
I’am also facing the all and same problems. Dear, if you had solved your problems with Fashe theme in shopify please help us too. We’re from the same community. Hope you could do. As you told earlier you “managed to fix 1, 2, and 4 through css and html but still no luck with 3” please help us too. And if possible what about other fixes?

Like: I was also wondering of how to make it so that when a color is selected on the product page (the color swatch), the image changes to the variant selected e.g. you select the red swatch and the corresponding variant image is displayed. Another thing that I was curious about is whether there is a way to make the product image (not just the name) clickable without removing the overlay (.block2-overlay).

Thanks and Regards
Rajan Dimri

Hi All,
For problem cart item not appearing and cart appear halfway on mobile is solved by using media-queries.
Got to edit code > main.css.liquid and paste these code below the file

@media (max-width: 576px)
.header-icons-noti {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #111111;
color: white;
font-family: Montserrat-Medium;
font-size: 12px;
position: absolute;
top: 0;
left: 270px;
margin-top: 25px;
right: -10px;
}

@media (max-width: 576px) {
.header-icons-mobile .header-cart {
width: 300px;
top: 15%;
right: 2px;
z-index: 1100;
transform-origin: top right;
}
}

like attached image

Hello Pawan,

Thanks for your effort but sorry to say problem is still not solved. The same icon is appearing there.

Hey Christanbenson,
Sir, I am also struggling with the same problem. I have changed and checked many mobile optimised theme pages and layouts but not use. Seems you have fixed, need help from you.
Regards,
John from http://ghdsportsapk.ooo/

hi rajandimri,
Sorry to hear it doesn’t help you. I downloaded this theme yesterday and got the problem of cart icon display and card display, this code fixed mine, as I am using my mobile and the media query I sent above is for 576px width display, maybe yours greater than that or maybe the theme class changes., I don’t know reasons. I am also struggling with overlay click, hope if find any solution. But you can fix this problem by yourself as I do, here I am providing steps if you are familiar with dev tools or inspect element of the browser.
Step 1. Login to shopify go to themes > customize
Step 2. Choose mobile view from the top as it display mobile and desktop
Step 3. Rigth click on the black circle icon of item card and select inspect from list.
Step 4. It will open element tab in developer tool box, and it will bring to the div element of icon which has class=“header-icons-noti”.
Step 5. On the right hand side tabs are opened go to styles and drag to the bottom you see boxes with description of position, padding, height and width.
Step 6. Try to adjust the position as by double click on the numbers in boxes let you edit the styles, you have reduce or increase the numbers to check if it come to the position you want.
Step 6. You have to experiment with it little bit so come it come to the right position by changing, margins, position, padding.
Step 7. After it if it looks good, go to the top of style tab and see on element-style your changes with styles are appearing there copy it.
Step 8. You have to use media query I provided above to make changes on css style class, see code above for reference and paste your code and copy formal class code also with it, here you have to figure out to remove or update the duplicates from your own number,
Step 9. Save it and repeat for the cart box.

May be it seems little complicated to you If you have never use inspect element or dev tools before to adjust styles, then its ok. Seek someone’s help.

Hi,

I am having these same issues and wondering if there are fixes for them? Would really appreciate it.

Thanks

Hello @cfarrar90,

I hope you are doing well today.

Could you please add a link to your website so that we can have a look at it?

Also, are you having all 4 of the issues posted in the original post, or just a few of them?

Best Regards,
Support

Hi,

Thank you for the quick response!

Yes, I am having all 4 issues. My website is eleven-28.com password is: doocre. Only on mobile.

Also, is there way to click on the product images and not the product title below it? For mobile and desktop.

Please let me know if you all can help.

Thanks

Hi @cfarrar90,

I am sorry that you are having these issues but I will have to notify our developer of this so that they can be addressed.

The theme does not have the option to use the product image as a link, so that would not be possible.

Cheers