Name	Name	Last commit message	Last commit date
parent directory ..
assets	assets
README.md	README.md
customer account panel change language english.html	customer account panel change language english.html
customer account panel change language japanese.html	customer account panel change language japanese.html
customer account panel change language spanish.html	customer account panel change language spanish.html
customer account panel change language template.html	customer account panel change language template.html
customer account panel change options.html	customer account panel change options.html
customer account panel change style.html	customer account panel change style.html
customer account panel change.html	customer account panel change.html

Customer Account Panel Change

License

Synopsis

Make changes to the Customer Account panel that can't be achieved through the Squarespace editor.

Version

0.9.4

SS Versions

v7.1 Fluid Engine Compatible

Not Applicable

Dependencies

Squarespace plan that supports JavaScript.
Set Website > Settings > Site Languages > Site Language and Region Format > Language / Region to one of the following langugages.*
- English (Australia)
- English (Canada)
- English (India)
- English (Ireland)
- English (New Zealand)
- English (South Africa)
- English (United Kingdom)
- English (United States)
- Japanese (Japan)
- Spanish (Mexico)

Install

Find the Language / Region setting of the site below. Add code from one of the language files to Website > Pages > Custom Code > Code Injection > FOOTER. Refer to Add code to code injection for details.

For example if the Language / Region setting is set to English (United States) you would install the code from the customer account panel change language english.html file.
- English (Australia)
- English (Canada)
- English (India)
- English (Ireland)
- English (New Zealand)
- English (South Africa)
- English (United Kingdom)
- English (United States)
  - customer account panel change language english.html
- Japanese (Japan)
  - customer account panel change language japanese.html
- Spanish (Mexico)
  - customer account panel change language spanish.html
Optional. If you want to style elements of the customer account panel add code from file customer account panel change style.html to Website > Pages > Custom Code > Code Injection > FOOTER. Refer to Add code to code injection for details. Read the code for any instructions within.
Optional. If you want to change options of the code add code from file customer account panel change options.html to Website > Pages > Custom Code > Code Injection > FOOTER. Refer to Add code to code injection for details. Read the code for any instructions within.
Add code from file customer account panel change.html to Website > Pages > Custom Code > Code Injection > FOOTER. Refer to Add code to code injection for details. Read the code for any instructions within.

Class Names

Squarespace includes virtually no semantic class names for the Customer Account panel element. This code attempts to add some useful classes.

All
- twc-capc
- twc-capc--account--addresses
- twc-capc--account--digital-products
- twc-capc--account--greeting
- twc-capc--account--greeting--name
- twc-capc--account--orders
- twc-capc--account--payment
- twc-capc--account--profile
- twc-capc--account-panel
- twc-capc--addresses--add-new-address
- twc-capc--addresses--address
- twc-capc--addresses--address--address-1
- twc-capc--addresses--address--delete-address
- twc-capc--addresses--address--name
- twc-capc--addresses--address--tag
- twc-capc--addresses--address-new-panel
- twc-capc--addresses--address-panel
- twc-capc--addresses-panel
- twc-capc--digital-products--account-settings
- twc-capc--digital-products--course
- twc-capc--digital-products--course--name
- twc-capc--digital-products--member-site
- twc-capc--digital-products--member-site--name
- twc-capc--digital-products--search
- twc-capc--digital-products--videos
- twc-capc--digital-products--videos--name
- twc-capc--digital-products-panel
- twc-capc--header
- twc-capc--header--back
- twc-capc--header--close
- twc-capc--header--title
- twc-capc--not-verified
- twc-capc--orders--order
- twc-capc--orders--order--date
- twc-capc--orders--order--items
- twc-capc--orders--order--number
- twc-capc--orders--order--payment-method
- twc-capc--orders--order--payment-method-panel
- twc-capc--orders--order--shipping
- twc-capc--orders--order--shipping--address
- twc-capc--orders--order--shipping--option
- twc-capc--orders--order--shipping-panel
- twc-capc--orders--order--status
- twc-capc--orders--order--summary
- twc-capc--orders--order--summary--shipping
- twc-capc--orders--order--summary--subtotal
- twc-capc--orders--order--summary--tax
- twc-capc--orders--order--summary--total
- twc-capc--orders--order-panel
- twc-capc--orders-panel
- twc-capc--payment--add-new-method
- twc-capc--payment--default
- twc-capc--payment--other
- twc-capc--payment--payment-method
- twc-capc--payment--payment-method--billing-address
- twc-capc--payment--payment-method--card-details
- twc-capc--payment--payment-method--delete-payment-method
- twc-capc--payment--payment-method-new--billing-address
- twc-capc--payment--payment-method-new--card-details
- twc-capc--payment--payment-method-new-panel
- twc-capc--payment--payment-method-panel
- twc-capc--payment-panel
- twc-capc--profile--email
- twc-capc--profile--email--confirm-new
- twc-capc--profile--email--current
- twc-capc--profile--email--new
- twc-capc--profile--email--not-verified
- twc-capc--profile--email--password
- twc-capc--profile--email--resend-verification
- twc-capc--profile--email-panel
- twc-capc--profile--name
- twc-capc--profile--name--first
- twc-capc--profile--name--last
- twc-capc--profile--password
- twc-capc--profile--password-update-panel
- twc-capc--profile--update-password
- twc-capc--profile--update-password--current
- twc-capc--profile--update-password--new
- twc-capc--profile-panel
By Panel
- Digital Products
  - twc-capc
  - twc-capc--digital-products-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--title
  - twc-capc--header--close
  - twc-capc--digital-products--search
  - twc-capc--digital-products--videos
  - twc-capc--digital-products--videos--name
  - twc-capc--digital-products--member-site
  - twc-capc--digital-products--member-site--name
  - twc-capc--digital-products--course
  - twc-capc--digital-products--course--name
  - twc-capc--digital-products--account-settings
- Account
  - twc-capc
  - twc-capc--account--addresses
  - twc-capc--account--digital-products
  - twc-capc--account--greeting
  - twc-capc--account--greeting--name
  - twc-capc--account--orders
  - twc-capc--account--payment
  - twc-capc--account--profile
  - twc-capc--account-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--not-verified
- Orders
  - twc-capc
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--not-verified
  - twc-capc--orders--order
  - twc-capc--orders--order--date
  - twc-capc--orders--order--number
  - twc-capc--orders-panel
- Orders > Order
  - twc-capc
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--orders--order--date
  - twc-capc--orders--order--items
  - twc-capc--orders--order--payment-method
  - twc-capc--orders--order--shipping
  - twc-capc--orders--order--status
  - twc-capc--orders--order--summary
  - twc-capc--orders--order--summary--shipping
  - twc-capc--orders--order--summary--subtotal
  - twc-capc--orders--order--summary--tax
  - twc-capc--orders--order--summary--total
  - twc-capc--orders--order-panel
- Orders > Order > Payment Method
  - twc-capc
  - twc-capc--orders--order--payment-method-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--title
  - twc-capc--header--close
- Orders > Order > Shipping Panel
  - twc-capc
  - twc-capc--orders--order--shipping-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--title
  - twc-capc--header--close
  - twc-capc--orders--order--shipping--option
  - twc-capc--orders--order--shipping--address
- Payment
  - twc-capc
  - twc-capc--payment-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--title
  - twc-capc--header--close
  - twc-capc--payment--default
  - twc-capc--payment--payment-method
  - twc-capc--payment--other
  - twc-capc--payment--add-new-method
- Payment > Payment Method
  - twc-capc
  - twc-capc--payment--payment-method-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--title
  - twc-capc--header--close
  - twc-capc--payment--payment-method--card-details
  - twc-capc--payment--payment-method--billing-address
  - twc-capc--payment--payment-method--delete-payment-method
- Payment > New Payment Method
  - twc-capc
  - twc-capc--payment--payment-method-new-panel
  - twc-capc--header
  - twc-capc--header--title
  - twc-capc--payment--payment-method-new--card-details
  - twc-capc--payment--payment-method-new--billing-address
- Addresses
  - twc-capc
  - twc-capc--addresses--add-new-address
  - twc-capc--addresses--address
  - twc-capc--addresses--address--address-1
  - twc-capc--addresses--address--name
  - twc-capc--addresses--address--tag
  - twc-capc--addresses-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--not-verified
- Addresses > Address
  - twc-capc
  - twc-capc--addresses--address-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--title
  - twc-capc--header--close
  - twc-capc--addresses--address--delete-address
- Addresses > New Address
  - twc-capc
  - twc-capc--addresses--address-new-panel
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--not-verified
- Profile
  - twc-capc
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--not-verified
  - twc-capc--profile--email
  - twc-capc--profile--name
  - twc-capc--profile--name--first
  - twc-capc--profile--name--last
  - twc-capc--profile--password
  - twc-capc--profile--update-password
  - twc-capc--profile-panel
- Profile > Email
  - twc-capc
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--profile--email--confirm-new
  - twc-capc--profile--email--current
  - twc-capc--profile--email--new
  - twc-capc--profile--email--not-verified
  - twc-capc--profile--email--password
  - twc-capc--profile--email--resend-verification
  - twc-capc--profile--email-panel
- Profile > Update Password
  - twc-capc
  - twc-capc--header
  - twc-capc--header--back
  - twc-capc--header--close
  - twc-capc--header--title
  - twc-capc--not-verified
  - twc-capc--profile--password-update-panel
  - twc-capc--profile--update-password--current
  - twc-capc--profile--update-password--new

If you use SS dynamically generated class names, the ones that look like a string of gibberish, your code will most likely break pretty quickly. My code is not immune to breakage but I think my method will break at a slower rate.

Callback Example

You can optionally create a callback function to further customize the processing of the customer account panel.

Following is example code.

<script>

  var twc = ( ( self ) => { // initialize twc module
  
    return self;
    
    } ) ( twc || { } );
    
  twc.capc = ( ( self ) => { // initialize twc capc sub-module
  
    return self;
    
    } ) ( twc.capc || { } );
    
  // initialize twc capc callbacks sub-module
  
  twc.capc.callbacks = ( ( self ) => {
  
    const callback = ( dcmnt, panelElement, panelType ) => {
    
      console.log ( dcmnt );
      
      console.log ( panelElement );
      
      console.log ( panelType );
      
      };
      
    self.push ( callback );
    
    return self;
    
    } ) ( twc.capc.callbacks || [ ] );
    
  </script>

Create Your Own Language Configuration JSON

This is for folks with a bit of web development experience. The code does not support all languages Squarespace supports. It supports the languages listed in the Dependencies section.*

You can add a language that Squarespace supports but the code doesn't. Add code from file customer account panel change language template.html to Website > Pages > Custom Code > Code Injection > FOOTER. Refer to Add code to code injection for details.

You need to go through the data structure replacing the English language values with the values Squarespace shows for those elements in the User Interface.

If you do create a new language, feel free to share it with me. I'll gladly consider incorporating it in future updates.

Make a Donation

Please consider making a donation.

Changes

2025-06-26
- added class names twc-capc--profile--email--not-verified and twc-capc--profile--email--resend-verification
- fixed email panel errors for unverified account
- bumped version to 0.9.4
2025-06-25
- fixed not verified element causing issue
- bumped version to 0.9.3
2025-06-24
- fixes for more elements that SS doesn't load in some contexts
- bumped version to 0.9.2
2025-06-23
- fixed bug where code would fail if the account panel didn't have a digital products section on accounts panel
- bumped version to 0.9.1
2025-05-25
- reworked code to break out the supported languages and settings into separate files so users don't have to load code for languages or settings they aren't using. also, adding the settings outside of the main code is easier for users to update the main code and not have to reapply their changes in the main code
- bumped version to 0.9.0
2025-05-21
- fixed twc-capc--orders--order--payment-method class not being set in some cases
- added support for Japanese language
- bumped version to 0.8.0
2025-05-07
- fixed classes being applied incorrectly when going from Account via the BACK button to Digital Products
- bumped version to 0.7.2
2025-05-07
- fixed broken callback code
- bumped version to 0.7.1
2025-05-05
- support many new classes and panel titles
- bumped version to 0.7.0
2024-12-10
- fix for apparent change that prevented user CSS from working
- bumped version to 0.6.1
2024-10-29
- add twc-capc-pages class
- bumped version to 0.6.0
2024-09-13
- rework code to use JavaScript Module Patterns for twc, twc.capc, and twc.capc.callbacks. makes the initialization code a bit more dense but removes the need for the user to dive into this code to set callbacks. they just need to add a callback per that codes instructions
- bumped version to 0.5.0
2024-07-08
- support multiple callbacks
- bumped version to 0.4.0
2024-06-24
- support digital products panel
- remove jQuery dependency
- bumped version to 0.3.0
2024-06-20
- workaround for code not running
- bumped version to 0.2.5
2023-08-16
- restore missing callback code functionality
- bumped version to 0.2.4
2023-08-16
- changed twc-capc-title-close class to twc-capc-header
- fix for code not running after apparent changes by Squarespace
- bumped version to 0.2.3
2023-05-06
- fix for code not running is some circumstances
- bumped version to 0.2.2
2023-04-27
- fix for code picking up CSS from other code similar to this code
- bumped version to 0.2.1
2023-04-22
- restructured the code to reduce some nesting
- bumped version to 0.2.0
2023-04-13
- initial version

FilesExpand file tree

Customer Account Panel Change

Directory actions

More options

Directory actions

More options

Latest commit

History

Customer Account Panel Change

Folders and files

parent directory

README.md

Customer Account Panel Change

License

Synopsis

Version

SS Versions

v7.1 Fluid Engine Compatible

Dependencies

Install

Class Names

Callback Example

Create Your Own Language Configuration JSON

Make a Donation

Changes