Skip to content
Dermaself Dermaself

Customization

Open Dermaself → Customization. This is where you set the look of the Skin Test widget, of the storefront button that opens it, and the wording shown to shoppers. Changes apply to the live widget as soon as you save.

The page has three tabs: Theme, Storefront CTA, Translations. Each tab saves on its own with Save changes: if you switch tab with unsaved changes, the plugin warns you. Reset to defaults puts the tab back to its defaults.

On the right there is a Live preview, with Desktop preview and Mobile preview.

Theme

  • Colours — Primary / accent, Header background, Body background, Card background, Text, Muted text, Footer muted text, Borders. Hex values (for example #6E4AE9).
  • Typography & shape — Font (Space Grotesk by default, or Inter, Roboto, Montserrat, Poppins, and others), Corner radius, Logo size (normal or large).
  • Header logo — Upload / choose logo from the media library. PNG, JPG, or WebP, 512 KB max. SVG is not accepted: some email clients, such as Outlook, do not render it.

Storefront CTA

This is the button that opens the Skin Test, wherever you put it from Publish.

  • Button text — a Default text (fallback) and, if you want, Per-language text. The button shows the text for the site language.
  • Appearance — Gradient start, Gradient end, Text colour, font, Font size, Vertical and Horizontal padding, corner radius.
  • Mobile CTA — on mobile only, choose Full text button or Icon-only button, and the Mobile icon size (for example 56px).

The block, the Elementor widget, and the shortcode all take their styling from here. The text can be overridden case by case (see Publish).

Translations

This is where you rewrite the widget’s wording, language by language.

  1. Choose the Language.
  2. Fill in the fields you want to change: step titles and options of your quiz, Next button, Previous button, Submit button, Skip button, Required field message, Invalid email message, Progress label, Loading message, Retake test button, View results button, and the privacy consent texts.
  3. Save changes.

Leave a field blank to use the built-in default for that language. In the Progress label, use {current} and {total} as placeholders.

If the preview warns that labels are missing for a language, those texts will show in English or with defaults in the store. See Languages.

Dermaself branding

On the Free and Start plans the widget shows the Dermaself branding. On Growth it is removed. See Plans and usage.