Online Store

Custom CSS & JavaScript for Designers

Learn how designers can use Custom CSS and Custom JavaScript in PlanetShopping Theme Settings to create distinctive storefront designs and interactions.

Purpose

Give your PlanetShopping store a design that feels distinctly yours. Custom CSS and Custom JavaScript let designers extend the storefront beyond the standard theme controls, building on the theme and sections already in place.

What You’ll Learn

Find the custom code fields in Theme Settings.
Choose CSS for presentation and JavaScript for interactive behaviour.
Work with code that applies across the online store.
Save, test and maintain your customisations.

Before You Begin

Open the correct store and confirm the theme you intend to customise. Keep a copy of the existing contents of both code fields before editing. If another designer has already added code, understand its purpose before replacing it.

Decide what you want to change and inspect the relevant storefront elements. Use the built-in settings for changes they already support; add custom code where you need more control.

Important

For experienced designers and developers: Custom CSS and JavaScript are optional tools for people with experience writing and troubleshooting code. Use these fields only if you have the relevant skills, or work with a qualified designer or developer. Incorrect code can affect your store’s appearance or functionality. You can build and customise your store using the standard theme settings without writing code.

Step 1 – Open Theme Settings

From the Merchant Panel, go to Online Store → Themes and select Customize for the theme you want to work on.

In Store Builder, select the gear icon near the top of the far-left toolbar, beneath the sections icon. This opens Theme Settings.

The panel includes Logo & favicon, Colors, Typography, Buttons and navigation, Custom CSS and Custom JavaScript.

Step 2 – Understand Where Your Code Applies

Both fields apply to the entire online store. The Custom CSS panel says “Add custom styles to your entire online store.” The Custom JavaScript panel says “Add custom JavaScript to your entire online store.”

The Page selector at the top of Store Builder changes the page you are viewing. Do not treat it as a way to restrict these code fields to that page. If a customisation is intended for one page or component, target it explicitly in your code.

Step 3 – Add Custom CSS

Expand Custom CSS to open the code field. Use this field for CSS rules that control the appearance of storefront elements.

Design possibilities include distinctive typography, responsive spacing, custom backgrounds and gradients, borders, button treatments, hover states and visual transitions. The selectors you use must match the actual elements in your store.

Make one focused change at a time. Use specific selectors so a rule intended for a single banner, button or section does not unintentionally change similar elements elsewhere. Check how your rules interact with the theme’s existing styles.

Step 4 – Add Custom JavaScript

Expand Custom JavaScript to open its code field. Use JavaScript when the change needs behaviour rather than styling alone—for example, responding to an interaction or coordinating a custom visual component.

Write code for the elements that actually exist in your storefront. Because the field applies across the store, check that a target element exists before acting on it, and avoid setting up the same interaction more than once.

Keep enhancements independent of essential shopping functions. Navigation, product selection, cart controls and forms should remain usable if your custom enhancement does not run.

Step 5 – Apply Your Changes

Select Update in Theme Settings after editing. Reopen the relevant field to confirm that your code has been retained.

Review the result in Store Builder and on the storefront. Do not assume that the editor preview alone proves the change works for customers.

Step 6 – Test Across Pages and Devices

Use the device preview controls at the top of Store Builder to check the available layouts. Also test in a normal browser and on a real phone.

Check the homepage, collection pages, product pages and cart, along with any other pages your code could affect. Test menus, links, product options, buttons and forms. Complete an end-to-end shopping test before relying on the change in a live store.

Use browser developer tools to inspect styling and JavaScript errors. Check keyboard navigation, visible focus, text readability and reduced-motion preferences when your design introduces animation.

Note

PlanetShopping Recommendation: Start with a clear design goal, add a small customisation and test it before expanding it. A distinctive storefront should remain easy to browse, fast to use and straightforward to maintain.

Tips & Best Practices

Keep an editable copy of your code outside Store Builder, with notes on what each customisation does.
Use readable formatting and comments so another designer can maintain your work.
Prefer CSS for visual changes that do not require JavaScript.
Avoid broad rules that hide or restyle every button, link or form control.
Keep animations purposeful and respect visitors who prefer reduced motion.
Review any external fonts, scripts or services before adding them; additional downloads can affect performance.
Do not put passwords, private API keys or other secrets in storefront code.
Re-test after changing a theme, reorganising sections or updating code that your customisation depends on.

Troubleshooting

My CSS is not changing the design.

Confirm that the change was retained after Update. Inspect the element to check that your selector matches it and that another CSS rule is not overriding your change.

My JavaScript does not appear to run.

Check the browser console for errors. Confirm that the elements your code expects exist on the page and are available when the code tries to use them. Test in the storefront as well as the editor.

Other pages changed unexpectedly.

These fields apply across the store. Narrow your CSS selectors or JavaScript conditions so the customisation affects only the intended elements or pages.

I need to undo a change.

Restore the previous working contents from your backup, select Update, and check the affected pages again. If you added a clearly separated block, remove that block without deleting unrelated customisations.

Frequently Asked Questions

Do I need code to customise my store?

No. Store Builder includes sections and standard theme settings. The custom code fields provide additional control for designers and developers who need it.

Does the code apply only to the page selected in Store Builder?

No. Both fields are labelled as applying to the entire online store. Your code must explicitly target a particular page or component when that is your intention.

What is the difference between the two fields?

CSS controls presentation, such as typography, spacing, colours and visual states. JavaScript adds programmed behaviour and interactions. Use the appropriate field for each type of code.

Can I create a design that looks different from the starting theme?

Yes. Custom styling and interactions can help you create a distinctive storefront around your brand and content. The result depends on your theme’s structure, the code you write and how thoroughly you test it.

Can I paste code from another website?

Do not assume another site’s code will work unchanged. It may depend on different markup, selectors, assets or libraries. Use code and assets you have permission to use, understand what they do, and adapt them to your store.

Can I use these fields to change payment processing or server-side features?

These fields are for storefront CSS and JavaScript. Do not treat them as access to server-side code or a way to bypass the platform’s payment, account or checkout rules.

Next Step

Explore Customise Your Store to learn more about section controls, layout options and theme settings.