iamdavehart

In the very specific example you've given you're really talking about how hyphens are brought in to wrapping long words. This can be done using a css property of "hyphens", and therefore no upgrade to javascript required.

in your case, I think the best thing to do here is to set it to "manual" and then insert hard or soft breaks depending on your use case. hard breaks are just "-" and will always be broken, but if you insert a soft break in the middle of the word where you want it to break if there isn't enough room. (have tested and this works in the carousel title).

EDIT: To insert a soft break you can do this by copying it using something like charmap. It's unicode is 00AD, or 173. Squarespace will strip the html version which is ­ (i thought that would work at first), but if you just copy it and paste it in as the unicode character it will work.

I think the hyphens property defaults to auto and that should respect &shy, but if it doesn't work straight away you just need to add a rule to your site CSS that sets the hyphen property. It's probably better to do this using a rule that targets just that section Id (you can find the id using the squarespace Section ID finder extension, but I've used the right one in the example below).

section[data-section-id="65bf889227dbcd753275e596"] h2.list-item-content__title {
    hyphens:manual;
}

more information here: Wrapping and breaking text - CSS: Cascading Style Sheets | MDN (mozilla.org)

you should use a non-breaking hyphen instead of your standard one.

Its unicode character is U+2011. if you find a character map (such as the windows one below) you can just find the code in a font that supports it and then copy that character, and then paste that into your text box and it will not break there. With custom fonts it might not be supported, we'd have to know exactly what your font was, but it'll probably be fine. you can see on the right how that changes the break when you paste it in.

The html code for this non-breaking hyphen is ‑ so you can also directly write this in if you use a markdown block instead of a text box. In the screenshot below the second box is a markdown block

You've got plenty of options here, but I suppose each has their own caveat. 

Official Buy Me A Coffee buttons and widgets
this is actually done using a javascript script file, so the easiest squarespace way of doing this is to just add a code block to your section and paste in the code they provide in their main instructions. However, because this is a script tag and is therefore injecting javascript you might find that you need a business subscription to squarespace...

this is also true of the more expansive widget. just chuck it in a code block.

Use a squarespace button and some css
It's really just a link, so as you point out in your text, it's very easy to add a button, insert your buy me a coffee url and off you go. It will be styled as per one of your template button styles, but to insert the image, we'll need ot put some CSS in.

You could download the image you want, upload it as a standard file in your custom CSS section and reference it there, but as buymeacoffee.com use an SVG themselves, I've just inlined the SVG in the CSS for convenience here. This will add the bmac image to the left of the text for any button that references buymeacoffee.com

a.sqs-block-button-element[href*='buymeacoffee.com']::before {
    content:'';
    width:30px;
    height:30px;
    margin-right:2px;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    background-size: contain;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 884 1279' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M791.109 297.518L790.231 297.002L788.201 296.383C789.018 297.072 790.04 297.472 791.109 297.518Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M803.896 388.891L802.916 389.166L803.896 388.891Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M791.484 297.377C791.359 297.361 791.237 297.332 791.118 297.29C791.111 297.371 791.111 297.453 791.118 297.534C791.252 297.516 791.379 297.462 791.484 297.377Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M791.113 297.529H791.244V297.447L791.113 297.529Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M803.111 388.726L804.591 387.883L805.142 387.573L805.641 387.04C804.702 387.444 803.846 388.016 803.111 388.726Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M793.669 299.515L792.223 298.138L791.243 297.605C791.77 298.535 792.641 299.221 793.669 299.515Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M430.019 1186.18C428.864 1186.68 427.852 1187.46 427.076 1188.45L427.988 1187.87C428.608 1187.3 429.485 1186.63 430.019 1186.18Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M641.187 1144.63C641.187 1143.33 640.551 1143.57 640.705 1148.21C640.705 1147.84 640.86 1147.46 640.929 1147.1C641.015 1146.27 641.084 1145.46 641.187 1144.63Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M619.284 1186.18C618.129 1186.68 617.118 1187.46 616.342 1188.45L617.254 1187.87C617.873 1187.3 618.751 1186.63 619.284 1186.18Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M281.304 1196.06C280.427 1195.3 279.354 1194.8 278.207 1194.61C279.136 1195.06 280.065 1195.51 280.684 1195.85L281.304 1196.06Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath d='M247.841 1164.01C247.704 1162.66 247.288 1161.35 246.619 1160.16C247.093 1161.39 247.489 1162.66 247.806 1163.94L247.841 1164.01Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath class='logo-coffee' d='M472.623 590.836C426.682 610.503 374.546 632.802 306.976 632.802C278.71 632.746 250.58 628.868 223.353 621.274L270.086 1101.08C271.74 1121.13 280.876 1139.83 295.679 1153.46C310.482 1167.09 329.87 1174.65 349.992 1174.65C349.992 1174.65 416.254 1178.09 438.365 1178.09C462.161 1178.09 533.516 1174.65 533.516 1174.65C553.636 1174.65 573.019 1167.08 587.819 1153.45C602.619 1139.82 611.752 1121.13 613.406 1101.08L663.459 570.876C641.091 563.237 618.516 558.161 593.068 558.161C549.054 558.144 513.591 573.303 472.623 590.836Z' fill='%23FFDD00'%3E%3C/path%3E%3Cpath d='M78.6885 386.132L79.4799 386.872L79.9962 387.182C79.5987 386.787 79.1603 386.435 78.6885 386.132Z' fill='%230D0C22'%3E%3C/path%3E%3Cpath class='logo-outline' d='M879.567 341.849L872.53 306.352C866.215 274.503 851.882 244.409 819.19 232.898C808.711 229.215 796.821 227.633 788.786 220.01C780.751 212.388 778.376 200.55 776.518 189.572C773.076 169.423 769.842 149.257 766.314 129.143C763.269 111.85 760.86 92.4243 752.928 76.56C742.604 55.2584 721.182 42.8009 699.88 34.559C688.965 30.4844 677.826 27.0375 666.517 24.2352C613.297 10.1947 557.342 5.03277 502.591 2.09047C436.875 -1.53577 370.983 -0.443234 305.422 5.35968C256.625 9.79894 205.229 15.1674 158.858 32.0469C141.91 38.224 124.445 45.6399 111.558 58.7341C95.7448 74.8221 90.5829 99.7026 102.128 119.765C110.336 134.012 124.239 144.078 138.985 150.737C158.192 159.317 178.251 165.846 198.829 170.215C256.126 182.879 315.471 187.851 374.007 189.968C438.887 192.586 503.87 190.464 568.44 183.618C584.408 181.863 600.347 179.758 616.257 177.304C634.995 174.43 647.022 149.928 641.499 132.859C634.891 112.453 617.134 104.538 597.055 107.618C594.095 108.082 591.153 108.512 588.193 108.942L586.06 109.252C579.257 110.113 572.455 110.915 565.653 111.661C551.601 113.175 537.515 114.414 523.394 115.378C491.768 117.58 460.057 118.595 428.363 118.647C397.219 118.647 366.058 117.769 334.983 115.722C320.805 114.793 306.661 113.611 292.552 112.177C286.134 111.506 279.733 110.801 273.333 110.009L267.241 109.235L265.917 109.046L259.602 108.134C246.697 106.189 233.792 103.953 221.025 101.251C219.737 100.965 218.584 100.249 217.758 99.2193C216.932 98.1901 216.482 96.9099 216.482 95.5903C216.482 94.2706 216.932 92.9904 217.758 91.9612C218.584 90.9319 219.737 90.2152 221.025 89.9293H221.266C232.33 87.5721 243.479 85.5589 254.663 83.8038C258.392 83.2188 262.131 82.6453 265.882 82.0832H265.985C272.988 81.6186 280.026 80.3625 286.994 79.5366C347.624 73.2301 408.614 71.0801 469.538 73.1014C499.115 73.9618 528.676 75.6996 558.116 78.6935C564.448 79.3474 570.746 80.0357 577.043 80.8099C579.452 81.1025 581.878 81.4465 584.305 81.7391L589.191 82.4445C603.438 84.5667 617.61 87.1419 631.708 90.1703C652.597 94.7128 679.422 96.1925 688.713 119.077C691.673 126.338 693.015 134.408 694.649 142.03L696.732 151.752C696.786 151.926 696.826 152.105 696.852 152.285C701.773 175.227 706.7 198.169 711.632 221.111C711.994 222.806 712.002 224.557 711.657 226.255C711.312 227.954 710.621 229.562 709.626 230.982C708.632 232.401 707.355 233.6 705.877 234.504C704.398 235.408 702.75 235.997 701.033 236.236H700.895L697.884 236.649L694.908 237.044C685.478 238.272 676.038 239.419 666.586 240.486C647.968 242.608 629.322 244.443 610.648 245.992C573.539 249.077 536.356 251.102 499.098 252.066C480.114 252.57 461.135 252.806 442.162 252.771C366.643 252.712 291.189 248.322 216.173 239.625C208.051 238.662 199.93 237.629 191.808 236.58C198.106 237.389 187.231 235.96 185.029 235.651C179.867 234.928 174.705 234.177 169.543 233.397C152.216 230.798 134.993 227.598 117.7 224.793C96.7944 221.352 76.8005 223.073 57.8906 233.397C42.3685 241.891 29.8055 254.916 21.8776 270.735C13.7217 287.597 11.2956 305.956 7.64786 324.075C4.00009 342.193 -1.67805 361.688 0.472751 380.288C5.10128 420.431 33.165 453.054 73.5313 460.35C111.506 467.232 149.687 472.807 187.971 477.556C338.361 495.975 490.294 498.178 641.155 484.129C653.44 482.982 665.708 481.732 677.959 480.378C681.786 479.958 685.658 480.398 689.292 481.668C692.926 482.938 696.23 485.005 698.962 487.717C701.694 490.429 703.784 493.718 705.08 497.342C706.377 500.967 706.846 504.836 706.453 508.665L702.633 545.797C694.936 620.828 687.239 695.854 679.542 770.874C671.513 849.657 663.431 928.434 655.298 1007.2C653.004 1029.39 650.71 1051.57 648.416 1073.74C646.213 1095.58 645.904 1118.1 641.757 1139.68C635.218 1173.61 612.248 1194.45 578.73 1202.07C548.022 1209.06 516.652 1212.73 485.161 1213.01C450.249 1213.2 415.355 1211.65 380.443 1211.84C343.173 1212.05 297.525 1208.61 268.756 1180.87C243.479 1156.51 239.986 1118.36 236.545 1085.37C231.957 1041.7 227.409 998.039 222.9 954.381L197.607 711.615L181.244 554.538C180.968 551.94 180.693 549.376 180.435 546.76C178.473 528.023 165.207 509.681 144.301 510.627C126.407 511.418 106.069 526.629 108.168 546.76L120.298 663.214L145.385 904.104C152.532 972.528 159.661 1040.96 166.773 1109.41C168.15 1122.52 169.44 1135.67 170.885 1148.78C178.749 1220.43 233.465 1259.04 301.224 1269.91C340.799 1276.28 381.337 1277.59 421.497 1278.24C472.979 1279.07 524.977 1281.05 575.615 1271.72C650.653 1257.95 706.952 1207.85 714.987 1130.13C717.282 1107.69 719.576 1085.25 721.87 1062.8C729.498 988.559 737.115 914.313 744.72 840.061L769.601 597.451L781.009 486.263C781.577 480.749 783.905 475.565 787.649 471.478C791.392 467.391 796.352 464.617 801.794 463.567C823.25 459.386 843.761 452.245 859.023 435.916C883.318 409.918 888.153 376.021 879.567 341.849ZM72.4301 365.835C72.757 365.68 72.1548 368.484 71.8967 369.792C71.8451 367.813 71.9483 366.058 72.4301 365.835ZM74.5121 381.94C74.6842 381.819 75.2003 382.508 75.7337 383.334C74.925 382.576 74.4089 382.009 74.4949 381.94H74.5121ZM76.5597 384.641C77.2996 385.897 77.6953 386.689 76.5597 384.641V384.641ZM80.672 387.979H80.7752C80.7752 388.1 80.9645 388.22 81.0333 388.341C80.9192 388.208 80.7925 388.087 80.6548 387.979H80.672ZM800.796 382.989C793.088 390.319 781.473 393.726 769.996 395.43C641.292 414.529 510.713 424.199 380.597 419.932C287.476 416.749 195.336 406.407 103.144 393.382C94.1102 392.109 84.3197 390.457 78.1082 383.798C66.4078 371.237 72.1548 345.944 75.2003 330.768C77.9878 316.865 83.3218 298.334 99.8572 296.355C125.667 293.327 155.64 304.218 181.175 308.09C211.917 312.781 242.774 316.538 273.745 319.36C405.925 331.405 540.325 329.529 671.92 311.91C695.906 308.686 719.805 304.941 743.619 300.674C764.835 296.871 788.356 289.731 801.175 311.703C809.967 326.673 811.137 346.701 809.778 363.615C809.359 370.984 806.139 377.915 800.779 382.989H800.796Z' fill='%230D0C22'%3E%3C/path%3E%3C/svg%3E");
}

Use an Image Block
download the buymeacoffee creator kit which has all their button images in. It's in the same place you generate the code for buy me a coffee buttons. Get the button image. Use an image block, upload the button, add the link and off you go. Compared to the official script based one, you won't get your custom message (in my case it's tea instead of coffee!) as that is dynamic and the image is not.

All viable options.

You can even just put the link in text, e.g. My own buymeacoffee link is https://buymeacoffee.com/iamdavehart 😉🍵

if it's unrelated to the thread, best to start a new one. it helps other people find the solutions they're looking for. especially when the thread is already marked 'solved'.

sure, you can do that. just put your column count to one and then override pretty much everything that squarespace do to lay it out. Because you're undoing all the things they do I'd probably only do this for specific sections by prefixing the rules with the section id as i mentioned in previous posts.

Gallery Block

div.sqs-block-gallery {
  height:auto !important;
}
.slide a.image-slide-anchor {
  background:black !important;
  padding-bottom:unset !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
}

.slide img.thumb-image {
    inset:0 !important;
    width:100% !important;
    height:auto !important;
    object-fit: contain !important;
  display:block !important;
}

Gallery Section

/* add a background colour if you want (optional) */
.gallery-grid-item-wrapper {
    background:black;
  padding-bottom:unset !important;
  height:auto !important;
}
/* change to contain (default is cover) */
.gallery-grid-item-wrapper img {
  	position:relative !important;
  	height:initial !important;
  	min-height:initial !important;
    object-fit: contain !important;
}

OK, we might just have to check whether you're using a Gallery Section or a Gallery Block. The mark-up is different.

Gallery Section

You edit your page, click Add Section, choose Image from the left hand side and pick the auto layout that looks like a grid of images. In that case, the CSS I posted above will work

/* add a background colour if you want (optional) */
.gallery-grid-item-wrapper {
    background:black;
}
/* change to contain (default is cover) */
.gallery-grid-item-wrapper img {
    object-fit: contain !important;
}

Gallery Block

If you just click Add Blank Section and then Add Block and pick Gallery you'll get a different grid which will use the css below

.slide a.image-slide-anchor {
    background:black !important
}

.slide img.thumb-image {
    inset:0 !important;
    width:100% !important;
    object-fit: contain !important;
}

results for both here, the top one is a gallery block, the bottom one is a gallery section.

if it still isn't working for you then add the gallery you want to a page and share that link, as the one you've linked to in your original post doesn't have a gallery on it. or at least didn't when I first looked. 

choose the aspect ratio you want them to fit into then change the object-fit property in your css like so

/* add a background colour if you want (optional) */
.gallery-grid-item-wrapper {
    background:black;
}
/* change to contain (default is cover) */
.gallery-grid-item-wrapper img {
    object-fit: contain !important;
}

if you want to restrict that to a certain section or page then use the squarespace id finder extension to find the relevant id and add that before each rule.

Well, sort of. As I alluded in a reply to paul: you can, but I don't think you should tbh. The main reason is that there's a danger you're going to get an invalid order record into the customers cart which they then won't be able to check out. This will certainly happen in the case where you have required fields in your custom form (which you do), squarespace will think its an invalid order and wont add it to the cart.

however, if you must, and if you're prepared for the fact that it might break at some point as its non-standard behaviour, then you can try this. (you must make sure that you have no required fields in your custom product form - it won't work otherwise). Because you're modifying the classes assigned to elements you'll also have to have premium account as we'll need to add some code.

in the advanced section of the stores settings, go to your Page Header Code Injection and add this:

<script>
document.addEventListener("DOMContentLoaded", function () { 
	document.querySelectorAll(".sqs-add-to-cart-button.use-form")
      	.forEach(function(e) { e.classList.remove("use-form"); });
});
</script>

You can test it out, but honestly I'll just reiterate that I don't think you should do this. Apart from the fact that we're bypassing Squarespace's default behaviour, it feels like bad UX to me to have people have to wait until the cart to fill this stuff out. if it's optional and they want to skip it then just make sure it's clearly labelled that they can do that when the pop up comes and just fill it in in the cart later on. If you feel you must bypass the form then by all means try the code above.

@Charlottenz the font of your paragraphs are not being targeted by a rule with your new font. I would set the base font variable in your custom css like this. that should do it.

:root { 
 --body-font-font-family: 'gotham';
 --heading-font-font-family: 'gotham';
 --meta-font-font-family: 'gotham';
}

btw, in future, it's probably better to start a new question. especially if the original post has already been marked as solved

it's not pixelated, what's happening here is that the marquee block lays out three copies of your text so that it can move them around to give the idea of a continuous ticker tape. in your mobile version those three are laid out on top of each other. it looks like it's only the S that's affected because an S has non-right angles and so it's more pronounced. in fact, if you look more closely, everything looks "fatter" on the other letters, the bend of the U is actually pointed etc.

Why is this happening? I'd say it's a bug... essentially as far as I can tell what's going on is that its incorrectly measuring the size as 0 and so its offsetting its three copies by 0 + your item spacing. 

I can't be sure why that's happening on mobile only though, but it's possible that it's because it's loading up the custom font and it's not ready in time to be measured. (if you do it on mobile emulation within chrome it's fine).

What you could do is drop your item spacing to zero in your scrolling section's properties and then if the bug happens it should overlay all three copies directly on top of each other and remove the effect.

yes, so as Paul said in his reply just after mine, you will definitely get the form when you click Add to Cart from the product form. (and in your case you'll have to fill in the Notes as you've made them required). You will then also see the Edit Details link in the cart. At this point you can use the CSS i quoted to change the text. It looks like currently (on your published site) that you haven't saved the CSS as it's not rendering. I would make sure that you save the CSS then go and add the Customizable Baby Bibs on your site and try it out. I've tried the two simple rules on your cart and they do work. I have seen that sometimes they might not render in the config itself but try it in the published site and it should work

@paul2009 Good point! You could bypass that easily enough on the product page with a bit of code to take the use-form class off the button, but I think it's probably decent user experience as is though and we're probably moving dangerously towards the territory where I write "for educational purposes only". 

just one small addition I thought of: if you use the Custom Product Form that Paul mentions (the best option IMO) you do get a link that says "Edit Details" on the cart page. You can get to that in css by using button.cart-row-edit. e.g. to change the wording you could try. you won't get a text box on the page but you can get them to fill in / edit the notes in the dialog that comes up. 

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}

if you wanted to change the text in the cart for a specific product then you can do that by using the products url in a sibling selector

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}

.cart-row-desc a[href='/store/p/golden-mist-cup-weny8-54bjz'] ~
button.cart-row-edit::before {
  content:'Misty Cup Notes'
}

@MKrause18 sure. either find the block id or the section id and then just insert that in the query selector. like this

// using a block id
const btn = document.querySelector("#block-yui_3_17_2_1_1693644183227_2008 form input[type=submit]");
// using a section id
const btn = document.querySelector("section[data-section-id='64f2f5bebec5b306ece83a42'] form input[type=submit]");

Slightly different approach for consideration (now that we know you don't want the gap...)

Personally I think that the best option is to have image in the block it's "supposed" to be in. I think with any of the code stuff on these forums its best to try to do as much of it as you can within the way that squarespace works and then to just tweak it. the translate option is great in that transformations happen after the document has laid out so you dont' have to worry about any visibility problems with containers. the side effect is what you're seeing because SQSP has already laid out its section it's set the heights of the main title section thinking the image is in it and now you get the gap. now that we know that you don't want the gap we'd have to change the approach slightly.

Here's what I would do to try to overcome it. again first principle for me is get it as right as you can "the squarespace way" and then tweak it. For me that means putting in an image block in the title area, but what I would do is make it wider than the image needs to be so that we can expand its height and the image will grow into the width, overlapping the divider as the height grows proportionally.

something like this: make sure that you set the image to align left and and to fit its container the image will be smaller as you set it up and then we'll scale it rather than move it. this means that we keep our section height as we want it.

now that you've done that we can get to work. we'll take the image container, remove its hidden overflows and expand its height using a calculation that will add only the height of the section divider. then we just need to check some alignments and we're good. I've put it inside a media query so it doesn't affect your smaller FE layout. There's a calculation in here that's been "escaped" with a "~" so that it will work when pasted into your websites custom css once you've changed the image width layout. (the section id here is for your "about" page, you'll need to change it for others- see below)

@media (min-width:768px) {
    section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper {
        align-items: start;
        overflow: unset !important;
    }

    section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content {
        overflow: unset !important;
        width: 100% !important;
        height: calc(~"100% + var(--divider-height)") !important;
    }

    section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content img {
        object-position: bottom left !important;
    }
}

which then gives us this. the image has been scaled up by adding the height of the divider to its container. if you increase the size of the divider the image will scale accordingly. if you want it to go even further you could modify the calculation. to e.g. 150% or something like that.

So to try this on yours, I'd advocate extending the width of the image container as I have and then adding the custom css above, for your about us page that section id is 64ed67d839b7e01da3e13830. try it out and see if you can make it work. section ids can be found with teh squarespace id finder extension.

if you can make it work, then you could edit the other main pages and then extend the css rules to add in those page's section ids. on each of the rules, add a comma and duplicate the bit of the rule before the { e.g.

section[data-section-id='64f1c78c361cb15b5310c54a'] .sqs-image.sqs-block-alignment-wrapper,
section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper
{
  align-items: start;
  overflow: unset !important;
}

and just because I don't like leaving things like this, and I can't see any other answers out there, I'm going to add this little post-script about putting mixed case css variables in your Squarespace site's custom Css.

For educational purposes only! I would just reference these variables in the site header injection in a style block... 

so as mentioned above the custom css you fill in is actually run through a custom LESS compiler, which is a fairly ancient version (1.3.3). this does mean that you can do some cool LESS related things in there if you wanted to, but it does also mean that you get into all sorts of bother as more modern CSS features trip over the LESS features. 

You might have seen this problem when you try to put in a css calc() and you get a syntax error, the solution to which is often to escape the calc's body. something like this for example.

max-width:calc(~"var(--sqs-site-max-width,1000px) + calc(2 * var(--sqs-site-gutter,3vw))")

Well in this case our syntax problem is because SQSP have added a rule (I don't think it's a standard LESS rule anyway) that says that css variables MUST be lower case. This means that you can't set some of their css variables - as we have found out in this post. (it's only some, there are plenty of their own variables - usually the newer ones - that are all lower case and ok, e.g. the two properties in my calc example above).

so.... to get round the rules, we can use features of LESS (v1.3.3 anyway) that allow us to inject code dynamically, as long as the general rules of css are adhered to. To do this, we'll create a mixin (a sort of function that allows us to inject code into another class) that takes the variable name as a string and injects it.

the slight hack here is that you do have to have it inject in the standard format of property:value so we need a dummy css variable that gets set first and the rest of our dynamic code appends a second css variable on the end. the mixin gets declared once then you can use that throughout your css to inject css variables inside your classes. Note that this isn't CSS we're putting in here. this actually gets processed and rendered as pure css in your final site css.

/* this is a LESS mixin that takes the css prop name
and value and injects it after our dummy value */
.sqspvar(@prop,@value) {
  --dummy:(~"0; --@{prop}: @{value}");
}

/* you can then refer to the mixin inside other classes
by calling it with the property name you want and the value) */
.cart-style-icon {
  .sqspvar("solidHeaderNavigationColor","blue");
  color: blue;
}

and TADA! this then outputs our css with our mixed case css variable in it (and our dummy one which doesn't matter).

/* below this line is the output that appears in your site.css */
/*! Squarespace LESS Compiler  (less.js language v1.3.3)  */
.cart-style-icon {
    --dummy: 0;
    --solidHeaderNavigationColor: blue;
    color: blue
}

I think this would be worth the hacky nature of it if you were trying to override lots of SQSPs css variables in your custom css although I'd probably advise against that in general as most of them can be changed in the main theme colours anyway, but you never know. someone might find this useful!

you're right! if you're putting it in the websites custom css section then you will see a syntax error. that is because the Custom CSS function in SQSP is actually a LESS compiler not pure CSS and SQSP have some rules that you can't specify css variables with mixed case, they have to be all lower case. That's the syntax error that's being reported.

if you put the rules inside a style block in your site header injection it will work just fine. or in a code block in your header

<style>
.cart-style-icon {
  color:blue;
  --solidHeaderNavigationColor: blue;
}

.cart-style-icon.cart-quantity-zero {
  color:red;
  --solidHeaderNavigationColor: red;
}
</style>

squarespace will add a class cart-quantity-zero when there are no items in it so all you really need to do is include that. The SVG icon they use has its border and fill inheriting the current colour so you just need to set colour. 

there's something else going on on your site though, and that's that you have a dark background on your header, so the other thing you should do is set squarespaces variable that determines the navigation colour for a solid background

.cart-style-icon {
  color:blue;
  --solidHeaderNavigationColor: blue;
}

.cart-style-icon.cart-quantity-zero {
  color:red;
  --solidHeaderNavigationColor: red;
}

the line that specifies the animation (using the name you define the keyframes set with) needs to be in the rule for your whatsapp link, not out on its own.

so move line 12 to line 8 in your screenshot. 

you definitely don't need all those key frames though. looks a little overkill... perhaps try using an "alternate" direction for your animation and an ease-in-out for your curve. so something like this might be a simpler view..

<a href="https://wa.me/447404686135" class="tp-whatsapp">
<img src="https://pluspng.com/img-png/whatsapp-hd-png-whatsapp-logo-png-1000.png" />
</a>
<style>
  .tp-whatsapp {
    position:fixed;
    bottom:60px;
    right:30px;
    width:50px;
    height:50px;
    z-index:999;
    animation: pulse 1s ease-in-out 0s infinite alternate;
  }
  @keyframes pulse {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.1) rotate(5deg); }
  }
</style>

@thearcoirisdesignco

you'll have a problem there because the section border / section background stuff is the full height of the section. you'll also have to be careful because of the section-divider clip-paths that squarespace use to do wavy lines between sections. However, it's not that hard to get the effect you're looking for.

Essentially you have to place a block of content neatly over the join of the sections, make sure that that is pulled out of the flow of the document so that it appears over the sections, then apply a backdrop-filter. The filter you've tried to apply blurs the element itself, whereas a backdrop-filter blurs the elements behind.

something like this:

section:nth-of-type(n+2) .section-background::before {
    content:'';
    display:block;
    position:fixed;
    left:0; 
    right:0;
    top:0;
    height:20px;
    z-index:999;
    transform:translateY(-10px);
    backdrop-filter: blur(2px);
}

• nth-of-type is applying it to all sections apart from the first one
• put a pseudo element in before which sits at the top of that section
• position is fixed as we want it to come out of the document flow of the sections
• the height is the height of the blur div.  (20px)
• you transform it to move it back have the height of the div (10px) so it overlaps the sections
• backdrop-filter does the work. you want to make sure that your blur distance is less than 25% of the height of your blur container (so 5px in my case) as this will cause a hard line.

if clip paths are involved, you'll need to do something different as these are rendered differently. in those cases the section divider is padded out at the bottom by the divider height so you'd need to blur out the padded section at the bottom, trying some similar ideas to overlay the clip path by a certain boundary.

.has-section-divider::after {
    content:'';
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:-10px;
    height:calc(20px + var(--divider-height));
    backdrop-filter:blur(3px);
    transform:translateY(5px);
}

You can see the effect of these in the graphic below , and I've added another with a red highlight to show where these new elements end up overlapping their sections and how the two differ.

There's no official way, but just because it seems fun and interesting (ie more interesting than what I'm supposed to be doing...) here's one code way that I guess is a little hacky.

The way that Squarespace do this is they write the properties that you specify in the designer into JSON within a script tag that has the class "Marquee-props". When the page is loaded up one of Squarespace's javascript files kicks in and reads those properties out and then applies them to the marquee. It does the marquee animation in code - as opposed to SVG animation, or CSS animation via properties - so it's not really possible to change these values once they've started. at least not easily. However, if you can get to the values before their scripts kick in, read in the properties, change them and then write them back out then it will pick up the new values once the initialisation script finally kicks in.

So, you can stick a code block in (pro feature obviously) somewhere after the marquee in the flow of the page and add the following code:

<script type="text/javascript">
  // this will only find the first marquee on the page
  // (at the point that the script is executed)
  const el = document.querySelector(".Marquee-props")
  const props = JSON.parse(el.innerText)
  props.animationSpeed = 5.0 // this is the speed!!!
  el.innerText = JSON.stringify(props);
</script>

now save it and load your page and watch your marquee whizz by....

I think you could file this under "non-production, educational purposes". squarespace could change their implementation at any time, but I've tried it and it does work. 

you're on a 7 template, so the following css code will hide the times

span.item-time { display:none !important; }

if you want to hide them on the flyout/hover effects then add this

div.flyoutitem-datetime { display:none !important; }

if you only want it to happen on this page (because you've got another events calendar somewhere else then you should prefix the rules with your collection id (you can use the squarespace id finder extension for this kind of thing)

body#collection-5a68ea09ec212dd1049bcecb span.item-time { display:none !important; }
body#collection-5a68ea09ec212dd1049bcecb div.flyoutitem-datetime { display:none !important; }

make sure the layout is grid: basic, then add this

.portfolio-grid-basic {
  grid-template-columns: 1fr;
}

when a product is sold out Squarespace add "sold-out" as a class to the article element (in the product detail) and to the grid div element (in the store listing page). This means that you can target the picture in a similar way. so, to grey out sold out items in the listing page you could do something like this:

div.grid-item.sold-out .grid-image::before { 
  position:absolute; 
  inset:0; 
  z-index:10; 
  content:""; 
  display:block; 
  background:grey; 
  opacity:0.5;  
}

I helped someone else on this. it's not really possible as the blog layout is not designed for that, unless you can keep the number of posts below the maximum on one page (20). so if you were careful and made sure to delete previous "events" to keep the number of upcoming low it might be possible to use the solutions / techniques in that post.