Spark_Plugin

It depends on the style of the website. Some might for example go all in with a contrasty color palette, while some do very well with unique typography.
For me, it is smooth animations, and I try to add it as much as possible. One animated element that makes the site stand out from the rest (I think), is the animated gradient headings:

 

This is an interesting subject choice because it isn't possible to practice Mobile First Design on Squarespace yet - at least not without a lot of code or a no-code pay-monthly add-on. The Squarespace platform doesn't allow you enough control over mobile layouts at present as it decides the mobile layout for itself.
I'm really looking forward to the day when the editor is updated so that we can build mobile sites more easily on the platform. Something to look forward to in 2022. 🤞

CAC (customer acquisition cost) is a metric that I use for my ads, and it helps me calculating how much I can spend on ads, for every new customer.
Let's say the average revenue from each customer is $100, your CAC should ideally be $30-40. This means you can spend $30-40 in ads for every new customer.
In Google Ads you can easily track this with their conversions-feature, and see how many new subscriptions and purchases you get from your ads. 
 

Hey!
I made a guide on how to add over 1600 icons to Squarespace, including a lot of different customization options.
You can check out my free icon guide here.

Hey everyone!
I made a free guide on how to add Font Awesome to Squarespace, including a lot of different customization options.
You can check out my Font Awesome guide here.

Thanks guys. If that's the case, it sure would be great if support would just say so. The change isn't what I find frustrating, but the usual canned responses from SS support. 

Great work @squarepaste !
It both looks and feels clean and simple - just as it should✨
Don't have much feedback for improvements, more than to change the "Aliquam erat ..." etc to English. It would be easier to understand if it were English.

Even an experienced writer needs a thesaurus sometimes (All the time?). It's one of your best friends when writing, helping you break out of a rut when you need to, unearthing valuable and sometimes unconsidered synonyms.

Thanks @tuanphan! 😃

CAC (customer acquisition cost) is a metric that I use for my ads, and it helps me calculating how much I can spend on ads, for every new customer.
Let's say the average revenue from each customer is $100, your CAC should ideally be $30-40. This means you can spend $30-40 in ads for every new customer.
In Google Ads you can easily track this with their conversions-feature, and see how many new subscriptions and purchases you get from your ads. 
 

@Jo_SQSP greetings
setup tracking first - before you run any kind of campaign or marketing activity make sure that you have every commercially interesting touch point on your website setup for tracking. This means email addresses, telephone numbers, dedicated form submit URLS that you can capture as form-sends, you can also setup your most important pages as Intent triggers. This means for example if you have a page that contains your contact address you can trigger that page as a goal.

To put this into context
If you run a Google Ads campaigns without tracking you will know that people arrived at your website. This makes it impossible for your to distinguish between browsers and people that are interested in your product/service. If you deliver a visitor to the website and they go through your website and also spend time on your contact page, you can determine that they may have a high interest in your business. You can then create AUDIENCES using Google Analytics either against Google Events or against Goals which then allows you to create remarketing campaigns. What's more if you have some logic to what you are capturing you can segment your audiences.
For example:
I know that everyone in Audience X has shown an interest in my company so I will setup and run a Google Ad with an offer, or with a link to a piece of content on my blog that is going to provide these people with a greater understanding that I am a real person and my company can be trusted.
🙂

LOVE the new accordion block. @ghostpluginshas some great free Custom CSS for it too.
I did a quick video walkthrough of styling options here (there are some that are kinda hidden, like the description width): https://christyprice.com/blog/how-to-add-accordion-squarespace

Squarespace released an Accordion Block a few weeks ago.
Here are some useful code when you use the accordion block (Add to Design > Custom CSS)
#1. Change Dividers Color
/* accordion divider color */ .accordion-divider { color: #ff00ff !important; } #2. Change Arrows Color
/* accordion arrows color */ .accordion-block .arrow { border-color: #ffff00 !important; } #3. Add icons before Accordion Titles
/* Accordion icons before titles */ li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } li.accordion-item:nth-child(1) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg); } #4. Different Color for Accordion Titles
/* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: red; } li.accordion-item:nth-child(2) .accordion-item__title { color: blue; } li.accordion-item:nth-child(3) .accordion-item__title { color: violet; } #5. Change a specific word color in Accordion Content
First make it bold then use this CSS
/* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: red; } #6. Accordion Title Background Color
/* accordion title background */ .sqs-block-accordion .accordion-item__title-wrapper { background-color: #32a4e6; } #7. Accordion Content Background
/* accordion content background */ .sqs-block-accordion .accordion-item__dropdown--open { background-color: #262853; color: white; } #8. Add Unordered List in Accordion Content
First, add some text then Underline them

Next, use this CSS
/* Accordion Content - Add Unordered list */ span[style*="text-decoration"]:before { content: ""; display: inline-block; width: 3px; height: 3px; background-color: black; vertical-align: middle; margin-right: 3px; } span[style*="text-decoration"] { text-decoration: none !important; } #9. Accordion Titles – Add Line Break
If you use a Business Plan or higher, you can use another approach in this comment
/* Accordion SubTitle */ li:nth-child(1) span.accordion-item__title:after { content: "Accordion Subtitle 01"; display: block; font-size: 15px; } li:nth-child(2) span.accordion-item__title:after { content: "Accordion Subtitle 02"; display: block; font-size: 15px; } li:nth-child(3) span.accordion-item__title:after { content: "Accordion Subtitle 03"; display: block; font-size: 15px; } Result

#10. Accordion Title-Content Text Size on Mobile only
/* accordion title - content text size on mobile */ @media screen and (max-width:767px) { /* accordion title */ span.accordion-item__title { font-size: 12px !important; } /* accordion content */ .accordion-item__description * { font-size: 10px !important; } } #11. Simple Style 01
Add a Code Block under Accordion >> Use this code
<style> /* accordion title color */ .accordion-item__title-wrapper { background-color: #1a252f; color: white; padding-left: 20px !important; padding-right: 20px !important; } .accordion-item__click-target { padding-top: 15px !important; padding-bottom: 15px !important; } /* make first item round corner */ li.accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius: 10px; border-top-right-radius: 10px; } /* make last item round corner */ li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* remove divider between accordion items */ .accordion-divider { display: none; } /* accordion content padding */ .accordion-item__description { max-width: unset !important; padding: 20px !important; } /* arrows color */ .plus>div { color: white !important; } </style>
Coming soon.
#12. Accordion Content Link Style
/* Links underline */ div.accordion-item__description p a { border-bottom: 1px solid black; } /* Links font style */ div.accordion-item__description p a { color: red !important; font-size: 30px; font-family: monospace; letter-spacing: 2px; } #13. Add a button inside Accordion Content
First, you need to add a text link. Next, add this CSS to turn link to button
/* turn accordion link to button */ div.accordion-item__description p a { background-color: black; color: white !important; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; border-color: red; border-width: 1px; border-style: solid; } #14. Add an Image inside Accordion Content
Use this CSS to add image to top or bottom of accordion content
/* Add an image into Accordion Content */ /* replace demo image with your image url */ /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg); background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } #14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image 
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01

Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result

If adding 3 images, doing this



and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url 

highlight the text url > Add same image url (enable Open in New Window)

then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style>  
#15. Change Plus/Minus (+/-) to custom icon
Replace demo image urls with your icon urls
/* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } /* Minus */ [data-is-open="true"] .plus { background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important; background-size: contain; background-repeat: no-repeat; } [data-is-open="true"] .plus div { display: none; } #16. Change style of a word on Accordion Title
See this comment

Wrote by @tuanphan

Squarespace updated an Accordion Block. Now you can add it without using custom code

Amazing! 😍 Thank you so much

@RobPegurri Sure, use this updated code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#sqs-cart-container .checkout').after('<div class="tuan"> By continuing to checkout, you have<br/>read and agreed to our <strong><a style="color: #7a6e65;" href="https://frillup.ch/terms-and-conditions" target="_blank" rel="noopener">Terms and Conditions</a></strong></div>'); }); </script> <style> .tuan { display: block; height: auto; text-align: left; color: #FFFFFF; background-color: transparent; font-size: 1.1rem; line-height: 1.5em; margin-top: -82px; margin-bottom: 300px; } </style>  

@RobPegurri Sure, use this updated code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#sqs-cart-container .checkout').after('<div class="tuan"> By continuing to checkout, you have<br/>read and agreed to our <strong><a style="color: #7a6e65;" href="https://frillup.ch/terms-and-conditions" target="_blank" rel="noopener">Terms and Conditions</a></strong></div>'); }); </script> <style> .tuan { display: block; height: auto; text-align: left; color: #FFFFFF; background-color: transparent; font-size: 1.1rem; line-height: 1.5em; margin-top: -82px; margin-bottom: 300px; } </style>  

@Aashini oh my bad, forgot to add something. Try this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#sqs-cart-container').after('<div class="tuan"> By continuing to checkout, you have<br/>read and agreed to our <strong><a style="color: #7a6e65;" href="https://frillup.ch/terms-and-conditions" target="_blank" rel="noopener">Terms and Conditions</a></strong></div>'); }); </script> <style> .tuan { display: block; height: auto; text-align: left; color: #FFFFFF; background-color: transparent; font-size: 1.1rem; line-height: 1.5em; margin-top: -82px; margin-bottom: 300px; } </style>  

Spark Plugin is a design tool with 100+ customizations for Squarespace websites.
Click "Follow" above to see new customizations every month.
Provided by Rasmus Myhrberg, Circle member and maker of Spark Plugin.

I'm making Spark Plugin for Squarespace.
I got the idea earlier this year when I was searching around for css/plugins for a site I was making. "Why can’t I have simple toggles inside squrespace to achieve the same thing?", I thought. So I started experimenting with it, and made Spark.
Spark offers 100+ stunning presets so that anyone can have a beautiful design in Squarespace. Instead of copying and pasting code, any preset can be added instantly in one click. Also, all presets are updated live which means they will not break like other plugins/code.
I recently released the first version (early access) of Spark, you can try it out here:
https://sparkplugin.com

I'm making Spark Plugin for Squarespace.
I got the idea earlier this year when I was searching around for css/plugins for a site I was making. "Why can’t I have simple toggles inside squrespace to achieve the same thing?", I thought. So I started experimenting with it, and made Spark.
Spark offers 100+ stunning presets so that anyone can have a beautiful design in Squarespace. Instead of copying and pasting code, any preset can be added instantly in one click. Also, all presets are updated live which means they will not break like other plugins/code.
I recently released the first version (early access) of Spark, you can try it out here:
https://sparkplugin.com

For anyone using Spark Plugin, you can do this in a click:

There are different ways to do this with code, but anyone looking for a no-code way, you can do this very simple in Spark Plugin:

I made a simple guide on how to do this for free:
https://www.sparkplugin.com/blog/how-to-add-an-accordion-to-squarespace
Hope you like it! 😊

I'm making Spark Plugin for Squarespace.
I got the idea earlier this year when I was searching around for css/plugins for a site I was making. "Why can’t I have simple toggles inside squrespace to achieve the same thing?", I thought. So I started experimenting with it, and made Spark.
Spark offers 100+ stunning presets so that anyone can have a beautiful design in Squarespace. Instead of copying and pasting code, any preset can be added instantly in one click. Also, all presets are updated live which means they will not break like other plugins/code.
I recently released the first version (early access) of Spark, you can try it out here:
https://sparkplugin.com