raeroshow

Update: I tried the version you mentioned from here -https://codepen.io/goformarty/pen/pLzbZd and it worked! Thank you!

@paul2009 Thank you so much. "You need to select one or the other for your inventory management. " - that right there is the key. Also, thank you for explaining the difference between Square POS and just a square reader - I was using those interchangeably not knowing there was this big difference. 
Thanks for the clarification. I bookmarked your other post for the future, as this is sure to come up again!
Best,
Rachel 

As expected, there is quite a lot of confusion about the Point of Sale services provided by Squarespace, especially as they partnered with Square - a major player in the point of sale payments market. The company names are just too similar!
To ensure everyone is on the same page, I'll try to clarify some of the areas where others have been confused.
 
Square isn't Squarespace
Firstly, it's important to remember that Squarespace and Square are completely separate companies. They are not connected, and neither are their ecommerce platforms. You need to select one or the other for your inventory management. You cannot link or sync them directly, although you can pay additional monthly fees for third party 'sync' services.
 
Availability
The options available to you will depend on your location.
Squarespace POS is currently only available in the USA. You cannot use it in Canada (or anywhere else) yet.
Square POS is available in many more countries.
 
Moving from Online to In-Person
If you are based in the USA and have been using a Squarespace Commerce plan to sell online, you can now sell in-person too, using the same Squarespace platform. To do this, you need a newish iPhone, iPad or Android phone that is capable of running a recent version of the Squarespace Commerce App (you'll find specific App version details in this support article). You'll also need to open a Square account for in-person payment processing and purchase a specific type of card reader (you cannot use fancy Square registers).
If you are based outside the USA and are selling online with Squarespace, there is unlikely to be a Squarespace-only option available before 2025. 
 
Moving from In-Person to Online
If you are based in the USA and are using Square for in-person sales then you have two options available to help you move online:
You can build an average Square Online Store and start selling online really quickly. Square will sync inventory between your POS and your Square Online Store if you create it using the "online store" option within your existing Square account. You can build a beautiful Squarespace store and then transition your inventory off Square and onto Squarespace. Once complete, you can use Squarespace for both online and in-person sales. If you are outside the USA and you currently using Square for in-person sales then your options are:
1. You can build an average Square Online Store (as described above) for your online sales.
2. You can build a beautiful new Squarespace store for your online prescene and then purchase a third-party solution to bridge the gap between the two different inventory systems. Bear in mind that there will be additional costs to use a inventory-sync service such as Trunk Inventory or SKU IQ.
I hope this helps.

I think the confusion comes from the fact that the company "Square" and their solution, "Square POS", share the same name. I tried to clear this up in my post called Why is Squarespace POS so confusing?
First, let me try to clarify what I said above when I stated "Square POS can't integrate directly with Squarespace Commerce". The point of sale system called "Square POS" (which includes fancy hardware like Registers and software for inventory management) cannot integrate directly with Squarespace Commerce. 
However, you can buy a simple piece of Square hardware called a card reader (not their Register) and use this to read cards and take payments through the Squarespace App, that will then be recorded on Squarespace, not on Square POS. However, that is the extent of the integration.
This means that you can use "Square", the company, to process payments, but you cannot use "Square POS" with Squarespace. At least not unless you want to run two independent inventory and payment systems and try to sync stock levels with a third party service.
Sorry if that makes it more confusing!
Here are some other posts:
 

Just wanted to give another kudos to @creedon. This works and it's amazing. Thank you so much! 

Just wanted to give another kudos to @creedon. This works and it's amazing. Thank you so much! 

I’m having the same issue.
The famous: Some elements have a [tabindex] value greater than 0
The code identified is the following:
<a href="#page" tabindex="1" class="header-skip-link sqs-button-element--primary">
Reading some other sources it seems that we could just change the tabindex value to be equal to 0 would fix.
How do we do it in Squarespace, please?

Add this code to Website Tools (under Not Linked) > Custom CSS
[data-section-id="656f8bfc7a7242380d0b9456"] { & { position: absolute; top: 50%; transform: translateY(-50%); } .section-background, .section-border { background-color: transparent !important; }}

Please post the URL for a page on your site where we can see your issue.
A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.
Please set up a site-wide password, if your site is not public and you've not already done so.
Post the password here.
Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.
Please read the site-wide password and how to share a link documentation to understand how they work.
We can then take a look at your issue.
You may find How to post a forum question post useful.

The custom css is a good fix, but there should be a way to style drop down menus (background color, fonts, spacing) without custom CSS - like you could in 7.0. Does anyone know if this is something that will be added to 7.1 (or is currently available and I can't find it)? There seems to be so much basic customization missing from this version of the platform.
Thank you!

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

I want to +1 the need for recurring events -- Not only for ease of workload, but also for SEO purposes. When you keep duplicating past events, google sees those duplicate pages over and over again and flags them as duplicate content - even though it's a monthly event. 
That said, if anyone has a way around this duplicate content issue - please let me know! My client is having a tough time with this.

Dear Squarespace team,
Full-width sliding images with the ability to place the same or different text and buttons on each image is absolutely a feature we need. I get this request on literally almost every site I build. 
I believe it is a feature that would get used  millions of times over. I love what you have built and the more I get used to 7.1, I can see it's advantages. Adding this feature would make 7.1 an absolute no-brainer. Please acknowledge our collective desire to have this implemented as soon as possible.
Thank you for all you do!

I want to +1 the need for recurring events -- Not only for ease of workload, but also for SEO purposes. When you keep duplicating past events, google sees those duplicate pages over and over again and flags them as duplicate content - even though it's a monthly event. 
That said, if anyone has a way around this duplicate content issue - please let me know! My client is having a tough time with this.

Nevermind! I actually figured out how to do all of this using Advanced injection code in the different blogs. I should be all set. Thanks again!

I have sites which operate in French, and all the required fields on a form now have an English 'required' on them. Any thoughts on how I can change that. 
I have a similar issues name and address blocks where the fields headings are in English.
Thx in advance.

Thank you for sharing the SEO part. I didn't know that they would be flagged as duplicate content and dinged.

I am having the same problem too. 

I thought I'd +1 to this topic. I've been working on a 7.1 site and for the past half hour, I've been getting the "Couldn't Save Information" error (screenshot attached) every time I save an edited blog post. It's slowing down my work process and driving me nuts. Would love to get some eyes on this! 
Steps to replicate issue: 
Open a blog post Edit the blog post in any way (either in Settings or in the post itself.)  Save. Then I get the error.
Then... I have to reload the page and scroll, scroll, scroll until I find my place again. Thanks!

Hello!
For one of my service that I offer on my website, I would like my customers to be limited to only 1 quantity  per order.  Basically, I don't want them to be able to press "add service" twice to the cart. How can I do that?
Furthermore, once the customer is on the checkout page, the quantity field is editable. How can I make it uneditable so that the quantity is fixed to 1 ?
Thanks ahead for your time in answering this. 
Best,
Charles
 

The Squarespace Calendar Block on a Squarespace website connects to the Squarespace Events Page (also known as the Events Collections).  
Events pages can be used to schedule events up to two years in the future but they do not support recurring events. 
You can manually duplicate events to create identical events without reentering the same information
Recurring events are not on the roadmap and, Squarespace have previously stated that recurring events are unlikely to ever be added to the website platform. As a workaround, they added the ability to duplicate events so you can create identical events without reentering the same information. 
If you need recurring or repeating events then you'll need to look at third party solutions.
If you want users to be able to book events, including recurring events you can use Squarespace's scheduling platform (Acuity Scheduling) instead. Acuity does support recurring events.
Did this help? Please give feedback by clicking an icon below  ⬇️

Site URL: http://www.blackhartstp.com
I maintain our bar's calendar for shows and events and there are several features that are absolutely maddening. Many of our events are weekly, but in order to put each individual event up you must: duplicate the event, delete (copy) which has been added to the title, and then at times you have go in and manually adjust the individual event webpage because it just keeps adding digits to the html every time you duplicate.
All of this means that it takes probably an hour or two each month rather than just setting the calendar for the year in one sitting.
 

Im also having the same issue.  i already purchased the commerce basic plan here (for a full year) and cant seem to work out how to set up my shipping that wont rip the customer off nor put me in the red.   i've already created all my products with Printful and are ready to go.  but i cant seem to just have a shipping rate that can calculate the amount per product category and to which country its meant to be shipped to.  does shopify have this this capability? any help or advice would be highly appreciated

Add to Home > Design > Custom CSS
a#site-title:after { content: "tuan phan"; display: block; }  

I thought I'd +1 to this topic. I've been working on a 7.1 site and for the past half hour, I've been getting the "Couldn't Save Information" error (screenshot attached) every time I save an edited blog post. It's slowing down my work process and driving me nuts. Would love to get some eyes on this! 
Steps to replicate issue: 
Open a blog post Edit the blog post in any way (either in Settings or in the post itself.)  Save. Then I get the error.
Then... I have to reload the page and scroll, scroll, scroll until I find my place again. Thanks!