Skip to main content
Scripts are the core of GoodCraft Script. Here’s how to create, edit, and manage them.

​
Creating a Script

1

Open your site

From the dashboard, click on your site to open the script manager.
2

Click New Script

Click the New Script button in the top right.
3

Choose the type

Select JavaScript or CSS depending on what you need.
4

Name your script

Give it a descriptive name like “Hero Animation” or “Custom Button Styles”.
5

Write your code

Use the editor to write your code. It will be syntax highlighted and validated.
6

Save

Click Save or press Cmd/Ctrl + S. Your script is now live.

​
Script Settings

Each script has settings you can configure:

​
Enable / Disable

Toggle scripts on or off without deleting them. Disabled scripts won’t load on your site.
Use this to temporarily turn off a script while debugging, or to prepare scripts before launch.

​
Scope

Choose where your script runs:
  • Global: Runs on every page of your site
  • Page-specific: Runs only on pages you select

​
Pages

When using page-specific scope, select which pages should load this script. You can use:
  • Exact paths: /about, /contact
  • Wildcards: /blog/* (all blog posts)
See Page Targeting for advanced patterns.

​
Component Selector

Only load the script when a specific element exists on the page: 
.testimonial-slider
[data-animation="fade"]
#pricing-calculator
This is great for scripts that power specific components.

​
Load Order

Control when your script loads:
  • Head: Loads early, before page content
  • Body Start: Loads at the beginning of the body
  • Body End: Loads after all content (default, recommended)
See Load Order for details.

​
Working with Scripts

​
The Editor

The code editor includes:
  • Syntax highlighting for JS and CSS
  • Auto-completion
  • Bracket matching
  • Multiple themes (change in Settings)
  • Keyboard shortcuts (Cmd/Ctrl + S to save)

​
Dependencies

If your script needs an external library (like GSAP or Swiper), add it as a dependency:
  1. Click the Dependencies button
  2. Enter the CDN URL
  3. Choose if it’s a script or stylesheet
  4. Save
Dependencies load before your script runs.

​
Save as Block

Found yourself copying this script to other sites? Click Save as Block to make it reusable across your team.

​
Best Practices

Use names like “Header Scroll Effect” or “Form Validation” instead of “Script 1” or “New Script”.
Keep scripts focused. Instead of one giant script, create separate scripts for separate features. This makes debugging easier.
Don’t load scripts globally if they only run on certain pages. This improves performance.
If a script powers a specific component, use a component selector. The script won’t load on pages without that component.
Not sure if you need a script? Disable it first. You can always re-enable it later.

​
Example Scripts

​
Simple: Console Log

console.log('GoodCraft Script loaded!');

​
Intermediate: Smooth Scroll

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

​
Advanced: Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('[data-animate]').forEach(el => {
  observer.observe(el);
});

​
Next Steps

Page Targeting

Control which pages load your scripts.

External Scripts

Add analytics, tracking, and libraries.

Load Order

Control when scripts execute.

Blocks

Make scripts reusable across sites.