Need shopping cart icon on right side of mobile header

I'm working within the Harris (York family) template for a client, and unfortunately can't convince them to switch to a more robust template. Right now, the shopping cart icon on mobile is only visible within the navigation menu. Does anyone know of custom code that could move it either to the left of the mobile navigation button or to the bottom of the page (similar to how it is on Brine templates).

Any input is appreciated!

@braevin Harris Demo on SS has no shop, so can't check.

Can you share site url to check this? I think some custom code (CSS) can handle.

@tuanphan Here's the URL: https://www.gilchristartcamp.com/

@braevin I think you need to some custom code to handle

1. You can use JavaScript to add Cart Text or Cart icon to Mobile Menu (right of header).

2. You can also insert some HTML tag (to create Cart Icon) in Code Injection (Footer), then use CSS to style/fixed the icon to bottom of site.

@braevinI'm trying to do the same thing you did for the site you were working on. What code did you do to get the cart icon added to the  bottom of the page on mobile?

Hello, 

I was hoping to see an answer for this question. I have the same issue on my website. I'd like to make the cart icon visible without the customer having to click the hamburger menu button on mobile. My template is on 7.0

On 3/4/2021 at 1:00 PM, kyraunfltd said:

Hello, 

I was hoping to see an answer for this question. I have the same issue on my website. I'd like to make the cart icon visible without the customer having to click the hamburger menu button on mobile. My template is on 7.0

Can you share link to your site? WE can check easier

On 10/11/2019 at 12:45 PM, tuanphan said:

@braevin I think you need to some custom code to handle

1. You can use JavaScript to add Cart Text or Cart icon to Mobile Menu (right of header).

2. You can also insert some HTML tag (to create Cart Icon) in Code Injection (Footer), then use CSS to style/fixed the icon to bottom of site.

 

 Hi @tuanphan,

I currently have my desktop forced to mobile view. However, I need to have a cart viewable in the desktop header... is this doable alongside a desktop hamburger icon?

Any help would be HUGELY appreciated. 
 cbhd-dev-9ac7.squarespace.com/home
 PW: JAN21PW

Thank you 🙂

On 5/25/2021 at 2:01 AM, LXK said:

 Hi @tuanphan,

I currently have my desktop forced to mobile view. However, I need to have a cart viewable in the desktop header... is this doable alongside a desktop hamburger icon?

Any help would be HUGELY appreciated. 
 cbhd-dev-9ac7.squarespace.com/home
 PW: JAN21PW

Thank you 🙂

Can you enable cart icon first? Then we will check the code to make it next to burger icon on desktop

On 5/26/2021 at 9:51 AM, tuanphan said:

Can you enable cart icon first? Then we will check the code to make it next to burger icon on desktop

Hey @tuanphan,

Thanks so much for your help!

I have just enabled the cart, which you can view on mobile. However on desktop it moves the burger over to the left hand side of the header and the cart is not showing. 

On 6/5/2021 at 1:45 PM, LXK said:

Hey @tuanphan,

Thanks so much for your help!

I have just enabled the cart, which you can view on mobile. However on desktop it moves the burger over to the left hand side of the header and the cart is not showing. 

Hey @tuanphan,

I managed to find a workaround.

Thank you 🙂

On 9/1/2021 at 1:36 PM, paul2009 said:

The cart icon has been hidden with some custom CSS. If you remove this, the cart will appear on the navigation overlay as normal, like this:

That said, I recommend that you review your custom code as there is a lot of it, and I found parts of the site that didn't work properly. For example, clicking X to close the mobile navigation overlay didn't work for me.

On the subject of the cart icon, it is notoriously difficult for potential customers to find on this template family as it can only be accessed via the hamburger menu on mobile. Personally I recommend that anyone building a store using the York template family should add some code to show the mobile cart icon in the header, like this:

Hi - The cart icon in our store is hidden in the hamburger menu on mobile. How can I go about bringing this out to sit on the main page. https://www.belfasttraditionalmusic.com/

Thanks 

Jordan

21 hours ago, Jordanlong44 said:

Hi - The cart icon in our store is hidden in the hamburger menu on mobile. How can I go about bringing this out to sit on the main page. https://www.belfasttraditionalmusic.com/

Thanks 

Jordan

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.tweak-header-cart-style-cart .site-header .Cart').clone().appendTo('.mobile-bar-wrapper');
	});
</script>
<style>
  @media screen and (max-width:640px) {
  a.Cart.sqs-custom-cart.sqs-template-integrated-shopping-cart {
    position: relative;
    white-space: nowrap;
    line-height: 1em;
    fill: #000;
    stroke: #000;
}
  }
</style>

On 1/27/2022 at 11:30 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.tweak-header-cart-style-cart .site-header .Cart').clone().appendTo('.mobile-bar-wrapper');
	});
</script>
<style>
  @media screen and (max-width:640px) {
  a.Cart.sqs-custom-cart.sqs-template-integrated-shopping-cart {
    position: relative;
    white-space: nowrap;
    line-height: 1em;
    fill: #000;
    stroke: #000;
}
  }
</style>

 

Hi @tuanphan, I am having the same problem of the cart not appearing in my mobile site. I have added the above code and it didn't appear to work...

https://www.nickheynsbergh.com/shop/at-a-party-when-i-was-17-the-guy-i-was-infatuated-with-slid-his-hand-up-my-shirt-while-we-were-sleeping-on-our-friends-loungeroom-floor

On 4/19/2022 at 6:49 AM, NickHeynsbergh said:

Hi @tuanphan, I am having the same problem of the cart not appearing in my mobile site. I have added the above code and it didn't appear to work...

https://www.nickheynsbergh.com/shop/at-a-party-when-i-was-17-the-guy-i-was-infatuated-with-slid-his-hand-up-my-shirt-while-we-were-sleeping-on-our-friends-loungeroom-floor

 

Hi,

You want: move cart from burger menu >> next to burger?

link to website: allisonlatona.com

I am working with the Harris template as well, and my client's customers are struggling to find the "hidden" cart on the mobile (the circle at the bottom of the hamburger menu page isn't obvious enough). So I've implemented the code you provided above (Thank you!!!) and I have 2 questions: 
1. can it be either the cart or the bag? it's coming up as both and my client thinks its too crowded
2. they don't show up on the tablet version. Is there a way to adjust the code so it shows up there as well? 

Thank you so much. Your help on these forums is truly invaluable.  

On 5/10/2023 at 3:23 AM, gia.b said:

link to website: allisonlatona.com

I am working with the Harris template as well, and my client's customers are struggling to find the "hidden" cart on the mobile (the circle at the bottom of the hamburger menu page isn't obvious enough). So I've implemented the code you provided above (Thank you!!!) and I have 2 questions: 
1. can it be either the cart or the bag? it's coming up as both and my client thinks its too crowded
2. they don't show up on the tablet version. Is there a way to adjust the code so it shows up there as well? 

Thank you so much. Your help on these forums is truly invaluable.  

Can you add & keep the code? We can check easier

If the site is live & you can't do this, you can duplicate site & Do there

I'm having trouble figuring out how to make the shopping cart show on the right side of the mobile header. Right now it's within the hamburger menu, but customers won't be able to find it easily when they're on their mobile devices. Please help!

@Exactamando Shopping cart icon position can be changed on edit mode under the 'Edit Site Header' > Mobile icon > Header Layout.

I'm hoping to move the cart icon from the hamburger menu to the right of my logo when in mobile view. I was incorrect earlier; my homepage does not have a header, just a top navigation. There are no options in the site styles to change the location of the cart in mobile view.

https://exactamando.com

I'm hoping to move the cart icon from the hamburger menu to the right of my logo when in mobile view. My homepage does not have a header, just a top navigation. There are no options in the site styles to change the location of the cart in mobile view. Please help!

https://exactamando.com

21 hours ago, Exactamando said:

I'm hoping to move the cart icon from the hamburger menu to the right of my logo when in mobile view. I was incorrect earlier; my homepage does not have a header, just a top navigation. There are no options in the site styles to change the location of the cart in mobile view.

https://exactamando.com

 

Add to Design > Custom CSS or Website > Website Tools > Custom CSS

/* Mobile - Cart icon */
@media screen and (max-width:640px) {
.tweak-header-cart-style-cart .site-header .Cart {
    position: fixed !important;
    top: 10px;
    right: 10px;
    z-index: 999999;
}
[data-nc-container="right"] {
    display: flex !important;
}
header#header {
    display: block !important;
}
header#header>div:not(:last-child) {
    display: none;
}
}