Jump to content

Reposition Cart icon on mobile?

Recommended Posts

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!

Link to comment

@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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...
  • 10 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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 🙂

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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. 

Link to comment
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 🙂

Link to comment
  • 7 months later...
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:

2012794028_Screenshot2021-09-01at12_56_07.thumb.png.455cf47336f62f578ed06074557576c8.png

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:

2041894170_Screenshot2021-09-01at13_33_09.thumb.png.e7369dd228c3104bf59b56da1fb4c68f.png

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

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.