Susana_SQSP

Hey @kjdawson1,
While there isn't a search field in the 7.1 template store where you can type the template name to find it, there are two options you might want to consider:
A. Select "All Templates" under the "Browse By" menu at the top left of the page. Then you can use cmd+f (Mac) or ctrl+f (Windows) to type the name of the template and quickly find it.

B. Directly visit the template's demo site at https://templatename-demo.squarespace.com/. In this case, you'd be replacing the name of the template in the URL. 

I'd like to know where in the Styles menu I can find the option to change the font size of the "You might also like" verbiage on my product pages. I've tried all that seemed to be correct but haven't been able to find the right option.
Additionally, I'm having trouble with the ratio (for lack of a better word) of product picture vs Add to Cart button and the Size dropdown box. If I increase the gallery width enough to make the Cart and Size boxes the way I want them, it makes my product picture WAY too big, but if I reduce the gallery width to make the picture smaller, it makes the buttons too big.
I've attached a picture that shows examples for each question. Any advice on how to fix these 2 issues would be greatly appreciated! Thank you

Hello,
I've had a Squarespace site for several years now (going on 5+ years). My site is a product-based ecommerce site with over 100 products available for purchase. 
Some of the issues I would like to have addressed during the webinar:
1.  I'm getting a large amount of Spam messages coming from my Newsletter form block/email sign up pages (around 20+ a day).  How can I minimize this?  Is there a way to add additional security controls to my newsletter sign up?  I'm grateful that Squarespace is blocking the Spam accounts (thank you!), but I would like to minimize the problem from the beginning. 
2.  Because I have a large product inventory on my website, it would be really helpful to be able to add a Search feature for shoppers.  I have more customers asking for this feature, and I know other ecommerce sites like Shopify offer this option.  Most platforms offer a way to search for ease of shopping and it seems strange that Squarespace doesn't have this feature, or if it does, I'm not certain how to add it to my site.
3.  I would also like to see better templates available for product-based sites.  It seems the options are limited for product-based sellers.  The template I'm using now has worked well, but I would like to freshen up my website's look.  Also...the fonts and font colors are a bit of a challenge to change on some pages. Are updates coming soon on this front?  
4. When a quantity becomes zero on a specific product, it defaults to "sold out".  This is not necessarily accurate for all of my products.  Is there a way we can choose to show something different than "sold out".
Thank you!  
 

Hello,
I have a travel tour company and I want customers to see a new destination on the Products page but labeled as "Coming Soon" and so there is no ability to book the tour yet until we officially launch. How can I put this label on the product? Right now, I have a quantity of 0 available and the label says "Sold Out" which isn't accurate. 

I have been using Squarespace for about 6 months, with some good sales, but not too many.  I have three questions, with attached screen shots numbered to match the questions.
1. I'd like to improve my Home page to get people interested in clicking through.  Any suggestions?
2. I'd like to know how to organize my drawings and paintings better so people don't give up scrolling through to get to something they really like.  There are a lot of items ATM, over 100, and it takes a long time to scroll, especially on a phone.
3. How do I allow people to get a large image for closer inspection when they click, or maybe scroll-over to magnify the image?
Thank you so much!!

Hello...
I would like to know if I can add a 'link' to another payment system other than those provided/associated with Squarespace.
The reason being is that I live in a jurisdiction that only Paypal will service and it puts a lot of my potential customers off, as they don't like/trust Paypal. I'm losing a lot of potential business because of this, so may have to consider leaving Squarespace....which I do not want to do, as I love your products! 
Here's hoping you can point me in the right direction 🙂 

Pagination! 🙏
I sell many products and it would be great to break up the display into multiple pages vs. one loooooong scroll. Seems like a very simple ask.
Please and thank you very much!
Dina

I'm interested in learning more about product photos and the best way to take/edit pictures. No matter what I try, the bottom part of my picture gets cut off in the thumbnail. Curious to know if this is normal or not. 

I would like to learn how to create specific lists for my e-mail campaigns for different products that have been purchased. For example, if someone purchases product A, I would like to create a specific e-mail campaign for product A purchasers that is different from product B purchasers.

Love to attend and learn!

How can purchaser select/buy multiple products that includes further selecting unique customizations for each product? 
Example -
1) they go to checkout,
2) they select 2 quantity (2 products)
3) they can select only 1 single color for this in the drop down, not 2 different colors in that step. (They're not going to choose the same color for both is the issue).
Thank you for your help!
Kristin - InMotion Albums

Looking forward to it! I would love to cover a couple of things 
1. Cross listing - specifically with etsy. Is there a way to cross list with etsy? If not, will there be in the future? 
2. I run a creative studio and often have clients hire me for custom work (branding projects, custom wedding packages, custom illustrations, etc.). I have not quite figured out the most streamline way to have this on my website and would love some thoughts on this. 
Thanks!

I set up a webpage on Squarespace with text and videos embedded from YouTube. The page looks fine on the laptop on various browsers, but when I go to my iPhone and view the page in Safari the videos are outsized and one has to scroll to the right to get a full view. Is there a way this can be corrected?

I have a public-facing storefront for my products, and I'd like to create a second wholesale storefront that's only accessible to certain (wholesale) customers after they enter their login credentials (username and password). Which Squarespace tools/functionalities would be best for this?

1.    Automated Email Notifications:
    •    “Can you guide me on where to find a log or list of automated email notifications sent from my Squarespace store?”
    •    “Is there a way to track communication with each customer through these automated systems?”
    2.    Product Organization and Display:
    •    “With a large inventory like mine, what’s the best approach to display products without overwhelming customers?”
    •    “Would categorizing products by seasons (like winter, summer, spring, fall) be effective for a greeting card store, or should I adopt a different strategy?”
    •    “How can I balance between showcasing new items each season and keeping bestsellers that are popular year-round?”
    •    “What are your suggestions for highlighting items that are typically seasonal but also have out-of-season appeal?”

I don’t have the option to duplicate a store. How can I duplicate a current store, so I don’t have to re-enter all the variations of print sizes and prices for my photographs. I’d like to have different stores in a drop-down menu showing the different types of fine art photography I offer, so shoppers can choose photographs by category/type, like macro, landscape, etc. 

I have two types of products: 1. register for courses, and 2. download pdfs & videos. 
For the courses, people have to provide much more information to register but for the downloads, all I need is name and email. Yet the checkout defaults to the detailed registration form. How can I change this?

CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
This leads me to one of my favorite questions from the Q&A:
Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
You’ll find the full Q&A below, but here is a quick recap:
1 - only use CSS for things you can’t change using the design menus built into Squarespace.
2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
4 - make notes for yourself in case you need to edit your code
5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
Most importantly, have fun with your Squarespace website.
ALL my best - Becca
Questions
How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!

How do you add drop down menus for products?  For example If I want a tab that says "bbq sauce" then under that tap I want a listed row of the different flavor bbq sauces.

Obviously, a huge part of having an online store is to have your customer find navigate your home page and find products easily.😭😭😭 I'm gutted to find to find out  that the Search Bar is virtually usesless and Squarespace has known for years and still has not resolved it. As soon as I started looking for solutions, starting with the Squarespace forums, I have only come to find out that everyone is having the same issue. Truly, a bummer. Hoping you can give some insight  to this issue.

@Susana_SQSP looking forward to this! I'd love to hear more about how we can cross-sell and upsell within the platform.

Can I use services and products for a nonprofit organizations store? I have a few nonprofit clients who want to sell physical items such as swag, services such as event tickets, and have donations as products to make it easier to funnel and track which products are being donated towards. The donation portal is (visibly) tiny, and severely lacking features. 
Thank you

Bounce rates are usually high on any website, meaning many folks visit one page and bounce away. This doesn't mean you have a bad site, not at all. Believe me, as a blogger and photographer I know. I noticed two things, the joyful spaces for living, I think it needs to be larger, much larger. Also, your link to services is not going to a page, it is going to the error and missing url message. 

Hey @kjdawson1,
While there isn't a search field in the 7.1 template store where you can type the template name to find it, there are two options you might want to consider:
A. Select "All Templates" under the "Browse By" menu at the top left of the page. Then you can use cmd+f (Mac) or ctrl+f (Windows) to type the name of the template and quickly find it.

B. Directly visit the template's demo site at https://templatename-demo.squarespace.com/. In this case, you'd be replacing the name of the template in the URL. 

Hi Michael_Kornmann, 
Squarespace supports JPG, PNG, and GIF image files. It is recommended using images that are between 1500 and 2500 pixels wide and under 500 KB. You should also keep overall page size under 5 MB for loading time optimization. For more image best practices, check out this help guide:
Formatting your images for display on the web