Pereiti prie turinio

Technical specification

Valeryd design system

Foundations rendered live from the production tokens and color schemes. Components are added here from Fas 3 onward.

Color schemes

Each card applies its real .color-{id} class, so background, text and button roles are the live composed values.

scheme-paper

The quick brown fox jumps

scheme-white

The quick brown fox jumps

scheme-navy

The quick brown fox jumps

scheme-inverse

The quick brown fox jumps

Brand palette

--navy
--navy-deep
--navy-darker
--navy-soft
--navy-line
--green
--green-deep
--green-soft
--amber
--amber-soft
--orange
--ink
--paper
--line
--muted
--red
--red-soft
--white

Typography

--fs-display Robust parts for every trailer
--fs-h1 Robust parts for every trailer
--fs-h2 Robust parts for every trailer
--fs-h3 Robust parts for every trailer
--fs-lg Robust parts for every trailer
--fs-body Robust parts for every trailer
--fs-sm Robust parts for every trailer
--fs-eyebrow Robust parts for every trailer

Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibility data.

VAL-204-118 · Valeryd supplies precision-made trailer parts with tr...

RegularMediumSemiboldBoldBlack

Spacing scale

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12

Radii

--radius-sm
--radius
--radius-lg
--radius-pill

Motion

Animate transform and opacity only; honour prefers-reduced-motion.

Icons

check
menu
close
plus
minus
chevron-down
chevron-right
arrow-right
search
cart
user
alert
heart
map-pin
truck
clock
shield
store
star
medal
play
phone
mail
eye
list-plus
list-check
trash
facebook
instagram
youtube
linkedin
tiktok
google
trailer-left
trailer-right

Button

variant · statedefaulthoverdisabledloading
primary
secondary
ghost

on .color-scheme-navy

Stock states

Sandėlyje

Sandėlyje Sandėlyje

Gaminama pagal užsakymą

Gaminama pagal užsakymą · pristatymo trukmė apie 7 d. Gaminama pagal užsakymą

Galima užsakyti

Galima užsakyti Galima užsakyti

Nėra sandėlyje

Nėra sandėlyje Nėra sandėlyje
Gaminama pagal užsakymą Gaminama pagal užsakymą · pristatoma maždaug per 1 dieną

In order: in stock · made to order (a gas spring at zero) · available to order (anything else that sells on at zero) · out of stock. Last row: made to order without the lead time, and with one day.

Badge

In stock Fits your trailer Low stock Out of stock New

Price

With the theme setting "Show prices excl. VAT" on, under every price, small, the same price excl. VAT: the current price divided by the VAT the market's prices include, which snippets/vat-rate.liquid looks up by country. The first two follow the setting and your market's rate. Where the setting is off, the prices include no VAT, or the country has no rate, the line is left out, as in the third. The fourth passes a rate of 25 % and shows the line whatever the setting.

€149,00 Akcijos kaina€149,00Įprasta kaina €199,00 €149,00 €149,00€119,20 be PVM

B2B

A buyer logged in as a contact of a B2B company (snippets/b2b-buyer.liquid) sees the catalog price, which is the net: VAT is added at checkout. Every state below is rendered with buyer: 'b2b', as no B2B login reaches this page. Price: the net alone; the net with the recommended retail price incl. VAT (the catalog's compare-at price, never struck); a product whose price varies, with "from"; and the three table parts, part: 'net', part: 'retail' and part: 'discount' (the dealer's discount against the RRP excl. VAT).

€59,00 be PVM €59,00 be PVM Rek. mažmeninė kaina €93,75 su PVM

No product in the store's first 50 has a varying price, so the "from" state has nothing to show.

€59,00 be PVM €93,75 Nuolaida 24%

The B2B quantity stepper on the product page, following the variant's quantity rule: step 5, minimum 5, maximum 100.

Volume pricing (snippets/volume-pricing.liquid): the variant's price breaks under the buy-box price, from the minimum quantity at the variant's own price; folded into a disclosure on a cart line (compact); and nothing at all for a variant without breaks, after which the next line follows directly.

Kainos pagal kiekį
Kiekis Kaina už vnt.
1+ €59,00 be PVM
10+ €54,00 be PVM
50+ €49,00 be PVM
100+ €45,00 be PVM
Kainos pagal kiekį: nuo €45,00 be PVM už vnt.
Kainos pagal kiekį
Kiekis Kaina už vnt.
1+ €59,00 be PVM
10+ €54,00 be PVM
50+ €49,00 be PVM
100+ €45,00 be PVM
(no breaks: nothing rendered)

A B2B cart line: net prices with their label, a stepper in steps of 10 up to 200, and the price breaks folded under the unit price.

Axle shock absorber, 900 kg

Prekės nr.: VAL-204-118

€54,00 be PVM
Kainos pagal kiekį: nuo €45,00 be PVM už vnt.
Kainos pagal kiekį
Kiekis Kaina už vnt.
1+ €59,00 be PVM
10+ €54,00 be PVM
50+ €49,00 be PVM
100+ €45,00 be PVM
€540,00 be PVM

B2B header

Who a B2B buyer is buying for (snippets/b2b-account-bar.liquid), rendered from explicit params as no B2B login reaches this page. In the utility bar: the company, the location and a link to the quick-order page; without a quick-order page there is no link. Desktop only, like the rest of the utility bar.

utility bar, with a quick-order page

Example Dealer ABPerkama: Main warehouseGreitas užsakymasPirkinių sąrašas

utility bar, no quick-order page

Example Dealer ABPerkama: Main warehousePirkinių sąrašas

The person link in the main bar. A B2C visitor gets nothing from the snippet, so the header keeps its dealer-portal login. A B2B buyer gets the account page, named by the company; a long name is cut with an ellipsis and stays whole in the link's label. Below 1280px only the icon shows, so the main bar keeps room for the switch beside it.

B2C (nothing rendered: the header keeps its own login link)

B2B

Paslepia grynąsias kainas, kiekio nuolaidas ir tikslias atsargas, kol klientas žiūri į ekraną
Example Dealer AB

B2B, long company name

Paslepia grynąsias kainas, kiekio nuolaidas ir tikslias atsargas, kol klientas žiūri į ekraną
Example Dealer Trailer and Agricultural Parts Wholesale AB

B2B product table

A B2B buyer's collection and search pages list the products as a table (snippets/product-table.liquid), one row per variant, rendered here with buyer: 'b2b' from the store's first products, each forced into one state: 12 in stock; more than 100; inventory not tracked; out of stock (the button disabled); a gas spring assembled to order; a product with too many variants to list (one row, "Choose options"); and a quantity rule stepping by 5. Without JS the quantity fields stay hidden and each button adds 1 through the page's cart form; with it, the quantity shows and the row is added on its own.

Produktai

Produktai
Produktas Prekės nr. Rek. kaina su PVM Grynoji be PVM Atsargos Kiekis
3060010 €25,19 be PVM Sandėlyje: 12
3060011 €38,39 be PVM Sandėlyje daugiau nei 100
3060013 €35,09 be PVM Sandėlyje: 3
3060012 €32,45 be PVM Sandėlyje
3069151 €11,00 be PVM Nėra sandėlyje
4011001 €109,44 be PVM Gaminama pagal užsakymą
€109,44 be PVM
4011003 €109,44 be PVM Sandėlyje: 40

Free-shipping meter

The cart's free-shipping meter (snippets/free-shipping-meter.liquid) in its three states, from demo values: below the threshold (a bar and the amount left), at or over it, and a cart with a bulky line, which ships at its own rate and so gets a note and no bar. The threshold is settings.free_shipping_threshold; the same number must be the order-price rule on the standard rate in Shopify.

Iki nemokamo standartinio pristatymo liko €124,50

Nuolaidų kodai taikomi atsiskaitant.

Nemokamas standartinis pristatymas atrakintas!

Nuolaidų kodai taikomi atsiskaitant.

Nemokamas standartinis pristatymas taikomas tik įprastoms prekėms. Didelių gabaritų prekės siunčiamos pagal atskirą tarifą.

B2B, prices hidden

A B2B location whose prices are hidden (custom.hide_prices on the company location, read only by snippets/b2b-buyer.liquid) sees no net, no price breaks and no cart totals. It keeps the recommended retail price incl. VAT where the catalog carries one, and reads "Price by agreement" (snippets/b2b-price-note.liquid) once per surface: the product page, the product table, the cart and the gas spring finder. Rendered with buyer: 'b2b-hidden'. Price: the net with an RRP (the RRP alone), the net without one (nothing), and the two table parts.

Rek. mažmeninė kaina €93,75 su PVM (no RRP: nothing rendered) (part net: nothing rendered) €93,75

The note, and volume pricing for a hidden location (nothing rendered).

Kaina susitarus

(nothing rendered)

A hidden-price cart line: no unit price, no price breaks and no total column.

Axle shock absorber, 900 kg

Prekės nr.: VAL-204-118

The product table for a hidden location: the note above it, the RRP column kept, no net column.

Produktai

Kaina susitarus

Produktai
Produktas Prekės nr. Rek. kaina su PVM Atsargos Kiekis
3060010 Sandėlyje: 12
3060011 Sandėlyje daugiau nei 100
3060013 Sandėlyje: 3
3060012 Sandėlyje
3069151 Nėra sandėlyje
4011001 Gaminama pagal užsakymą
4011003 Sandėlyje: 40

B2B, customer view

A seller at a dealer's counter turns on the customer view (the "Customer view" switch beside the person link, saved on the contact as custom.counter_mode) before showing the screen to an end customer. Net prices, price breaks and the exact stock go; the recommended retail price incl. VAT stays, at full size, and nothing says "by agreement". The cart and quick order keep their net: they are the seller's own order. Every gate asks snippets/b2b-net.liquid, which allows a price only in a state it knows. Rendered with buyer: 'b2b', view: 'counter'. Price: the net with an RRP (the RRP alone), the net without one (nothing), and the two table parts.

Rek. mažmeninė kaina €93,75 su PVM (no RRP: nothing rendered) (part net: nothing rendered) €93,75 (part discount: nothing rendered)

Volume pricing in the customer view (nothing rendered).

(nothing rendered)

The switch in the header's main bar, off and on: an eye off; pressed, it fills in and carries a check mark. It shows on every width, as its icon alone below 1280px; its explanation is the button's description, not part of its name.

customer view off

Paslepia grynąsias kainas, kiekio nuolaidas ir tikslias atsargas, kol klientas žiūri į ekraną
Example Dealer AB

customer view on

Paslepia grynąsias kainas, kiekio nuolaidas ir tikslias atsargas, kol klientas žiūri į ekraną
Example Dealer AB

prices hidden by the company (the switch still hides the stock)

Paslepia grynąsias kainas, kiekio nuolaidas ir tikslias atsargas, kol klientas žiūri į ekraną
Example Dealer AB

The product table in the customer view: the RRP column kept, no net column, and the stock as the sell state's label instead of a figure.

Produktai

Produktai
Produktas Prekės nr. Rek. kaina su PVM Atsargos Kiekis
3060010 Sandėlyje
3060011 Sandėlyje
3060013 Sandėlyje
3060012 Sandėlyje
3069151 Nėra sandėlyje
4011001 Gaminama pagal užsakymą
4011003 Sandėlyje

B2B quick order

The quick-order page (snippets/quick-order-form.liquid under the page's h1, sections/quick-order.liquid): a B2B buyer pastes article numbers, quantities and an optional comment, checks the lines and adds them all to the cart. Rendered with buyer: 'b2b', as no B2B login reaches this page. The live copy looks the lines up in the store, but only a B2B buyer's cards carry the variant id it adds, so here a found article reads as not found. Below it, the same form as a browser without scripting gets it: a search for one article number at a time. Then the page as anyone else sees it: a login prompt.

    Užsakymui įklijuojant reikia JavaScript. Ieškokite po vieną prekės numerį arba įjunkite JavaScript.

      Užsakymui įklijuojant reikia JavaScript. Ieškokite po vieną prekės numerį arba įjunkite JavaScript.

      A result line (snippets/quick-order-line.liquid) in every state: looking up; found, with quantity and comment; not found; a line that could not be read (a header row); the lookup failed, with a retry; over the line limit; added to the cart; and refused by the cart, with the server's message.

      1. VAL-204-118 Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta
      2. VAL-204-118 Axle shock absorber, 900 kg Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta
      3. 9999999X Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta
      4. Article no.;Qty;Comment Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta
      5. 4010219AE Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta
      6. 4010006A;1 Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta
      7. VAL-204-118 Axle shock absorber, 900 kg Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta
      8. VAL-204-118 Axle shock absorber, 900 kg Prekės numeris nerastas Nepavyko perskaityti šios eilutės Paieška nepavyko. Bandykite dar kartą. Viršyta eilučių riba: 100 Pridėta You can only add 12 of this item to your cart.

      B2B purchase list

      A dealer's purchase list (docs/b2b-theme.md Part 7): parts saved on the contact through the App Proxy (snippets/purchase-list-form.liquid, the one home of its path) and bought from the list page. Every entry passes buyer, as no B2B login reaches this page. In the buy box, in place of the collect list (snippets/purchase-list-add.liquid): not on the list, then on it.

      Jūsų pirkinių sąraše

      A product list with the list icon beside each row's Buy button; the first row is already on the list, so it links to the list page instead.

      Produktai

      Produktai
      Produktas Prekės nr. Rek. kaina su PVM Grynoji be PVM Atsargos Kiekis
      3060010 €25,19 be PVM Sandėlyje: 12
      3060011 €38,39 be PVM Sandėlyje daugiau nei 100
      3060013 €35,09 be PVM Nėra sandėlyje
      3060012 €32,45 be PVM Sandėlyje: 40

      The list page: one row per saved variant, a remove button per row, and "Buy everything" above the table, which only the script reveals (a form-encoded multi-item add is unconfirmed). Then the same in the customer view, and the empty list.

      Produktai

      Produktai
      Produktas Prekės nr. Rek. kaina su PVM Grynoji be PVM Atsargos Kiekis
      3060010 €25,19 be PVM Sandėlyje: 12
      3060011 €38,39 be PVM Sandėlyje daugiau nei 100
      3060013 €35,09 be PVM Nėra sandėlyje
      3060012 €32,45 be PVM Sandėlyje: 40

      Produktai

      Produktai
      Produktas Prekės nr. Rek. kaina su PVM Atsargos Kiekis
      3060010 Sandėlyje
      3060011 Sandėlyje
      3060013 Nėra sandėlyje
      3060012 Sandėlyje

      Produktai

      Jūsų pirkinių sąrašas tuščias. Pridėkite prekių iš produkto puslapio arba produktų sąrašo.

      The header link beside quick order, and a B2B buyer's stock panel: the online row only, no dealers.

      Example Dealer ABPerkama: Main warehouseGreitas užsakymasPirkinių sąrašas

      Atsargos internetu

      Internetu Sandėlyje

      Pristatymas per 2–5 darbo dienas

      Accordion

      Collapsed (default)

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...

      With count (12)

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...

      Open server-side (3)

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...

      As an h3 under a section heading (FAQ question)

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...

      Legal guarantee notice

      Jūsų teisės pagal teisinę garantiją
      ES pranešimas apie teisinę garantiją: ne trumpesnė kaip dvejų metų teisinė atitikties garantija Europos Sąjungoje parduodamoms prekėms. Pardavėjai privalo pasiūlyti nemokamą taisymą arba pakeitimą, o kai kuriais atvejais – kainos sumažinimą arba visišką pinigų grąžinimą. Daugiau apie jūsų teises svetainėje Your Europe
      Jūsų teisės pagal teisinę garantiją
      ES pranešimas apie teisinę garantiją: ne trumpesnė kaip dvejų metų teisinė atitikties garantija Europos Sąjungoje parduodamoms prekėms. Pardavėjai privalo pasiūlyti nemokamą taisymą arba pakeitimą, o kai kuriais atvejais – kainos sumažinimą arba visišką pinigų grąžinimą. Daugiau apie jūsų teises svetainėje Your Europe

      Collection copy

      Opening paragraph and several sections:

      Brake drums for trailer wheel brakes. Match the brake dimension, the bolt pattern and the bearing seat before you order.

      How to choose the right brake drum

      The right drum follows the wheel brake it sits on: model, dimension, hub, bolt pattern and bearing type.

      What size do I need?

      Measure the drum already fitted, or read the dimension on the brake plate.

      Which brake drum fits my trailer?

      Brake drums come in several dimensions depending on brake, axle and load rating.

      • Check the dimension and bolt pattern
      • Check the bearing seat

      Why buy from Valeryd?

      • A broad range for trailers, caravans and boat trailers
      • Fast delivery from our own stock

      A single section:

      How to choose a position light

      Check the dimensions, the mounting, the colour and the voltage before you order. A position light is chosen by how it fits and how it wires, not by the weight of the trailer.

      What size do I need?

      Measure the light already fitted: length, width, screw spacing and where the cable leaves the housing.

      • White to the front, red to the rear
      • Side markers are amber
      • 12-36 V suits most trailers

      No section headings, rendered in full:

      Copy with no section headings is rendered in full, as plain prose, because there is nothing to fold.

      This is the state of a category whose long text is one or two paragraphs.

      Blank content renders no markup:

      Card

      VAL-204-118

      Robust parts for every trailer

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...

      In stock Akcijos kaina€149,00Įprasta kaina €199,00

      VAL-204-118

      Robust parts for every trailer

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...

      Fits your trailer

      card on .color-scheme-navy — surface vs plain

      VAL-204-118

      Robust parts for every trailer

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...

      In stock Akcijos kaina€149,00Įprasta kaina €199,00

      Robust parts for every trailer

      Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...

      Fits your trailer

      Breadcrumbs

      Renders the visible trail and the matching BreadcrumbList JSON-LD from one list, so they cannot drift. A product resolves its own parent collection (skipping all and frontpage); pass collection to override. The trail starts at the top category — there is no Home crumb — so a page with no ancestry renders nothing, and the two examples below are every state there is.

      Category links

      The row under a collection page's description. A collection with children lists them; a leaf lists its siblings under the same parent; a collection outside the tree renders nothing. The tree is read through category-path, and empty collections are left out.

      Form field

      Find your trailer by registration number.

      We could not find that registration number.

      With error_slot: true the error paragraph is always there — empty and hidden until a script fills it — and already named in aria-describedby, so the script never rewrites it. inputmode asks a phone for digits while the field still accepts a pasted "0500N".

      Error slot, empty.

      Error slot, filled.

      Every control shares --control-size and --radius-sm with the button: a native select with the theme's chevron, and a currency-prefixed input (.field__affix) as used by the price filter.

      Quantity

      Works as a plain number input without JS; the <quantity-input> web component enhances the − / + buttons.

      With label the stepper gets a visible <label for> naming what it counts, in place of the fixed "Quantity".

      Most lids use two. Replace both so they push equally.

      Country and language picker

      In the footer only: a button showing the current country's flag (Shopify's own SVG, country | image_url) opens a modal <dialog> around Shopify's localization form. The button opens it with the platform's invoker commands, so a current browser needs no script; <localization-picker> fills in where a browser lacks them. It lists the countries of the active markets and the languages published to them, prints nothing while there is one of each, and stays off until the theme setting Show the country and language picker is on.

      Pasirinkite savo vietą

      Pasirinkite savo šalį, kad parodytume tinkamas kainas, pristatymą ir parduotuves.

      The dialog it opens, in the flow:

      Pasirinkite savo vietą

      Pasirinkite savo šalį, kad parodytume tinkamas kainas, pristatymą ir parduotuves.

      Location prompt

      Shown once, as a modal <dialog>, when Shopify's suggestion endpoint names a country or language other than the current one. It never redirects: Save location posts the localization form, the dismiss button keeps the visitor where they are, and either answer is remembered. It waits for the cookie banner to be answered, so the two never overlap. Rendered here open and in the flow; on the storefront it only opens when the endpoint has a suggestion, which needs an active market for the visitor's country.

      Ar esate tinkamoje vietoje?

      Pasirinkite savo šalį, kad parodytume tinkamas kainas, pristatymą ir parduotuves.

      Gas spring finder

      snippets/gas-spring-row.liquid — one result: a geometry with a select over its forces. The finder clones it from a <template> and fills [data-slot]; here it carries demo values in every state. The whole row is Choose's target; the select and Details sit above it.

      • Tikslus atitikimas

        M8 dujinė spyruoklė · 660 mm

        Suspausta 370 mm · strypas Ø10 mm

        €73,81 už spyruoklę €59,05 be PVM Sandėlyje

        Informacija

      • Artimas atitikimas

        M8 dujinė spyruoklė · 660 mm

        Suspausta 370 mm · strypas Ø10 mm

        8 mm ilgesnė nei jūsų

        Silpnesnė 100 N

        €71,00 už spyruoklę €56,80 be PVM Gaminama pagal užsakymą · pristatymo trukmė apie 7 d.

        Informacija

      • Artimiausia, ką turime

        M8 dujinė spyruoklė · 640 mm

        Suspausta 360 mm · strypas Ø10 mm

        20 mm trumpesnė nei jūsų

        €73,81 už spyruoklę Nėra sandėlyje

        Informacija

      • Tikslus atitikimas

        M8 dujinė spyruoklė · 660 mm

        Suspausta 370 mm · strypas Ø10 mm

        €73,81 už spyruoklę Sandėlyje tik 1 vnt.

        Informacija

      • Atitinka numerį

        M10 dujinė spyruoklė · 1068 mm

        Suspausta 600 mm · strypas Ø14 mm

        Informacija

      • Tikslus atitikimas

        M8 dujinė spyruoklė · 660 mm

        Suspausta 370 mm · strypas Ø10 mm

        €73,81 už spyruoklę Sandėlyje

        Informacija

      In order: exact and in stock · close and made to order, with the lead time · nearest and out of stock · short for two springs · a number that fits several forces, force left to choose · chosen.

      The rod check on a row. In the finder it shows only while the thread is "Not sure", by a :has() rule on the thread radios; here that rule is held on by hand.

      • Tikslus atitikimas

        M8 dujinė spyruoklė · 660 mm

        Suspausta 370 mm · strypas Ø10 mm

        Patikrinkite, ar jūsų spyruoklės strypas yra Ø10 mm. Spyruoklei su kitokiu strypu reikia kitų galų antgalių.

        €73,81 už spyruoklę Sandėlyje

        Informacija

      snippets/gas-spring-guide.liquid — where the number is, in the help's "Where is the number?" topic. The photo's sticker is blank; the article number and the force are drawn onto it, so no machine-written text can be wrong.

      Oranžinis žiedas: mūsų prekės numeris, 8010-0660-0500. Mėlynas žiedas: jėga. 0500N reiškia 500 N. Iliustracija: etiketė ant jūsų spyruoklės gali atrodyti kitaip.

      snippets/gas-spring-range.liquid — the slider under a field, passed to form-field as its addon. The field is the value; drag the thumb or type. Here at 660 mm on M8's span, and at 500 N on the starting span of every thread.

      snippets/gas-spring-fitting.liquid — one size in the end-fitting step. The step clones it from a <template>; the fixing dimension it prints depends on the family: the hole for eyes and forks, the bolt length for angled joints, the ball for sockets.

      In order: chosen · a fork head · an angled joint, its bolt length · a socket, its ball Ø · rated 650 N, approved on the one spring it serves by exception · available to order, no image.

      snippets/gas-spring-diagram.liquid — the assembled picture, schematic and fixed in size. Its sprite is rendered once for the demos' prefix; each finder renders its own. The glyphs at each end are one href each.

      Ištempta
      660 mm
      Suspausta
      370 mm
      Ištempta, nuo centro iki centro
      719 mm
      Suspausta, nuo centro iki centro
      429 mm
      Ištempta, nuo centro iki centro
      704 mm
      Suspausta, nuo centro iki centro
      414 mm
      Ištempta, nuo centro iki centro
      719 mm
      Suspausta, nuo centro iki centro
      429 mm
      Ištempta, nuo centro iki centro
      704 mm
      Suspausta, nuo centro iki centro
      414 mm

      In order: the spring alone · hinge eye and fork head · metal sockets at both ends · swivel eye and plastic socket · angled joint at the tube end, bare stud at the rod end.

      snippets/gas-spring-fittings.liquid — the step, the tube end open and shown with every family tile. In the finder, JS hides the families with no size that fits and can be bought in the quantity, and clones the sizes; here two are passed in. Choose a spring in the live finder below to use it.

      Vamzdžio galas

      Abu galai
      Dydis

      snippets/gas-spring-finder.liquid — the shell, live against collections['gas-springs'] (its index loads on the first focus). Below it, the same snippet as a browser without scripting paints it: the styleguide cannot switch scripting off, so it applies the finder's @media (scripting: none) rules by hand. The thread form needs collection.filters, which a page never has, so this is the guarded state: the note to use the filters, and no dead control. The help (snippets/gas-spring-help.liquid) opens from each question under the live finder's fields; in the scripting-less copy it lies inline under the finder.

      Raskite savo dujinę spyruoklę

      Naudokite žemiau esančius filtrus, kad dujines spyruokles susiaurintumėte pagal sriegį, ilgį ir jėgą.

      Jūsų komplektas

      Pasirinkite spyruoklę, kad sudarytumėte komplektą.

      Jėgos apskaičiavimas

      L1 – atstumas nuo vyrio iki tolimiausio dangčio krašto. L2 – atstumas nuo vyrio iki artimiausio spyruoklės tvirtinimo taško, kai dangtis atidarytas.

      Nuimkite spyruokles. Po dangčio kraštu, esančiu priešingoje vyriui pusėje, pastatykite svarstykles, uždarykite dangtį ant jų ir rodmenį padvigubinkite.

      Nuo vyrio centro.

      Ant dangčio arba ant priekabos – to tvirtinimo taško, kuris arčiau vyrio.

      Pagalba renkantis dujinę spyruoklę

      Kaip matuoti

      Visiškai ištraukite spyruoklę ir matuokite nuo vamzdžio galo iki strypo galo. Sriegio kaiščių ir galų antgalių neįtraukite.

      Naują spyruoklę, kai įmanoma, montuokite strypu žemyn.

      Kokios jėgos turi būti spyruoklė?

      Jėga išspausdinta ant spyruoklės, pvz., 0500N reiškia 500 N.

      Norėdami pasverti dangtį, nuimkite spyruokles, po dangčio kraštu, esančiu priešingoje vyriui pusėje, pastatykite svarstykles, uždarykite dangtį ant jų ir rodmenį padvigubinkite.

      Jėga vienai spyruoklei ≈ dangčio svoris (kg) × L1 × 6 ÷ (spyruoklių skaičius × L2). L1 – atstumas nuo vyrio iki tolimiausio dangčio krašto, o L2 – atstumas nuo vyrio iki artimiausio spyruoklės tvirtinimo taško, kai dangtis atidarytas; abu mm.

      Kuris sriegis?

      Jei sriegis ant spyruoklės nepažymėtas, išmatuokite strypą (ploną blizgią dalį) arba vamzdį:

      Sriegis Strypo Ø (mm) Vamzdžio Ø (mm)
      M5615
      M6818
      M81022
      M101427

      Kur yra numeris?

      Mūsų prekės numeris, pvz., 8010-0660-1200, arba dalies numeris ant etiketės.

      Oranžinis žiedas: mūsų prekės numeris, 8010-0660-0500. Mėlynas žiedas: jėga. 0500N reiškia 500 N. Iliustracija: etiketė ant jūsų spyruoklės gali atrodyti kitaip.

      Antgalių tipai

      Vyrio akutė
      Žiedas, pro kurį eina varžtas ar kaištis.
      Šakutės galvutė
      U formos šakutė; pro ją eina fiksavimo kaištis.
      Sukamoji akutė
      Akutė su vidiniu šarnyru, skirta šiek tiek neišlygiuotiems tvirtinimo taškams.
      Kampinis rutulinis šarnyras
      Kampu nustatytas rutulinis šarnyras; tvirtinamas varžtu prie laikiklio.
      Rutulinis lizdas, metalinis
      Užspaudžiamas ant rutulinio kaiščio.
      Rutulinis lizdas, plastikinis
      Užspaudžiamas ant rutulinio kaiščio; plastikinis korpusas.

      Akutė arba šakutė užmaunama ant varžto ar kaiščio: išmatuokite jo skersmenį. Rutulinis lizdas užspaudžiamas ant rutulinio kaiščio: išmatuokite rutulį.

      Naršykite visas dujines spyruokles, antgalius ir priedus žemiau

      Raskite savo dujinę spyruoklę

      Naudokite žemiau esančius filtrus, kad dujines spyruokles susiaurintumėte pagal sriegį, ilgį ir jėgą.

      Jūsų komplektas

      Pasirinkite spyruoklę, kad sudarytumėte komplektą.

      Jėgos apskaičiavimas

      L1 – atstumas nuo vyrio iki tolimiausio dangčio krašto. L2 – atstumas nuo vyrio iki artimiausio spyruoklės tvirtinimo taško, kai dangtis atidarytas.

      Nuimkite spyruokles. Po dangčio kraštu, esančiu priešingoje vyriui pusėje, pastatykite svarstykles, uždarykite dangtį ant jų ir rodmenį padvigubinkite.

      Nuo vyrio centro.

      Ant dangčio arba ant priekabos – to tvirtinimo taško, kuris arčiau vyrio.

      Pagalba renkantis dujinę spyruoklę

      Kaip matuoti

      Visiškai ištraukite spyruoklę ir matuokite nuo vamzdžio galo iki strypo galo. Sriegio kaiščių ir galų antgalių neįtraukite.

      Naują spyruoklę, kai įmanoma, montuokite strypu žemyn.

      Kokios jėgos turi būti spyruoklė?

      Jėga išspausdinta ant spyruoklės, pvz., 0500N reiškia 500 N.

      Norėdami pasverti dangtį, nuimkite spyruokles, po dangčio kraštu, esančiu priešingoje vyriui pusėje, pastatykite svarstykles, uždarykite dangtį ant jų ir rodmenį padvigubinkite.

      Jėga vienai spyruoklei ≈ dangčio svoris (kg) × L1 × 6 ÷ (spyruoklių skaičius × L2). L1 – atstumas nuo vyrio iki tolimiausio dangčio krašto, o L2 – atstumas nuo vyrio iki artimiausio spyruoklės tvirtinimo taško, kai dangtis atidarytas; abu mm.

      Kuris sriegis?

      Jei sriegis ant spyruoklės nepažymėtas, išmatuokite strypą (ploną blizgią dalį) arba vamzdį:

      Sriegis Strypo Ø (mm) Vamzdžio Ø (mm)
      M5615
      M6818
      M81022
      M101427

      Kur yra numeris?

      Mūsų prekės numeris, pvz., 8010-0660-1200, arba dalies numeris ant etiketės.

      Oranžinis žiedas: mūsų prekės numeris, 8010-0660-0500. Mėlynas žiedas: jėga. 0500N reiškia 500 N. Iliustracija: etiketė ant jūsų spyruoklės gali atrodyti kitaip.

      Antgalių tipai

      Vyrio akutė
      Žiedas, pro kurį eina varžtas ar kaištis.
      Šakutės galvutė
      U formos šakutė; pro ją eina fiksavimo kaištis.
      Sukamoji akutė
      Akutė su vidiniu šarnyru, skirta šiek tiek neišlygiuotiems tvirtinimo taškams.
      Kampinis rutulinis šarnyras
      Kampu nustatytas rutulinis šarnyras; tvirtinamas varžtu prie laikiklio.
      Rutulinis lizdas, metalinis
      Užspaudžiamas ant rutulinio kaiščio.
      Rutulinis lizdas, plastikinis
      Užspaudžiamas ant rutulinio kaiščio; plastikinis korpusas.

      Akutė arba šakutė užmaunama ant varžto ar kaiščio: išmatuokite jo skersmenį. Rutulinis lizdas užspaudžiamas ant rutulinio kaiščio: išmatuokite rutulį.

      Naršykite visas dujines spyruokles, antgalius ir priedus žemiau

      Product card

      The meta rows are data-driven: the dealer line ("Available at N stores") reads the valeryd.dealer_count metafield, and whose count it shows is the market's call (snippets/dealer-country.liquid). There are three states: pinned, a market in a dealer country, where the count is server-rendered and the first card below is forced to SE to show it; fallback, any other market, where the line renders hidden and <dealer-count> fills it only for a visitor from a fallback country; and none, where there is no fallback list or the count is zero, so the line is absent. Without JS or with a failed lookup, only the pinned state shows.

      Both stock states side by side, picked from the catalogue: the foot (dealer line, availability) and the button sit at the same y in every card, the title reserves two lines so the price does too.

      3-way socket 250V 16A IP44 0.5 m

      Valeryd Premium

      3 lizdų šakotuvas 250V 16A IP44, 0,5 m

      Prekės nr. 3060010

      €25,19
      • 0.5 m lead
      • IP44 splash-proof rating
      • 250 V / 16 A

      Sandėlyje

      ATV Loading Ramp Aluminium Foldable 2260x305 mm 2 pack

      Valeryd Premium

      ATV pakrovimo rampa, aliuminis, sulankstoma, 2260x305 mm, 2 vnt.

      Prekės nr. 6452001

      €246,97
      • Rampos matmenys 2260x305 mm
      • 680 kg keliamoji galia
      • Sulankstoma, kad užimtų mažai vietos

      Nėra sandėlyje

      Fitment result sections

      How a reg-nr result is split: every part in ONE .easysearch__grid, grouped by category, so a group opens in the cell after the last one ends. A group is named once, on its first card (.easysearch__label → .easysearch__group), by the most specific category it has: the sub-category, or the top-level category for parts that sit directly on it. assets/easysearch.js assembles this from the data-section / data-group attributes the card grid renders; the markup below is that shape, held still so the label band can be read.

      Both cases are here: a group named by its sub-category (two cards, only the first labelled), and one named by its top-level category. Heading levels are set at assembly time, not here — the live page runs h2 → h3 → card title, one step at a time.

      Facet list

      snippets/facet-list.liquid — Shopify's native facets as form controls, with no form of its own: the caller supplies one. The collection page passes collection.filters, the search page passes search.filters. A facet offering a single choice is hidden (it cannot narrow anything), long lists fold behind a no-JS "show more", and the first few open.

      It cannot be rendered here. Shopify populates filters only on a collection or search template — iterating collections from a page returns them empty, which is verified, not assumed. See it live on the product listing or on a search.

      Mega hotspots

      Category: Važiuoklė ir priedai — list, extras and diagram render from the same mega_panel metaobject, so numbering cannot drift.

      Cart line and gas spring set

      snippets/cart-line.liquid and snippets/cart-set.liquid, rendered from demo values: both take plain parameters, because Liquid cannot build a line item. On /cart the section renders the loose lines first, then one set per distinct private _gs_set key, its lines in part order, and warns when a set's fittings do not come to one per spring end. Each quantity is named updates[<line key>]. Remove set submits a form the cart renders after its own form, so on this page it does nothing.

      A loose line, a loose line with a visible property, and one with its image and a variant title (the end-fittings collection's first image, as the fitting demos above use):

      Tail light, left, 12 V

      Prekės nr.: VAL-204-118

      €14,90
      €14,90
      Tail light, right, 12 V

      Note: Fit on the kerb side

      Prekės nr.: VAL-204-118

      €14,90
      €29,80
      Angled ball joint ; L=35; M10
      Hinge eye M8, hole Ø8.2 mm

      Zinc plated

      Prekės nr.: 6820015

      €5,31
      €10,62

      A set with a fitting at each end, whose quantities match:

      Dujinių spyruoklių komplektas

      8010-0660-1200 | tube end 6820015 | rod end 6820103 | 719 mm centre to centre | fittings fitted

      Spyruoklė

      Gas spring M8, 660 mm, 1200 N

      Prekės nr.: 8010-0660-1200

      €73,81
      €147,62

      Vamzdžio galas

      Hinge eye M8, hole Ø8.2 mm

      Prekės nr.: 6820015

      €5,31
      €10,62

      Strypo galas

      Fork head M8

      Prekės nr.: 6820103

      €6,36
      €12,72

      A set with the same fitting at both ends, one short of two per spring:

      Dujinių spyruoklių komplektas

      8010-0660-1200 | both ends 6820015 | 716 mm centre to centre | fittings fitted

      Patikrinkite kiekius: kiekvienai spyruoklei reikia po vieną antgalį kiekvienam galui.

      Spyruoklė

      Gas spring M8, 660 mm, 1200 N

      Prekės nr.: 8010-0660-1200

      €73,81
      €147,62

      Abu galai

      Hinge eye M8, hole Ø8.2 mm

      Prekės nr.: 6820015

      €5,31
      €15,93

      A set whose fittings were taken out of the cart, and whose lines carry no set value (added by hand, not by the finder): the check flags it, no "delivered fitted" note shows, and the group is named by its heading alone:

      Dujinių spyruoklių komplektas

      Patikrinkite kiekius: kiekvienai spyruoklei reikia po vieną antgalį kiekvienam galui.

      Spyruoklė

      Gas spring M8, 660 mm, 1200 N

      Prekės nr.: 8010-0660-1200

      €73,81
      €147,62

      Registration-plate band

      snippets/regnr-plate.liquid — the plate band at the head of a reg-no field, drawn as vector so it stays sharp at any size and takes its letters from the theme font. Which one a visitor sees is the market's call first: on a market in a listed country the server lights that plate (snippets/regnr-country.liquid). Elsewhere assets/regnr-country.js lights the visitor's own plate by IP, but only for a country in the fallback list. Nothing shows for anyone else, or without JS off a pinned market, because a reg-no lookup only returns anything for registries the backend can reach. Below they are shown unconditionally, at header, hero and inspection size.

      1.9rem
      2.6rem
      6rem

      DK is drawn but not offered: nobody has confirmed that Danish plates resolve. SE and NO are the countries currently listed.

      Trailer context

      A saved reg-nr search (localStorage, assets/trailer-context.js): <trailer-chip> completes the header plate motif and links to the trailer's parts; <trailer-fit> confirms fitment on a product when a SKU matches the saved parts. Both stay hidden without a saved trailer — and without JS. The demo buttons exercise the real store (they write this browser's localStorage).

      trailer-chip — in the search shell (empty until saved)

      trailer-filter — the bar a CATEGORY page shows when the saved trailer has parts in it (assets/trailer-filter.js). Both states, held still: the offer, and the filter switched on. On its real page the second state also hides the category's count, sort, facets, grid and pagination — those describe the unfiltered collection — and puts the fitting parts in their place. The bar renders nothing at all where the trailer has no parts, which is why it cannot be demonstrated in-situ here.

      Šios kategorijos dalių, tinkančių ABC123: 5

      Visos dalys, tinkančios ABC123

      Rodoma dalių, tinkančių ABC123: 5

      Visos dalys, tinkančios ABC123

      trailer-fit — on a product whose SKU is among the saved parts:

      Newton calculator

      snippets/newton-calculator.liquid renders the dialog and nothing else. The caller owns the opener — any button whose data-newton-open holds the dialog's id — and names the two inputs the result fills, here the demo fields below. It is never rendered open on this page: an open scroll-lock dialog would lock the whole styleguide. Its states are reached from the button: empty on open (no field has a default); each empty, zero or unreadable field named after Calculate, and a number of springs above what Springs per lid takes (that input's own max, 6 here); and the result — 18 kg, 900, 200 and 2 springs give "About 240 N per spring". Use fills both fields, closes the dialog and returns focus to the force field. Without JS nothing opens it, so the finder hides its opener and states the rule in words.

      Jėgos apskaičiavimas

      L1 – atstumas nuo vyrio iki tolimiausio dangčio krašto. L2 – atstumas nuo vyrio iki artimiausio spyruoklės tvirtinimo taško, kai dangtis atidarytas.

      Nuimkite spyruokles. Po dangčio kraštu, esančiu priešingoje vyriui pusėje, pastatykite svarstykles, uždarykite dangtį ant jų ir rodmenį padvigubinkite.

      Nuo vyrio centro.

      Ant dangčio arba ant priekabos – to tvirtinimo taško, kuris arčiau vyrio.

      Dealer teaser

      Invites a company to become a dealer where the page shows the visitor no dealers: in the buy box (inline) and the footer. It renders hidden and country-gate.js reveals it when ValerydDealer.country() names no country; on a market that pins a dealer country it is not rendered, and with the dealer_join_page setting empty it renders nowhere. Shown here ungated. To see the live gate on a product page, set sessionStorage['valeryd:geo:v1'] = '{"country":"DE","supported":false}' (shown) or '{"country":"SE","supported":true}' (hidden) and reload.

      Brand logos

      Valeryd's own brands and quality marks (X-TECH, the ECE R90 lifetime warranty badge, Easy Search, Powered by Sweden) as theme assets. The logos are white, so they sit on the navy scheme. Used in the footer under the social icons (marks: 'all') and, on a wide screen, in the header beside the search (marks: 'header', X-TECH and Powered by Sweden only). Each is switched on with its own show_brands theme setting.

      Theme blocks

      Theme blocks (hero, USP bar, product title/price/buy/description/store-availability, collection filters, EasySearch lookup) carry their own scoped CSS and merchant settings, so they're demonstrated in-situ on their real pages — hero/USP/EasySearch on the home, filters on a collection, the hairline-framed USP bar section below the product page's main section, and the "Complete your purchase" accordion rail (equivalents + curated metafield + "fits your trailer" + native recommendations) at the bottom of a product page — rather than re-rendered here. The product page is one main-product section holding three zones of a single grid: the gallery and the scan-info column (title/tagline/rating/top-3 USPs and the description's first paragraph) on the first row, the deep-dive zone spanning both of those columns on the second (its own Product details heading, then the full description and the accordion trio specifications / manuals & guides / manufacturer information), and a sticky buy box spanning both rows on the right, carrying the price, the personal "fits your trailer" confirmation, and the dealer-availability badge + modal. The scan column's blocks are static, so the block list belongs to the deep-dive zone — the zone a merchant extends. The product-description block runs in two modes — preview up in the scan zone, full down in the deep-dive zone — and the one anchor link joins them: it scrolls to the full copy and lifts its gradient fade via :target, so the whole reveal works with JS disabled and never depends on author CSS un-hiding a closed <details>. This block library covers the reusable snippet components above. One exception the in-situ rule cannot cover: a usp-item carrying a countries value renders openly only on a market whose country it names. Elsewhere it renders hidden, and country-gate.js reveals it only for a visitor from a country it names that is also in the dealer fallback list (SE,NO). With only the EU-26 market active, a German visitor never sees it and a Swedish one does. To inspect the revealed state, set sessionStorage['valeryd:geo:v1'] = '{"country":"SE"}' and reload; to confirm the hidden state actually hides, check the element's geometry rather than its hidden property, since .usp-item sets display and would otherwise paint while reporting itself hidden.

      Parduotuvės, kuriose yra ši dalis

      Ar esate tinkamoje vietoje?

      Pasirinkite savo šalį, kad parodytume tinkamas kainas, pristatymą ir parduotuves.