Jump to content

Reposition cart icon

Recommended Posts

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.

BA.jpg.0e919c78b348945e581ced751507ebb6.jpg

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

Link to comment
  • 2 weeks later...

@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

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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

image.thumb.png.172533dbbc9de2df557437787a3060b2.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

image.thumb.png.7904190edd01c66b14326767a70c83ca.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Screen Shot 2021-09-27 at 5.12.38 PM.png

Can you share link to page in screenshot?

image.thumb.png.aa79f299ba45fec86f2f9b7391e6ebc9.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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>

image.thumb.png.7904190edd01c66b14326767a70c83ca.png

Hey @tuanphan,

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

Thanks!

Anele

cart.JPG

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

Add to Design > Custom CSS

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

image.thumb.png.7904190edd01c66b14326767a70c83ca.png

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

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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.