Reposition cart icon

Hello everyone,

I would like to know if it is possible to change the position of the cart icon. I am attaching Before and After picture of the look I would like to achieve. I'd like to have it placed underneath SHOP text if possible.

My site: https://caterpillar-antelope-zbjy.squarespace.com/shop

password: ptphoto

Thank you in advance,
Best regards,
P

p.s  I have set the cart to only appear on the 'SHOP' page, in case this info is helpful

@Ptphotography You can add the following JavaScript and CSS below. Feel free to update the TEXT variable in the JavaScript code to whatever you want:

JavaScript

(function(document){

  // Customize TEXT variable.
  var TEXT = 'Cart';
  
  /******************************************************************** 
   * DO NOT MODIFY CODE BELOW, unless you know what you're doing.
   *******************************************************************/

  if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    var cartInner = document.querySelector('.Cart-inner');
    if(cartInner) {
      var qty = document.querySelector('.icon-cart-quantity');
      var div = document.createElement('div');
      div.setAttribute('class', 'Cart-inner-content');
      div.innerHTML = TEXT;
      cartInner.insertBefore(div, qty);
    }
  }
})(document);

CSS

.Cart-inner {
  display: flex;
  align-items: center;
}

.Cart-inner-content {
  text-transform: uppercase;
}

.icon-cart-quantity,
.sqs-cart-quantity {
  position: static;
  padding: initial;
  font-size: 0.8rem;
}
.icon-cart-quantity {
  margin-left: 5px;
  position: static !important;
}

.sqs-cart-quantity:after {
  content: ')';
}

.sqs-cart-quantity:before {
  content: '(';
}

.header .header-actions-action--cart a.icon {
  width: auto;
  height: auto;
  padding: .8rem;
  background-color: #eee;
}

.header .header-actions-action--cart svg.icon--cart {
  width: 25px;
  height: 20px;
  padding: 0 5px 0 0;
}

.header-display {
  /* flex-wrap: wrap; */
}

.header-actions--right {
  /* width: 100%; */
}

@media (min-width: 1180px) {
  .header-actions-action--cart a.icon {
    position: absolute;
    bottom: -2rem;
    right: 1rem;
  }
}

Be sure to add the JavaScript between <script> tags and the CSS between <style> tags, example:
 

<style>
  /* Add CSS Code here */
</style>

<script>
  // Add JS code here
</script>

I would use Site-wide code injection, see article https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

@jpeter 

You are a genius! Thank you for this, you are the best! 🙌

@jpeter Does this code work if I want to move the standard cart? I'd like to move it from its position in the upper right of the site to the same line as my navigation and the standard options don't allow it in this layout.

Site: https://gracespaceboutique.squarespace.com/

PW: Welcome1

22 hours ago, trusocialite said:

@jpeter Does this code work if I want to move the standard cart? I'd like to move it from its position in the upper right of the site to the same line as my navigation and the standard options don't allow it in this layout.

 

Site: https://gracespaceboutique.squarespace.com/

PW: Welcome1

Hi. Move this?

@tuanphan Yes, move the cart straight down directly on the inside of the margin on top of the horizontal line instead of down and left (in line with the rest of the navigation).

On 6/9/2021 at 3:27 AM, trusocialite said:

@tuanphan Yes, move the cart straight down directly on the inside of the margin on top of the horizontal line instead of down and left (in line with the rest of the navigation).

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() { 
		$('.header-display-desktop .header-actions-action.header-actions-action--cart').appendTo('nav.header-nav-list');
	});
</script>
<style>
  svg.icon.icon--cart {
    stroke: black;
}
  nav.header-nav-list>div:last-child {
    display: none;
}
</style>

Thank you! Sorry for such a long delayed response! 

Do you know how I can get the top margin of my first section to show like an inset instead of the header falling over it? I would like the green to show on all four sides.

On 9/28/2021 at 4:13 AM, trusocialite said:

Thank you! Sorry for such a long delayed response! 

 

Do you know how I can get the top margin of my first section to show like an inset instead of the header falling over it? I would like the green to show on all four sides.

Can you share link to page in screenshot?

gracespaceboutique.com/home

PW: Welcome1

On 10/1/2021 at 5:45 AM, trusocialite said:

gracespaceboutique.com/home

 

PW: Welcome1

 

You can add a blank section with minium height on top of current section, then let me know. We will give some code to achieve your request

On 6/9/2021 at 7:35 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() { 
		$('.header-display-desktop .header-actions-action.header-actions-action--cart').appendTo('nav.header-nav-list');
	});
</script>
<style>
  svg.icon.icon--cart {
    stroke: black;
}
  nav.header-nav-list>div:last-child {
    display: none;
}
</style>

Hey @tuanphan,

This works great, but the cart is just slightly above the main line of the navigation. Any suggestions?

Thanks!

Anele

Website: https://lavender-caper-k5h2.squarespace.com/

Password: 123

On 11/18/2021 at 9:24 AM, Anele0610 said:

Website: https://lavender-caper-k5h2.squarespace.com/

Password: 123

Add to Design > Custom CSS

/* align cart icon in main navigation */
nav.header-nav-list {
    align-items: center;
}

On 6/9/2021 at 8:35 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() { 
		$('.header-display-desktop .header-actions-action.header-actions-action--cart').appendTo('nav.header-nav-list');
	});
</script>
<style>
  svg.icon.icon--cart {
    stroke: black;
}
  nav.header-nav-list>div:last-child {
    display: none;
}
</style>

@tuanphan Hey there. This worked great. Do you know how I'd do the same with the LOGIN button in the nav? Site: https://www.interiorsbylarisa.com/ 

On 11/23/2023 at 10:36 PM, kbradfield said:

@tuanphan Hey there. This worked great. Do you know how I'd do the same with the LOGIN button in the nav? Site: https://www.interiorsbylarisa.com/ 

Hi,

Login button or Login + Search?

And the order will be: Cart icon - Search icon - Login text or?

On 11/25/2023 at 9:28 PM, tuanphan said:

Hi,

Login button or Login + Search?

And the order will be: Cart icon - Search icon - Login text or?

I'm hoping to keep the search on the left of the navigation and put Login + Cart on the right of the nav. 🙂 

On 11/30/2023 at 2:43 AM, kbradfield said:

I'm hoping to keep the search on the left of the navigation and put Login + Cart on the right of the nav. 🙂 

Add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('.header-display-desktop .user-accounts-link').insertAfter('nav>div.header-nav-item:nth-last-child(3)');
});
</script>

On 12/1/2023 at 4:29 AM, tuanphan said:

Add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('.header-display-desktop .user-accounts-link').insertAfter('nav>div.header-nav-item:nth-last-child(3)');
});
</script>

 

Thank you very much!