Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reposition cart icon


Ptphotography

Question

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

10 answers to this question

Recommended Posts

  • 1

@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

Link to comment
  • 0
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.

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
  • 0
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.

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
  • 0
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.

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
  • 0
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.

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