How Chris Schwartz-Edmisten Uses Code to Push What’s Possible on Squarespace
Location: Sacramento, California
Started using Squarespace: 2017
Title: Web Designer and CSS Expert
For Circle Platinum Partner and Community Leader Chris Schwartz-Edmisten, custom CSS isn't just about making a website look good, it's about unlocking a new level of efficiency and scalability. As a web designer and CSS expert, Chris has transformed his passion for code into a thriving business focused on advanced Squarespace customizations and empowering fellow professionals.
In this interview, he shares essential techniques to elevate client projects, including his go-to hack for dynamic layouts and a useful CSS method for universal styling.
What originally drew you to the web design industry? How has your business evolved since you started?
In high school, I became really interested in building websites and started learning HTML and CSS. It was so cool to me that you could write in a specific way and then get to see your creation on the computer. There were no barriers to entry; anyone could do it as long as they learned the languages, so I set out to become as fluent as possible.
I didn’t know the technical side of how to get my websites hosted online, so I would just build out full websites on my local computer to improve my skill. I didn’t have any intention of making a career out of it; I was just enjoying the process of learning.
Fast forward to about six years later, I discovered Squarespace when I needed to create a portfolio site for some architectural rendering work I did as a side hustle. Squarespace was the perfect fit for me because it was super easy to get the website online, and I still had the ability to customize the look of the site with CSS.
I had so much fun working on the website and customizing it that I could really see myself doing this for other people. Since I hated my full-time marketing job about as much as I loved designing my own website, I decided it was the right time to quit and become a web designer full time.
I started by building full websites for people, but since I didn’t have many clients, I decided to teach the CSS customizations I was doing on my site on my YouTube channel. Those customizations seemed to really resonate with people, and soon I was getting more work helping to customize Squarespace sites than doing full website builds. Since that was the thing I loved anyway, I leaned into it, and now my business is primarily customization.
In addition to designing websites and building plugins, you’ve created a range of workshops and courses for fellow web designers. What inspired you to step into education, and how has it changed your business?
Growing up, my summer job was coaching at my school’s basketball camp for lower grades, so I got lots of experience teaching by running drills with the younger kids. When I quit my marketing job, I took on a part-time teaching job at a local nonprofit until I could get more consistent client work. It is always something I have been passionate about, and I largely credit that to the teachers I had in school.
Starting my YouTube channel was the best decision I have ever made for my business. It combined my two passions—CSS and teaching—while illustrating my expertise, and it was the sole reason I started getting clients in the beginning. I would highly recommend teaching and content marketing to anyone starting their web design business.
What’s your favorite Squarespace hack?
My favorite Squarespace hack involves using the shape block to create overlapping content between sections. First, toggle off Fill Screen on the section to remove the bottom padding. Then make the shape block the same color as the following section and extend it full width. If you align it flush with the bottom of the section, there is no visual distinction between where the shape block ends and the next section begins. This allows you to layer blocks over the shape block, making it look like the content is overlapping the two sections. It is a really simple but versatile trick.
What’s your go-to line of code?
It is hard to choose one go-to line of code, but the one I use on every single site sets the footer copyright year to automatically update to the current year, so you don’t have to remember to go in and change it.
<!-- Auto Update Footer Year -->
<style>footer a[href="#[date]"]{background:none!important;text-decoration:none;pointer-events:none!important;color:currentColor!important;}</style>
<script>(function(){var footerYear=document.querySelector('footer a[href="#[date]"]');footerYear.innerHTML = "";footerYear.appendChild(document.createTextNode(new Date().getFullYear()));})();</script>
<!-- end Auto Update Footer Year -->
I have a blog post with more information about the code and how to apply it on my website.
What’s one custom CSS technique or snippet that you think every Squarespace designer should know?
Every Squarespace designer should learn attribute selectors in CSS. Anyone who has dabbled in CSS for Squarespace is probably familiar with block IDs for targeting elements, but when you write CSS this way, it is inefficient, and you have to write lots of CSS to make the changes you want to make. Plus, if you want certain styling to apply to a new block added to a page, you have to go into the CSS window and add the customization to that block as well.
Attribute selectors, however, allow you to write more universal CSS. Squarespace often adds attributes to elements based on settings in the editor. So instead of making changes block by block, you can set up universal styles that automatically apply to any section that has those attributes.
For example, in an auto layout simple list section, setting the space below section title value in the editor results in that attribute getting added to the section. Therefore, you can write CSS to customize the list section however you want, and any other section with that same space below section title value will also have the styling applied. This means if you duplicate the section or save it as a saved section, the CSS will automatically apply no matter what page you add it to.
No more writing CSS section by section or block by block—attribute selectors allow you to think about CSS in a more global sense. You are building components with CSS rather than repeatedly targeting individual elements.
This is a great way to write CSS for client handoffs or selling templates because the client doesn’t have to worry about ever going in to edit the CSS. It just automatically applies!
Your work is all about pushing what’s possible with Squarespace. What’s your top piece of advice for designers looking to elevate their Squarespace sites?
There are so many cool plugins to elevate your Squarespace site, but my advice would be to keep it simple and focus on the user experience. Choose one or two moments per page to add a cool scrolling animation or hover interaction, but don’t overdo it. Make sure everything on the page has a purpose. With too many bells and whistles you get a “woah,” but with the right amount, you get a “wow!”
What core design principles guide every website you create, and how do they help set your work apart?
I always try to keep my designs simple and easy to navigate. I am partial to boxes, grids, and split layouts for organizing content. If you view my site, you will see what I mean!
I think this is because I arrived at web design with a coding background, rather than a design background. Coding is all about rules and structure, and that gets reflected in my design style.
How do you make the most of Circle membership?
The extended site trial period is such a lifesaver—totally worth joining Circle just for that! I have a demo site to show off how my plugins function and renewing the trial every 7 days would be impossible. I also love the Circle Forum and the ability to connect with other Squarespace design professionals.
Key takeaways
The following are top insights from our interview with Chris:
Try embracing a niche within web design to differentiate your services and leverage your unique strengths
Use education and content creation to build authority and attract new clients
Adopt CSS attribute selectors to write more efficient, scalable styles for Squarespace projects
Prioritize user experience and simplicity over excessive design elements
Read more interviews with Chris on the Circle blog:
Want more?
Check out Squarespace Circle, Squarespace’s program for professional designers and web design agencies. Along with exclusive content, discounts, and other perks, Circle brings professionals together from across the globe to exchange advice while connecting with new clients and collaborators.
