Leaderboard

As per Squarespace’s support document: If you're importing products to a different site, remove the values under Product IDand Variant ID, leaving the headers intact. https://support.squarespace.com/hc/en-us/articles/360000694948-Exporting-products-to-a-csv#toc-re-importing-your-products

Hey John, I've wrote up a short script that should solve your problem, I've included it in this blog post I wrote explaining how to solve the accessibility button issue: https://jolsonweddings.com/education/squarespace-buttons-accessible-name In short, you just have to add some extra HTML to your footer to give the buttons Aria-labels. Good luck! J.Olson

Has anyone who has previously used Squarespace and was familiar with the design process tried making a new, from scratch site using 7.1? All of the Design customization is GONE! There's a super convoluted way to go in and customize in settings, but you still have way less control than before — not to mention the templated font combinations are TERRIBLE. Is there any way to go back and use the old Squarespace??! Is any one else as angry about this as I am? It's like Squarespace decided they wanted to make the design process baby boomer-friendly, since... yanno, that is who is designing the vast majority of websites.

I've been using Squarespace for years and just tried to start a site with 7.1 and I agree, it's awful. The lack of design customizability options is completely unusable for me. If they discontinue 7.0 without making major changes to 7.1 first I'll have to stop using the platform.

I'm looking to create a website to showcase products and services in a similar style to an online store (offering products, descriptions, prices, etc). I want customers to be able to select the products they desire. These products are stored in a basket (or similar). When a customer has selected all of the products/services that they are interested in they can proceed to "checkout". However, it is at this point where the solution differs from a traditional online store. Instead of checkout and payment i'd like the customers to be presented with a "submit" option, which takes all of the items they've selected, prompts for contact details, and submits these into a queue so i can review and contact the customer to discuss further. I have been advised that this functionality is not currently a feature within squarespace, however was advised that this forum may be able to advise a way that this could be achieved. Any help is very much appreciated, and i'm happy to provide more information/clarity if required. Thanks

I am interested in the exact same solution, however my site is on 7.1 and the Wishlist extension posted above is not yet compatible. However, they are working on it. Any chance @ThompsonWebDesign you know of someone who could achieve a similar custom edit for 7.1? I'm needing it in the next month. I've reached out to @paul2009 via email as well.

Is it possible for the new image added to a gallery to come up first in order and not at the end of the page?

add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1576760789753_14465 a:hover img { visibility: hidden; } div#block-yui_3_17_2_1_1576760789753_14465 a:hover { background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg); background-size: cover; background-repeat: no-repeat; }

add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1576760789753_14465 a:hover img { visibility: hidden; } div#block-yui_3_17_2_1_1576760789753_14465 a:hover { background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg); background-size: cover; background-repeat: no-repeat; }

(Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: violet !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.

add to Home > Design > Custom CSS .form-wrapper .form-submission-text { text-align: center; }

Hi @jorge0246, you can paste this code into Design > Custom CSS. Play around with the 20px value until you get the look you want: .sqs-donate-button { font-size: 20px !important; }

@tuanphanThanks so much for this, been looking for days for a custom code that worked for changing the entire font for my site!!!! You're the best

.image-title-wrapper * { font-family: tuanphan !important; }

Edit text position with this css /* All slide text */ .slide-meta-content { left: 10% !important; top: 30% !important; } or last slide text /* last slide text */ .gallery-wrapper .slide-wrapper:nth-child(13) .slide-meta-content { left: 10% !important; top: 30% !important; }

.header-nav-item--active a { background: none !important; }

You mean change image on hover?

Once you've formatted the text as italics (using the text formatting toolbar), you can add: /* Replace italics with strikethrough */ em { text-decoration: line-through; font-style: normal; }

hi @okaykeating, I use the Lightbox Anything (aff) plugin for this exact thing in my footer. You can see another example of how I use it in my blog post 3 Best Squarespace Plug-ins

Found the solution.

I finally found a workaround solution for this. You can create a link to a pdf from an image link. If anyone would like the work around, I'd be glad to post it.

Hello and welcome to eCommerce on Squarespace! Are you interested in learning the basics of building inventory, accepting payments, and managing orders so you can successfully set up your eCommerce business online? The Squarespace Community team invites you to join us for one of our Launching Your Online Store webinars. In this expert-led webinar, you’ll learn the basics of setting up your site’s store and get comfortable with Squarespace's fundamental eCommerce tools. During the webinar, you’ll also have the opportunity to ask any questions you may have with our team standing by to assist! The webinar is free, yet space is limited. Register now to secure your seat: Sign me up As a note, these webinars are for the legacy version of the platform, version 7.0. To learn which version your site is on, see our guide: What's my site's template and version? While your site’s editor will look slightly different if you are on version 7.1, most of the webinar content is relevant to both versions as most Commerce features work the same way as they do in version 7.1. We’ll see you there!

Its in the Farro Family template. Could be Farro or Haute

Hello! I am using the tremont template and my branding logo in the header is a png file with transparent background and white foreground. On the homepage with dark background, this looks good. But on the other pages with white background, its almost invisible. How can I invert my logo on sites with white background? Or can I just provide a second, alternative logo with a black font for pages with white backgrounds? Thanks in advance!

Add to Home > Design > Custom CSS .header-nav-folder-item a { padding-top: 10px !important; } .header-nav-folder-item--active a { color: red !important; }

This was so timely! Thank you for posting as I just ran into needing this today!

Try disable ajax loading: https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

You could use a number of Summary Blocks on your landing page to show visitors the deals of the week and new arrivals. You could also include feature images that lead visitors to the pages that show the full ranges of products. If these are the actual Product pages, the 30-item limit for Summary Blocks shouldn't be an issue. This is a limitation of Squarespace 7.0. However, Squarespace released Squarespace 7.1 in January and in this new version you can add other content to Product pages. There isn't currently a way of migrating from one to the other so you'd need to start again if you wanted to use this version.

Safari always causes problems... You can try contacting Squarespace Customer Care Livechat I don't use Safari

Add to Home > Design > Custom CSS .collection-type-blog.view-list section#page { max-width: 75%; }

Use CSS like this... .image-subtitle-wrapper h4 { background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg); color: transparent !important; }

@Caballero I also agree, Whatsapp is crucial in any WebStore today... let's make this post a complaint and send the link here to give more attention.

Scratch my earlier question. I added this code to the CSS that @lu.diehl posted regarding banner slideshow height and the grey strip disappeared. Hope it works for those still having trouble! .sqs-gallery-block-slideshow{ background-color: #ffffff; height: 450px!important; }

Hi Christy, thank you so much! I had found a roundabout way to do it (was using "button" class rather than "burger-inner" class) but this looks way better. I added bold font and a border above the "Menu" button and I really like the way it looks. Adding the "X" when it opens is a great UX touch too so thank you for that! If you have any idea how to add the Site Title to all pages above a certain screen width (I'm thinking 300px based on screen testing) or if there is a resource you could point me to it would be amazing! I've looked all over these forums and on the web generally and I can't find any way to include both the logo and site title with CSS which I think would look 1000x better than having just the logo. Also if you accept cryptocurrency as payment let me know and I can list you on our site with a hyperlink!

Add to Home > Design > Custom CSS .sqs-svg-icon--social .sqs-use--icon { fill: green !important; }

Agreed, it definitely feels like it's been made to accommodate business owners who know nothing about web (and probably are only shooting themselves in the foot by doing their own website) and a big middle finger to the designers they hire to build them sites (who actually know how to give them a site with brand consistency, that navigates easily, flows through information at a good pace, etc). I like the page layout features, but good god the type and color global changes are just shit.

Hi, all! I'm a relatively new member to Squarespace Circle but cannot rave enough about this supportive community! I have a client (a small coffeeshop/roastery with one physical location) who loves Squarespace and would like me to build a website (with online store) using the Squarespace platform. However, they use Square as their POS in store, and they would like to use Square to process all of their payments (both online and in-store). I understand that, as of now, Squarespace only accepts online payments using Stripe and/or PayPal, and they do not want to pay additional for any third-party integrations (like Ecwid or Trunk). To accommodate these requests, the only solution I can think of is to (1) build the "core" of their website on Squarespace, (2) set up their online store through Square's "Online Store," and then (3) have the "Shop" button on the navigation menu on their Squarespace website redirect to their online store in Square. Obviously, this is not the most ideal situation, but do you any of you have suggestions on a better solution/workaround (or, better yet, any idea if/when Squarespace will integrate with Square and accept Square payments for online transactions)? Please forgive me if I've misused any terminology--I've been building websites for years but am a bit of a novice in the ecommerce world. Thank you in advance for any insight you can shed on this situation! Jordyn

Can you share link to product in screenshot?

Hey @deirdrep - sorry this answer is a bit late but I am just now hopping back into the forums! Anywho, if you still need the code, this button will keep it active on all breakpoints and hide that hamburger for ya. Hope it helps! And let me know how those margins/paddings look after you try it; depending upon the size of the text in your button we might need to finesse this fit a little... keep me posted! 🙂 .header-burger {display: none!important} .header-actions .btn, .header-actions .header-actions-action--cta {display:flex!important; visibility:visible; margin:auto!important; order: 2!important;}

Add to Home > Design > Custom CSS #grid .project-title h3 { display: none; }

Would love to be able to add links to customer's Google Maps businesses with Google's new g.page URLs in the /settings/social-links menu where it would show as a Google icon instead of just a generic link icon. This would be a great way to link to a customer's business for any Google services (directions, reviews, photos, etc) Here's an example of the new link format. I think this is new within the last few months. Would love to see Squarespace support it! https://g.page/vammen-law?share

Is it possible to use CSS or other coding to turn on the ability for users to pinch-to-zoom on images in Lightbox view on mobile devices? (It would have to be the usual zoom in/out gestures, in Lightbox mode, on a Gallery Page.) I don't understand why Squarespace still doesn't allow this. Every other website and gallery maker I know of does it, as it's a hugely useful feature for photography and art given how small mobile screens are. Thank you!

I wouldn't say it's an issue with the logo. There's what's called a "race condition" (as in two JavaScript functions racing against each other) being caused between how Firefox is loading the header content and the "SyncHeader" function in the Bureau template family. Firefox is just a little slower (possibly due to flexbox-related calculations, but I'm not sure) and so the height is being calculated too soon. This is probably fixable by recreating the gist of the function from Squarespace's own code, then running it a little later. Insert the following via sitewide Header code injection: <script> // Fix header height on init. load in Firefox. window.Squarespace.onInitialize(Y, function() { document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-page").style.marginTop = document.querySelector(".site-header").offsetHeight + "px"; }); </script> If that doesn't fix it, try this one instead of the one above: <script> // Fix header height on init. load in Firefox. window.addEventListener('load', function () { document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-page").style.marginTop = document.querySelector(".site-header").offsetHeight + "px"; }); </script> Let me know how that works for you. -Brandon

Hello, I believe that other users also notice that squarespace load too many fonts than what it configured and show on "fonts on my site". The only trick that I’ve found to override it- is using adobe typekit. So now my site loads only the font and style that I set to it (two fonts). The build in option to use typekit in squarespace uses javascript. Now days (for few years) there is an option that adobe offer for typekit users to use the kit as css (inject to html or @import). I’ve tried it and it does make things quicker and with better results on website speed tests as google insight and others. But here is the problem – after few hours of disabling js of typekit – squarespace again started to load lot of fonts for no reason. So, what I want to ask from squarespace is simple – first stop to load unnecessary fonts that aren’t shown in site style as fonts in site. The second thing is to replace javascript of typekit with css loading of typekit. Where I can ask officially these features?

As @tuanphan has said, you cannot use CSS - or any other code - to affect the Squarespace Checkout page. This page is locked down because even the smallest change to a checkout usually requires a full PCI security audit to ensure payment security. If there are features that you need, it’s best to submit them to Customer Care so they can consider them for a future release of the checkout. This forum is not monitored for product feature requests so to provide feedback about this to Squarespace, raise a ticket through Customer Care. They'll document your feedback and share it with the appropriate team.

Hi @dan3. Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 . View Demo Site JavaScript Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script> CSS Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { min-height: 60vh; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); } This is of course experimental. Do let me know how it works for you, or if you have questions. If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date. -Brandon

You should insert the code into the Footer injection point Go to Settings > Advanced > Code Injection and insert in FOOTER area Please note that Code Injection is not supported on personal plans. You will need a Business or Commerce Squarespace subscription

Squarespace recently fixed a bug where products on disabled Products Pages could be added to the cart – previously, if you had a product on a disabled Products Page shared elsewhere on your site (in a Product Block or Summary Block, or linked directly to the URL), the product could be purchased. If you're noticing products can no longer be purchased, double-check that the Products Page is enabled (you can move it to your Not Linked Pages to keep it from appearing in your navigation. @oquay @kevinlh @booking

You can't use the same subdomain (www) for both. They must be different. However, you can use the same domain and change the subdomain. For example se.domain.com and www.domain.com, or en.domain.com and www.domain.com. See Connecting a subdomain to your Squarespace site.

You would first need to specify the mobile screen size you are targeting, and the element such as body text, site title or whichever element it's occurring with. It might look something like this for iPad: @media only screen and (max-width: 640px) { body { word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } You would add this to the CSS Editor.