Shoptet customisation without touching the backend

What Shoptet customisation is and when it makes sense

Shoptet customisation is changing the look or behaviour of a store with custom code (CSS for appearance, JavaScript for behaviour) layered on top of a Shoptet template.

It makes sense once you have used up the options in the Template Designer (Návrhář šablon) and still want something it does not offer: a different product page layout, custom labels, a reworked mobile header or a notice shown in one category. Shoptet allows this, but according to Shoptet’s help (in Czech), its technical support does not help with individual HTML, CSS and JS changes and points owners to partner coders.

Who it suits and who it does not

It suits you if:

• you run a store on Shoptet and want it to stand out by more than colours and a logo,
• you need small behaviour changes (show, hide or move an element, add text for a category),
• you want to see a change on your own store before customers do.

It does not suit you if:

• you need different order, pricing or stock logic. That runs on Shoptet’s servers and CSS or JavaScript cannot change it.
• you want a store built from scratch. webrocks does not do that; the work covers existing stores only.
• you want a fully custom design with no Shoptet code at all. That is a Shoptet Premium feature, see below.

What CSS and JavaScript can and cannot change

CSS and JavaScript run in the customer’s browser on the page Shoptet generates. They change how it looks and behaves, not which data Shoptet sends into it.

What you can change

• Appearance: colours, fonts, spacing, the layout of listings and product pages, the mobile view, the cart and forms.
• On-page content: extra text, labels or blocks, hiding or moving elements the template cannot hide on its own.
• Behaviour: click handlers, toggles, notices in the cart. Current templates include Shoptet Developers Tools, a set of functions with custom events for this.
• Form checks: according to Shoptet’s documentation, you can add your own check before an order, newsletter or enquiry form is submitted (shoptet.custom.postSuccessfulValidation).

What you cannot change

• price, shipping and discount calculations, stock levels, order processing and data in the administration,
• the data structure Shoptet sends into the page (which product details the page has in the first place),
• a fully custom template without Shoptet’s CSS and JavaScript, and private API access. According to Shoptet, both are part of Shoptet Premium, not the standard plans.

Where the code goes

According to Shoptet’s help, custom code is added in the administration under Appearance and content → Editor → HTML codes (in the Czech interface: Vzhled a obsah → Editor → HTML kód). The header section is inserted before </head> (CSS, meta tags, scripts), the footer section before </body> (scripts), and the completed order section only on the thank you page. Each section has a limit of 8,192 characters. Longer code is uploaded as a file via (S)FTP to /user/documents/ and the section only links to it, as described in Shoptet’s notes on things to be careful about.

The other route is the HTML editor in the Template Designer. It is free on all plans and saves changes to a draft that only the administrator sees; customers see them after you click publish. The Template Designer cannot be used on mobile yet.

How the work goes

1. Brief. Agree what changes, on which page types and how it looks on mobile.
2. Template check. Which template the store uses and whether existing custom code could clash.
3. Code. Write CSS and JavaScript that rely on stable parts of the template and on functions Shoptet marks as stable.
4. Live preview link. You see the change on your own store before customers do and can comment on it.
5. Go live and check. Once approved, the code goes live and the changed pages are checked on desktop and mobile.

What you get

• CSS and JavaScript added to your store, with no backend changes,
• a live preview link before anything goes live,
• an overview of which pages and elements the change affects and what to check when Shoptet announces a template change,
• for longer code, a file in /user/documents/ instead of code squeezed into the section limit.

What to watch out for

Template updates can break customisations

Shoptet updates its templates regularly and, in its Template Designer help, states for the HTML editor that inserted code may not be compatible with future changes to the system. The main risk is that the HTML your changes rely on changes, and they stop fitting. One example: Shoptet announced for 30 September 2026 a change to the labels of variants and colour filters in all current generation templates to improve accessibility and warned that this may break selectors in custom CSS and JS.

You can reduce the risk, not remove it:

• write selectors that depend as little as possible on exact HTML nesting,
• in JavaScript, use shoptet.MODULE_NAME. functions, whose changes Shoptet announces in advance according to its documentation,
• follow change announcements on Shoptet’s developer site,
• use deferred template updates. A customised store can postpone a critical change and try it in a preview. After the deadline the update is applied automatically, so this buys time to adjust, not a permanent exception.

Parts of the page load later

Some parts of a Shoptet page, such as the cart, load via AJAX, without reloading the whole page. Code that runs only once on page load will not reach the new content. Shoptet therefore fires the ShoptetDOMContentLoaded event every time part of the page reloads, together with a more specific event such as ShoptetDOMCartContentLoaded after the cart reloads, as the Shoptet Developers Tools documentation describes. Cart customisations should listen for these.

Tracking and speed

Tracking code often ends up in the HTML codes too. In its Google Analytics help, Shoptet warns that running the same tracking several ways at once (its integration, the HTML editor, Google Tag Manager) causes conflicts and errors. Tracking is therefore a separate job, see GA4 ecommerce tracking.

Every added script loads for every customer; if the store has slowed down, a website speed audit helps. If you are not sure what to change, start with a UX audit.

Customisation or Shoptet Premium

Shoptet Premium is not a customisation service but a higher Shoptet plan. According to Shoptet’s documentation, it adds private data access through the API and a blank template mode, where the store does not load Shoptet’s CSS and JavaScript and the whole design is custom. Standard CSS and JavaScript customisation does not need Premium.

webrocks works on the browser side only. Server changes and changes to Shoptet data are not part of the service; they are a matter for Shoptet and its plans.

How much Shoptet customisation costs

The indicative hourly rate in the price list is from 500 CZK/hr. The price depends on scope and complexity, specifically:

• how many page types the change touches (just the product page, or also categories and the cart),
• whether CSS is enough or JavaScript is needed that reacts to content loaded later,
• how the change should behave on mobile,
• whether older custom code in the store needs reviewing or tidying first.

If your store runs on WordPress, WooCommerce customisation works in a similar way. Describe what you want to change via the contact form and you will get a reply within 24 hours.

Frequently asked questions

Can I have a custom design on Shoptet?

On standard plans, yes, but always as a customisation of an existing template with CSS and JavaScript. A design with no Shoptet code at all is only possible in blank template mode on Shoptet Premium.

Will a template update overwrite customisations?

The main risk is elsewhere: an update can change the HTML your customisations target, and they stop working. Deferred updates give you time to check them, but after the deadline the update is applied automatically.

How is custom code added to Shoptet?

Under Appearance and content → Editor → HTML codes, in the header and footer sections, or through the HTML editor in the Template Designer. Code over 8,192 characters is uploaded as a file via (S)FTP and linked from the section, as Shoptet’s help describes.

What happens to customisations if I switch templates?

According to Shoptet’s help on store templates, your store data stays and only the look changes. Custom code is written for one template’s HTML, so it needs reviewing and adjusting after a switch.

Does webrocks also build new stores from scratch?

No. webrocks customises existing stores on Shoptet and WooCommerce only.