Shopping cart icon to appear on Selected Pages only

Hello guys!

Can anyone please help me figure out the way to place my shopping cart on selected pages? I only want the shopping cart to appear on the Store page. Also, is it possible to change the placement of the cart?  In the image I have attached below, I have disabled the shopping cart icon and want it to be placed next to the Shop text I typed.

This is for Squarespace 7.1 on Mark Novo template.

Thank you!

Can you share link to shop page?

@tuanphan 
here it is:
https://caterpillar-antelope-zbjy.squarespace.com/

password is: ptphoto

sorry it is a bit messy at the moment! 

Thank you for your help!

2 hours ago, Ptphotography said:

 

@tuanphan 
here it is:
https://caterpillar-antelope-zbjy.squarespace.com/

password is: ptphoto

sorry it is a bit messy at the moment! 

Thank you for your help!

Can you share link to a product detail page? I can't  add to cart to check cart icon

@tuanphan

Thank you for your time!

At the moment, this is the only page where we want the icon to be at, next to the Shop text if possible:

https://caterpillar-antelope-zbjy.squarespace.com/general-2

And this is the product detail page:

https://caterpillar-antelope-zbjy.squarespace.com/store-2/7v1gw1mrynm8aojh0otshn3rwbj4yc

Add to Home > Design > Custom CSS. Replace with cart icon url

div#block-3182ef50ebb0b43e6a7c h3:before {
    content: "";
    display: inline-block;
    background-image: url(https://image.flaticon.com/icons/svg/1170/1170627.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 60px;
    height: 30px;
}

@tuanphan

Thank you for helping me! It's a relief to know it is possible to put my cart next to Shop.

One last favour, can you help us add the cart icon next to Shop text? I wonder if it is also possible for the number of items inside my basket (4) to appear?

Screenshot is below for your reference:

Sorry for not asking you last time but can you also help us link the 'shopping cart' to this page once it is clicked?

https://caterpillar-antelope-zbjy.squarespace.com/cart

At the moment since the cart is not linked, and I have disabled my cart in my header this icon is showing at the bottom page:

Thank you once again for your kind assistance!

icon next to text

in above code, edit before to after

With link, insert link for Shop text, then I will give the code.

With cart number, not sure, can you enable cart icon first? I need to check cart icon code.

Hello ,

@tuanphan

Please, sorry for asking too much but can you help us with this? You are the only person we can rely on. 

Many thanks!

Hi. Sorry for the delay. Just had a few days off in my hometown.

Add to Home > Design > Custom CSS

div#block-3182ef50ebb0b43e6a7c h3:after {
    content: "";
    display: inline-block;
    background-image: url(https://image.flaticon.com/icons/svg/1170/1170627.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 60px;
    height: 30px;
}

To add cart number, It is relatively complex, and beyond the scope of free support.

@tuanphan

I was ignorant of the fact that you do not work for Squarespace,  sorry for sounding too demanding. But even so, I'd like to take advantage of this opportunity, cause without you, I am helpless!

If what I requested is not possible, then I have to leave it at that. An alternative: can I change the cart icon to text?

Instead of the icon, I want the word 'CART' text instead? I want it on the same place as the navigation links if you don't mind. Perhaps if I just change the icon, I won't lose the numbers in there.

https://orca-panda-enl4.squarespace.com/

password: ptphoto

Lastly, since it is written in text, if the cart is empty, instead of '0' I want no number to appear above it. Like so:

and if there are products added in the cart, I want to look like this:

Once again, I appreciate your patience. Stay safe!

I think I solved it for one member via email, but it seems like it takes a lot of time (although it's easy).

Move cart icon after Shop cart text seems be easier =]]

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  var a=['\x74\x69\x6f\x6e\x73\x2d\x61\x63\x74\x69','\x72\x65\x61\x64\x79','\x6f\x6e\x20\x61','\x2e\x63\x61\x72\x74\x2d\x74\x69\x74\x6c','\x2e\x68\x65\x61\x64\x65\x72\x2d\x61\x63','\x61\x70\x70\x65\x6e\x64'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x138));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(document)[b('\x30\x78\x31')](function(){$(b('\x30\x78\x33')+'\x65')[b('\x30\x78\x35')]($(b('\x30\x78\x34')+b('\x30\x78\x30')+b('\x30\x78\x32')));});
</script>
<style>
  .cart-title a {
    display: inline-block;
}
  .cart-title svg {
    fill: black;
    stroke: black;
}
</style>

@tuanphan

Hoorah! I am so happy it is possible haha. 

Everything adds up whenever I update the quantity. I'm relieved!

One last thing please, I think I have given you so many links everything got mixed up. Sorry for giving you such a hard time

At the moment, the cart icon appears on the header and on each page, please help us fix it, we want the cart to only appear on this page next to Shop text and be hidden if other pages are visited:

https://orca-panda-enl4.squarespace.com/shop

Like so:

And if the icon is clicked, we want the link to be redirected here (without cart icon):

https://orca-panda-enl4.squarespace.com/cart 

It has been a pleasure learning from you. Keep safe!

Add to Code Injection Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var a=['\x72\x65\x61\x64\x79','\x36\x63\x31\x39\x30\x39\x65\x36\x30\x38','\x65\x36\x30\x30\x30\x64\x31\x61\x32\x62','\x61\x70\x70\x65\x6e\x64','\x6f\x6e\x2e\x68\x65\x61\x64\x65\x72\x2d','\x61\x63\x74\x69\x6f\x6e\x73\x2d\x61\x63','\x74\x69\x6f\x6e\x2d\x2d\x63\x61\x72\x74','\x20\x68\x33','\x64\x69\x76\x23\x62\x6c\x6f\x63\x6b\x2d'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x158));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(document)[b('\x30\x78\x37')](function(){$(b('\x30\x78\x36')+b('\x30\x78\x38')+b('\x30\x78\x30')+b('\x30\x78\x35'))[b('\x30\x78\x31')]($('\x2e\x68\x65\x61\x64\x65\x72\x2d\x61\x63'+'\x74\x69\x6f\x6e\x73\x2d\x61\x63\x74\x69'+b('\x30\x78\x32')+b('\x30\x78\x33')+b('\x30\x78\x34')+'\x20\x61'));});
</script>
<style>
  div#block-6c1909e608e6000d1a2b h3 a {
    display: inline-block;
}
  div#block-6c1909e608e6000d1a2b h3 svg {
    fill: black;
    stroke: black;
}
  header#header .header-actions-action.header-actions-action--cart a {display: none;}
</style>

@tuanphan It worked! This mystery has finally been solved thanks to you : ) 

All the best,
P

Hey @tuanphan

I understand your code applies exclusively for this website: https://orca-panda-enl4.squarespace.com, so please help me with another thing. Thanks to you, I was able to ask squarespace to extend my trial on my original link for 45 days: https://caterpillar-antelope-zbjy.squarespace.com and it's all wonderful!

With that saying, please help me with a code for https://caterpillar-antelope-zbjy.squarespace.com

password: ptphoto

To copy my comments on my previous inquiry, similarly,

We want the cart to only appear on this page next to Shop text and be hidden if other pages are visited

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

Like so:

@tuanphan

I read your blog about finding block id and in my limited knowledge, I tried this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var a=['\x72\x65\x61\x64\x79','\x36\x63\x31\x39\x30\x39\x65\x36\x30\x38','\x65\x36\x30\x30\x30\x64\x31\x61\x32\x62','\x61\x70\x70\x65\x6e\x64','\x6f\x6e\x2e\x68\x65\x61\x64\x65\x72\x2d','\x61\x63\x74\x69\x6f\x6e\x73\x2d\x61\x63','\x74\x69\x6f\x6e\x2d\x2d\x63\x61\x72\x74','\x20\x68\x33','\x64\x69\x76\x23\x62\x6c\x6f\x63\x6b\x2d'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x158));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(document)[b('\x30\x78\x37')](function(){$(b('\x30\x78\x36')+b('\x30\x78\x38')+b('\x30\x78\x30')+b('\x30\x78\x35'))[b('\x30\x78\x31')]($('\x2e\x68\x65\x61\x64\x65\x72\x2d\x61\x63'+'\x74\x69\x6f\x6e\x73\x2d\x61\x63\x74\x69'+b('\x30\x78\x32')+b('\x30\x78\x33')+b('\x30\x78\x34')+'\x20\x61'));});
</script>
<style>
  div#block-3182ef50ebb0b43e6a7c h3 a {
    display: inline-block;
}
  div#block-3182ef50ebb0b43e6a7c h3 svg {
    fill: black;
    stroke: black;
}
  header#header .header-actions-action.header-actions-action--cart a {display: none;}
</style>

but it doesn't seem to work haha. Sorry for giving you all the work but please help me with this one. Thank you!