This feature is available on all Goodshuffle Pro Plans.
Overview
You can rename the Accessories and Alternate Items headings on your Goodshuffle Pro gallery to any wording you want, such as "Available Sizes" or "Pairs Well With." It takes one short script added to your Squarespace site and about five minutes.
This is useful when the default labels don't match how you use those sections. For example, if you link the different sizes of a linen as alternate items, "Available Sizes" tells your customers exactly what they're looking at.
Before You Start
Check your Squarespace plan. Adding scripts requires the Core plan or higher. If you're on the Personal plan, the Code Injection option won't be available.
Decide what each heading should say. The new label applies to every item in your gallery, not just one. If some items use Accessories for true accessories (napkins, runners, chargers) and others use it for sizes, pick wording that fits both, or leave that heading as is.
Avoid duplicate headings. If an item has both Accessories and Alternate Items, give each its own label so customers don't see two sections with the same name.
A note on support: This is a custom code change to your Squarespace site, so it's outside what the Goodshuffle Pro support team can troubleshoot. If anything looks off, removing the script returns your headings to the defaults right away.
Step 1: Copy and Customize the Script
Copy the script below. Then change the wording on the right side of each line to the label you want. Keep the quotation marks and the comma at the end of the first line.
<script>
(function () {
const LABELS = {
'Accessories': 'Available Sizes',
'Alternate Items': 'Other Sizes'
}; function relabel() {
document.querySelectorAll('.gspro-c-item-detail__related h3').forEach(function (h) {
const text = h.textContent.trim();
if (LABELS[text]) h.textContent = LABELS[text];
});
} new MutationObserver(relabel).observe(document.body, { childList: true, subtree: true });
relabel();
})();
</script>
Only want to change one heading? Delete the line for the other one, and remove the comma from the line that's left. For example:
const LABELS = {
'Alternate Items': 'Available Sizes'
};
The left side must match the current heading exactly, including capitalization: Accessories or Alternate Items.
Step 2: Add the Script to Squarespace
Log in to Squarespace and open your site.
Click Website in the left menu, scroll to the bottom, and click Website Tools, then Custom Code.
On some older layouts, this is under Settings > Advanced.
Click Code Injection.
Paste the full script, including the
<script>and</script>lines, into the Footer box.Click Save.
If you already have other code in the Footer box, paste the script below it. Don't replace what's there.
Only want the change on one page? Instead of the steps above, go to Pages, hover over the gallery page, click the gear icon, open Advanced, and paste the script into Page Header Code Injection.
Step 3: Check Your Live Site
Open your live website in a new browser tab. You may need to log out of Squarespace or use a private window to see what customers see.
Refresh the page and go to your gallery.
Click into an item that has accessories or alternate items and confirm the heading shows your new wording.
Click through a few items from different categories to make sure the new label makes sense everywhere it appears.
Optional: Make the Heading Smaller
If the heading looks too large, add this to Website > Website Tools > Custom Code > Custom CSS (or Design > Custom CSS on older layouts):
gspro-item-detail .gspro-c-item-detail__related h3 {
font-size: 1.5rem !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
}
Raise or lower 1.5rem until it looks right. 1rem is about 16 pixels, so 1.5rem is about 24 pixels. This only affects the headings in the related items section, not other headings on your site.
Troubleshooting
The heading didn't change.
Make sure the left side of the label line matches the current heading exactly, including capital letters.
Check that you pasted the whole script, including the opening
<script>and closing</script>lines.Confirm you clicked Save in Code Injection, then refresh your live site. Code Injection doesn't always show in the Squarespace editor preview.
I don't see Code Injection.
Your site is likely on the Squarespace Personal plan, which doesn't allow custom scripts. You'll need to upgrade to Core or higher to use this.
Two sections now have the same name.
Give Accessories and Alternate Items different labels in the script, such as "Available Sizes" and "Other Sizes."
How do I undo this?
Delete the script from Code Injection and click Save. Your headings will go back to the defaults right away.
Need Additional Support? Click the blue chat bubble in the bottom corner of your screen to message our support team—we're happy to help!