Start editing templates

Shoptet templates can only be customized using JavaScript and CSS. Styling can be adjusted using CSS based on the existing HTML structure, which varies depending on the selected template. The HTML structure of the template cannot be directly modified, so any changes to the layout or elements must be made through JavaScript manipulation of the DOM.

Developers can create custom visual changes to the e-shop in various ways, depending on whether they’re working on an addon or direct customization, and if the e-shop is Premium or Core:

	Local development (Boilerplate/Bender)	HTML codes in the e-shop administration	Automatic deployment (Addon Repository)	HTML codes via API	HTML codes via Addon
E-shop customization CORE	✅	✅	❌	❌	❌
E-shop customization PREMIUM	✅	✅	❌	✅	❌
Addons	✅	❌	✅	✅	✅

Inserting HTML codes in the e-shop administration

Shoptet enables the insertion of HTML codes directly in the e-shop administration. Article HTML codes describe how to work with them.

In the Templates → Editor of the appearance → HTML code, you will find four areas with HTML editors where you can insert custom code:

Header: for meta tags, CSS links and JavaScript files, the code is inserted before the closing </head> tag.
Footer: for JavaScript or links to JavaScript files, the code is inserted before the closing </body> tag.
Thank you page: for conversion tracking code, this code is applied only on the order confirmation page. We recommend using Google Tag Manager for order tracking.
Robots.txt: for directives to restrict search engine access to specific pages. The text is added at the end of the robots.txt file.

Local development

Template or visual add-on development can be done locally using Visual Addon Boilerplate and Shoptet Bender tools.

Visual Addon Boilerplate

The Visual Addon Boilerplate is a starter boilerplate designed to help developers quickly set up a local environment for visual addon development. It provides all the necessary files and configurations to get started right away.

Simply clone the repository from https://github.com/shoptet/create-visual-addon-boilerplate, install Node.js and npm, and then follow the instructions in README.md in the github repository. This tool streamlines the development process by providing a well-structured foundation for building addons. Shoptet Bender can also be part of the installation.

Shoptet Bender

The Shoptet Bender is a complementary tool that enables the development of visual changes without breaking the production e-shop. It acts as a proxy between your local development environment and a remote e-shop. You can display the live e-shop in your browser while injecting your local JavaScript and CSS files into it.

More detailed information on installation can be found in the repository https://github.com/shoptet/shoptet-bender/.

Code placement, review and deployment for add-ons

Partners-developers have three methods available for inserting code: using the Addon Repository, via the API endpoint /template-include, or by inserting HTML codes in the addon administration. Currently, we require the use of the Addon Repository for visual addons and templates, as it ensures automated deployment, version control, and faster code reviews.

Addon Repository

The Addon Repository provides more control over the codebase, allowing Shoptet to review changes and communicate more efficiently with partner developers. This ensures a more secure and efficient process for managing template development.

Some of the key features include:

integration of our GitHub Action workflow for one-click (or push-triggered) deployment
inviting collaborators to the repository
pull request workflow, now the merge is requested from Shoptet
securing the main branch - notification about hotfixes, unauthorized merge

For more detailed information, please visit the Addon Repository documentation.

Insertion code via the API endpoint `/template-include`

This is the option, allowing you to insert specific HTML codes for each individual e-shop. By using the /template-include API endpoint, developers can dynamically add custom HTML, CSS, and JavaScript based on the needs of each store. This flexibility allows for customized implementations across multiple e-shops. We encourage the use of JSON, which is consumed in the addon-included scripts.

For more information on how to use the API, refer to the API Documentation.

Example of code inserted via API endpoint:

<script type="text/javascript">
    var projectSpecificVariable = "I am variable specific to each e-shop.";
</script>
<strong>Hello world, I am text specific to each e-shop.</strong>

HTML codes inserted in the addon administration

Another option is to insert HTML codes directly through the administration of the addon. This is done via the "Codes" tab on the addon detail page. The inserted code is applied statically to all e-shops that have the addon installed, meaning it is the same across all stores using the addon.

However, this is an older method, and we no longer allow its use for template development. Instead, we recommend using the Addon Repository, which provides a more secure and efficient workflow.

When using this method, certain values can still be dynamically modified using placeholders. These placeholders are replaced with specific values from the e-shop environment when the page is rendered. Here are some examples of placeholders you can use:

#HOST# → For example fenix.myshopet.com
#PROJECT_ID# → For example 159834
#TEMPLATE# → For example Step, Classic, Techno
#LANGUAGE# → For example cs, sk

Example of code inserted via addon administration:

<script type="text/javascript">
    var demoPartner = {
        'host': '#HOST#',
        'projectId': #PROJECT_ID#,
        'template': '#TEMPLATE#',
        'lang': '#LANGUAGE#',
        'someSetting': projectSpecificVariable
    };
</script>
<script src="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/common.js" type="text/javascript"></script>
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#TEMPLATE#.css" rel="stylesheet" />
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#HOST#/style.css?v=1" rel="stylesheet" />

Order of the code inserted in the resulting page

The HTML codes are generated in the following order:

Addon codes inserted via the API endpoints /template-include. If there are more codes from several addons, the order of insertion cannot be relied upon.
Codes from the addon administration. If there are more HTML codes from several addons, then the order of insertion cannot be relied upon.
Codes from the e-shop administration

Within multiple HTML blocks of one type (e.g. multiple addons in a single e-shop), a fixed order is not guaranteed.

Inserting HTML codes in the e-shop administration​

Local development​

Visual Addon Boilerplate​

Shoptet Bender​

Code placement, review and deployment for add-ons​

Addon Repository​

Some of the key features include:​

Insertion code via the API endpoint /template-include​

Example of code inserted via API endpoint:​

HTML codes inserted in the addon administration​

Example of code inserted via addon administration:​

Order of the code inserted in the resulting page​