Begona

I created a quick demo for you here, Even Page + Universal Filter Plugin
https://tuanphan.squarespace.com/events-filter?noredirect
pass: abc
I only create Basic Filters, if you need something more complicated you can describe it detail, I will adjust.

Edit product > Additional Info > Add a Code Block > Use this code
<script> window.location.href = "https://google.com"; </script> Replace google with new url

Hi Adele
In summary, the Squarespace checkout cannot be customised. The longer answer is here.
Possible workarounds include:
Add gift-wrapping to one or more of your delivery options so it becomes 'Delivery and Gift Wrapping" and includes the additional charge. Offer gift-wrapping on product pages. You can use the related products feature to do this. Offer gift-wrapping on the cart page that appears immediately before the checkout page. This will require custom code that is specific to your site. I hope this helps.
  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Here is some example CSS.
.primary-button-style-solid .site-wrapper #block-yui_3_17_2_1_1657607972117_327082 .sqs-button-element--primary {   background-color : green;      } .primary-button-style-solid .site-wrapper #block-yui_3_17_2_1_1657607972117_74694 .sqs-button-element--primary {   background-color : blue;      }
Let us know how it goes.

You're welcome. You should be able to add a link by pasting the HTML of a link into the string. You'll find examples in this W3Schools page.
For example, instead of the text "here" you might use this:
<a href="/page-name">here</a> Does that help?

First, download this whatsapp image > upload to your site
Next, Add to Settings > Advanced > Code Injection > Footer
Replace 0123...89 with your whatsapp number
<a href="https://wa.me/0123456789" target="_blank" class="tp-whatsapp"><img src="/s/w.png"></a> <style> a.tp-whatsapp { position: fixed; right: 10px; bottom: 10px; z-index: 9999; } a.tp-whatsapp img { max-width: 50px; } </style>  

@media only screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: 1fr 1fr; } } Morning all! @Houstonselects @adxmxe @pawtheroom
Here's some replacement code for you to try, please let me know if that works for you.

The change from "*" to "(required)" is part of the Form Block update, currently being rolled out to all sites.
Have you checked the Language & Region settings on your sites (in Settings > Language & Region > Region) to check they are correctly configured for French?

If you're looking for a CSS solution to restore the asterisk on form titles, please try this:
/* Hide required on field titles Tip by sf.digital */ .form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required { visibility: hidden; } .form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before { visibility: visible; content: "*"; font-size: 1.5em; line-height: 1em; } .form-wrapper .react-form-contents--submitted .required:before { visibility: hidden!important; } Let me know how you get on.
Did this help? Please give feedback by clicking an icon below  ⬇️

I AGREE! Come on! I already paid more than £200 and I have to pay $70 do add something that is THE BASIC of a portfolio??? Seems like a scam to me. I'm speechless

No, we don't need to pay $70 for a plugin, Squarespace needs to add to their service such a essential feature like a filter in a portfolio page. Lot of people with the same needs and the only answers I found are external plugins offers. 

Come on Squarespace!

Definitely think that currently portfolios are very limiting.
It would be great to have:
1) - a global project section - when you make a project it can be a blog OR portfolio in style,  you just need to assign it a tag. That project can then be duplicated, it can be given different tags to assign it to different groups or collections if you want to move it around. The blogs vs portfolios seem quite similar, with limiting factors for both. if they were combined to just be a project, it would give so many more options and control.
For example - example: you want to add all photography but give them different tags (portrait, landscape, travel, wedding etc) so when you want to make a portfolio just for weddings, you have the ability to filter and add only wedding photography. It would be efficient and only pull in everything you have assigned wedding. You could make niche collections and take it further with more tags. 
2) Have a portfolio filter visible option - so on a portfolio, people can see the different filters and click on the one they want. (eg travel, weddings etc)

Hi guys, thanks for your help!
I've contacted the support and they confirmed it's a bug on their side so they opened a ticket for that. I'll close this topic now.
Thanks again 🙂

Typically you need to set the image to FIT rather than FILL and adjust the block alignment. FIT means that the image doesn't crop so should maintain it's aspect ratio.

Not possible. We can change Carousel to Grid, but can't change Grid to Carousel.
You can consider adding Carousel, then we can change it to grid on Desktop

I want to ensure that all quotation marks in my site's user-facing content, eg. my blog posts, utilize the typographically correct (and aesthetically pleasing) curly quotes. My preferred curly quotes are frequently replaced by straight quotes (which are used in code as well as for denoting measurements in inches and feet).
Here's a visual that explains the difference between straight quotes and curly quotes and what I'm trying to accomplish.
Here's an example blog post that uses many curly quotes throughout.
Squarespace seems to choose erratically to randomly apply straight quotes or curly quotes, and it's not always easy for me to change them to the proper version.
While I want curly quotes on the user-facing content, I need to ensure that straight quotes are exclusively used in code blocks because otherwise it creates bugs: The other day, Squarespace chose to randomly apply curly quotes within a code block, and this rendered the code block nonfunctional. When I tried re-typing the proper straight quote over and over again, Squarespace kept switching it to a curly quote. I eventually got it working by copying a straight quote from elsewhere within the code block then, pasting that. And vice versa: At other times in the past, when I tried typing a curly quote in a blog post or site content, Squarespace kept changing it to a straight quote. Super frustrating. 
I don't understand Squarespace's logic for making a quote straight or curly. 
I want to be able to control this logic using a code injection. 
Any advice would be appreciated.

I don't have a specific solution just some observations.
This is for the v7.1 rich text editor.
Typing a single quote gives you a smart quote. Hitting the backspace key turns it into a dumb single quote.
Pasting text with smart single quotes from Google Docs or any Word Processor, preserves the smartness.
Pasting text with dumb single quotes from a code editor like BBEdit, preserves the dumbness.
Code with smart quotes in it are preserved when pasted into a code block.
Code with dumb quotes in it are preserved when pasted into a code block.
My general experience has been when code blocks get smart quotes they were picked up because the code passed through a word processor, not a code editor.

This usually happens when the browser fails to load the Squarespace CSS file (site.css) correctly. This usually happens for one of three reasons:
Errors in your Custom CSS that prevent it saving/loading. You can resolve this by replacing your Custom CSS with a few simple lines of CSS for testing purposes. If this is applied correctly, your Custom CSS was at fault. Errors in the browser cache. This can be cleared with a hard refresh (Cmd ⌘ and Shift ⇧ + R on Mac). Errors in the site cache on the Squarespace backend. If this is the issue (the other two suggestions didn't fix it) then you'll need to contact Squarespace Customer Care and ask them to clear the site cache.

I'm not sure what code you're using, but you could try this:
@media only screen and (min-width: 768px) { .fe-block-yui_3_17_2_1_1666291546789_152701 { position: sticky; top: 100px; } }  

The Squarespace 7.1 version of our Currencies extension is now available. Show your store prices in your customers' local currency, whether it is Euros, Australian Dollars, Kuwaiti Dinar or South Korean Won, we've got you covered with more than 30 of the most popular currencies used in eCommerce.
"Currencies" includes all the features of the best-selling Squarespace 7.0 extension available since 2018 (and which is still available) as well as new features specific to Squarespace 7.1.
Automatically determines the user’s home location and sets their preferred currency to match Users can also select their preferred currency manually if they choose, using the currency selector in the header Prices are converted in real-time using the latest currency exchange rates It shows customer-friendly, rounded prices, with three different options to choose from A user's settings are remembered for subsequent visits Includes professional installation by us, styled to match your site. This video was produced using the Squarespace Video Studio App ❤️.
For further information, including a detailed specification, please visit the sf.digital website. If you have questions, I'd love to answer them. Please use the pre-sales contact page.

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

There are a lot of settings for the list section, and not always wholly self-explanatory! 

Thank you so much, @Ziggy, I didn't know this setting existed!

Can you share the URL and page?

Since you're using a list section, do you have this setting turned on?

We could try this variation:
section[data-section-id="64070c04bd9f93133e963147"] .section-border { background-color: transparent !important; background: transparent !important; }