Storefront appearance and custom CSS

1. What these settings change

The customer pages are the pages under /apps/tasdeek on your store: registration, the authenticity check, claims, My products, ownership transfer and the product passport.

• Accent color and corner radius: the customer pages and customer emails.
• Logo: customer emails and the product passport page.
• Credit line: the customer pages, the product passport page and customer emails.
• Custom CSS: the customer pages and the product passport page, not emails.

The theme blocks, Register your product and Verify this product, are not changed by these settings.

Below Starter, these fields are disabled and show an upgrade link. Anything you saved before is kept and applies again after an upgrade. Reset to default, Remove logo and Remove custom CSS work on every plan.

2. Accent color and corners

1. Open Settings and go to Storefront appearance.
2. Enter the Accent color as # and six hex digits, for example #1A1A1A. It colors buttons, selected options, focus rings and progress.
3. Enter the Corner radius, from 0 for square corners up to 24 px. Buttons and fields use two thirds of it.
4. Click Save.

Text on the accent color is white or near-black, whichever reads better. Tasdeek refuses a color when neither reaches a contrast of 4.5:1 on it, or when the color is too light to stand out on a white page (below 3:1). Success, warning and error colors do not change.

Reset to default goes back to #1A1A1A with 12 px corners.

3. Logo

1. Open Settings and go to Logo.
2. Choose a PNG, JPEG or WebP file of up to 512 KB, from 32 x 32 to 2000 x 2000 pixels. SVG is not accepted.
3. Click Upload logo.

The logo appears at the top of customer emails and on the product passport page, at most 48 pixels high. The other customer pages show your theme's header instead. Without a logo, emails show your brand name as text. Some email apps do not show WebP, so PNG is the safest choice.

4. Credit line and sender name

A small line, "Powered by Tasdeek", with a link to tasdeek.com, sits at the bottom of the customer pages, the product passport page and customer emails. On the Free plan it is always shown. From Starter you can turn it off:

1. Open Settings and go to Credit line and sender name.
2. Untick Show Powered by Tasdeek on customer pages and emails.
3. Click Save.

In the same section, Sender name for emails sets the name customers see as the sender of their emails. The sending address does not change. The sender name works on every plan.

5. Add custom CSS

1. Open Settings, go to Storefront appearance and find Custom CSS.
2. Type or paste your CSS, up to 10,000 characters.
3. Click Save custom CSS.

If something is not allowed, nothing is saved and each problem is listed with its line number. Fix them and save again. Remove custom CSS clears it.

Your rules come after Tasdeek's own styles, so a rule with the same selector overrides Tasdeek's. Tasdeek places every selector inside .ul-page, the element that holds each customer page, so your CSS cannot reach the rest of your store. You write .ul-card; the page uses .ul-page .ul-card.

Tasdeek checks the saved CSS again each time a page is shown. If it no longer passes, the pages leave it out and Settings tells you.

6. What custom CSS may contain

Allowed

• Selectors made of element names such as h1, p or button, Tasdeek's classes that start with ul-, attribute selectors such as [type="email"], states such as :hover, :focus-visible, :disabled or :first-child, :not() with one simple selector, and ::before, ::after, ::placeholder and ::marker.
• @media blocks, for example for small screens.
• Properties for colors, borders, corners, spacing, text, sizes, display, flex and grid, shadows, opacity, transitions and the cursor. background takes a color only.
• Functions such as calc(), rgb() and color-mix(), and var() with Tasdeek's variables, which start with --ul-, for example var(--ul-accent).
• !important.

Not allowed

• @import, @font-face and every other at-rule except @media.
• url(), so no images, files or web fonts. Use a font your theme already loads.
• IDs such as #main, and classes that do not start with ul-, such as your theme's own.
• html, body, :root and :has().
• position: fixed, position: sticky and a z-index above 10.
• expression(), javascript: and data:, the characters < and >, and Liquid tags such as {{ }} and {% %}.

7. Class names

Every class on the customer pages starts with ul-. Parts of a component add a word after a single hyphen, such as .ul-product-name, and variants add two hyphens, such as .ul-btn--primary. The ones you are most likely to style:

• .ul-card: the panels that hold the page content.
• .ul-btn, with .ul-btn--primary and .ul-btn--secondary: buttons.
• .ul-h1 and .ul-h2: the page title and section headings.
• .ul-field, .ul-label, .ul-input and .ul-hint: form fields.
• .ul-banner, with .ul-banner--success, .ul-banner--warning and .ul-banner--danger: messages.
• .ul-pill: small status labels.
• .ul-product, .ul-product-name and .ul-serial: the product and its serial number.
• .ul-credit: the Powered by Tasdeek line.

To find the class of any element, open a customer page in your browser and use its inspect tool.

8. Examples

Round primary buttons with capital letters:

.ul-btn--primary {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Warmer panels without a shadow:

.ul-card {
  background: #FAF7F2;
  border-color: #E4DED3;
  box-shadow: none;
}

A larger page title, and a smaller one on phones:

.ul-h1 {
  font-size: 28px;
}
@media (max-width: 600px) {
  .ul-h1 {
    font-size: 22px;
  }
}