Learn how generative AI tools can help you customize your NationBuilder website faster—freeing up time to focus on organizing and engaging your community.

Customize your site with GenAI

Generative AI tools like ChatGPT, Claude, and Gemini are becoming more powerful by the day. One domain in which their capabilities have improved greatly is viewing and suggesting edits to existing website code.

NationBuilder offers robust and customizable free and paid website themes. However, you may get to the point where you’d like to change something, and if your knowledge of coding is limited, it’s hard to know where to start.

If you have a big redesign in mind, you can hire a professional Architect to build you a custom solution. For smaller tweaks, however, generative AI can be your best friend.

Choosing an AI tool

The first step is deciding which genAI tool to use. There are some subtle and not-so-subtle differences. NationBuilder sites are built on Liquid (a templating language), HTML, CSS, and a bit of JavaScript. Let’s look at the pros and cons of each generative AI option in this context.

First, let’s eliminate a few options that are not well-suited or require too much manual labor. Gemini and Notion are more helpful in planning or UI ideation than technical accuracy in your website code. GitHub Copilot is great for auto-suggesting code snippets in a live HTML editor, but that’s a little advanced for this resource, and it’s not a conversational tool. 

That leaves OpenAI’s ChatGPT and Anthropic’s Claude as the top contenders for the quality of their suggestions and shallow learning curve. They’re also great at helping you figure out errors if something goes wrong.

ChatGPT is great for customizing NationBuilder themes, offering clear, editable code and good support for HTML, CSS, and JavaScript. Claude is ideal for simplifying large files and layouts, with clean, readable output. Both are beginner-friendly and helpful for low to medium skill levels.

Remember, you can always go back and forth if one isn’t working. Once you choose your tool, you can start editing your site using GenAI.

Before you start

Before you get into it, clone your existing site by navigating to Website > New website. Then, at the bottom of the screen, select “Clone from a shared site.” This ensures that if you make any changes to the theme files, there will be a backup. You can also copy and paste the individual theme or page source code you’re editing into a blank document in case you ever need to revert.

If you’re on a stock theme

If your site is currently on a stock theme like Raise or Momentum, you must first duplicate the theme to make edits.

Go to Website > Theme.

Click New custom theme.

Choose Start with a stock theme and select [your current theme] (Raise, Momentum, etc).

Name your theme and click Create theme.

Once that’s done, you can begin editing.

Get started with these easy prompts

Change the logo size in your header

To change the size of the logo in your site’s header, go the chatbot and enter the following prompt:

I’m using [theme name] on NationBuilder and I’d like to change my logo size across the site.

You may choose to copy and paste the code of one of your pages to give GPT or Claude context. They will want you to make edits to the theme files, which can be found at Websites > Theme > Current custom theme.

Follow the instructions, and remember to back up any code you change.

Claude and GPT are equally proficient here, though Claude’s output is a little easier on the eyes.

Change the default font on your site

To change the default font, first choose one from Google Fonts. Keep it open in another tab, as you’ll need some information from the page.

Then, enter the following prompt into GPT or Claude: 

I’m using [theme name] on NationBuilder and I’d like to change my font across the site.

You’ll be editing theme.scss or _base.scss within Website > Theme > Current custom theme.

You may also want to tell the AI you’d like to edit the button font in buttons.scss.

Change the default colors on your site

To change the default colors, ask the following prompt into your AI tool:

I'd like to change the default colors on my [theme name] site on NationBuilder. 

You’ll be editing the files within Website > Theme > Current custom theme > Templates. Follow the instructions, and if you run into any issues, you can copy and paste the entire file’s code into GPT or Claude and ask to clarify what might be wrong.

You’ll likely be editing theme.scss, but you may also consider editing _buttons.scss for changing button colors and _forms.scss for form element colors.

Arranging photos on a page

To change the arrangement of images on a page, ask the genAI you’re using:

How can this code be modified to allow 3 photos to sit next to each other, equally spaced on a page?

This prompt allows you to use a grid or flexbox layout to change the arrangement of images on your page.

Embed a social media post

What HTML code do I need to embed a public Instagram post into [theme name] on NationBuilder?

This prompt will allow you to embed an Instagram post onto a page of your website. You may change the social media platform, though some may be easier to embed than others.

Add social media links to footer

I’d like to add social media links to my [theme name] website footer on NationBuilder including Instagram, Facebook, and Tiktok. 

Replace the social media providers with the ones you’d like to highlight on your site. The file you’ll likely be editing is _footer.html or it could be inside the layouts folder depending on the structure of your theme.

You may need to adjust the sizing of your social media icons, which GPT or Claude can help with. Copy/pasting the code of the entire footer should help give the AI context and amend its answer with the best possible solution.

Generative AI is advancing rapidly across every field, with website customization being one of the fastest. With free tools that lower the barrier to entry, anyone can take ownership of their design regardless of their past coding experience. It’s the easiest it’s ever been to create a site that authentically reflects your campaign, community, and mission.