Jump to content

Shopping cart icon to appear on Selected Pages only

Recommended Posts

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!

Screen Shot 2020-06-03 at 3.39.03 PM.png

Link to comment
  • Replies 17
  • Views 1.4k
  • Created
  • Last Reply
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

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

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;
}

 

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

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

1953040313_ScreenShot2020-06-04at5_42_30PM.png.a140942c6b7d35234c0f1c97cf5a37cd.png

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:

15633068_ScreenShot2020-06-04at5_47_18PM.png.463c7998b174bb5448916927925ec499.png

Thank you once again for your kind assistance!

Link to comment

Hello ,

Thank you for your continued support!

I have enabled the cart icon as your requested.

As I originally requested, we want the cart icon with number like so (image below) to appear on this page only:

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

1953040313_ScreenShot2020-06-04at5_42_30PM.png.a140942c6b7d35234c0f1c97cf5a37cd.png.ce9539e08396571b80da71858ef8b535.png

If the cart icon is linked, we want it to be redirected to the checkout page:

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

If you need it, this is the page where you can add product (quantity) to the cart:

https://orca-panda-enl4.squarespace.com/store/7v1gw1mrynm8aojh0otshn3rwbj4yc-2pcae

I have gotten rid of everything that is useless at the moment and tidied the website a bit. It's confusing and a messy so I really appreciate your patience and assitance 🙂

 
  • Edit: my trial has ended which is why I duplicated the site and got a different link. Same contents though. Thank you!
Link to comment

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.

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

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

empty.jpg.8b46defd1744ddc85f72036d07c146e7.jpg

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

2135134403_cart2.jpg.66f8e9f4088fcfe67940d26c86e0c1c1.jpg

Once again, I appreciate your patience. Stay safe!

 

Link to comment

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>

image.thumb.png.8b4d2f88cc8061c9c218c32d96f4b70d.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

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

91553855_ScreenShot2020-06-09at2_43_12PM.thumb.png.eab615e22f308371ea19a35309df181c.png

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

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

445792709_ScreenShot2020-06-09at3_16_23PM.thumb.png.34774da95ca5c0bd5136193c39ffa43a.png

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

 

Link to comment

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>

 

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

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:

91553855_ScreenShot2020-06-09at2_43_12PM.thumb.png.eab615e22f308371ea19a35309df181c.png

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

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

445792709_ScreenShot2020-06-09at3_16_23PM.thumb.png.34774da95ca5c0bd5136193c39ffa43a.png

Thank you for everything you have helped me with. Have a good day!

Link to comment

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

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