{"id":17766,"date":"2026-08-05T11:16:14","date_gmt":"2026-08-05T05:31:14","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17766"},"modified":"2026-08-05T11:18:58","modified_gmt":"2026-08-05T05:33:58","slug":"wie-fuegt-man-in-bigcommerce-eine-benutzerdefinierte-stickfunktion-hinzu","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-fuegt-man-in-bigcommerce-eine-benutzerdefinierte-stickfunktion-hinzu\/","title":{"rendered":"Wie f\u00fcgt man in BigCommerce eine benutzerdefinierte Stickfunktion hinzu?"},"content":{"rendered":"\n<p>Wenn Sie einem <strong><a href=\"https:\/\/www.bay20.com\/de\/bigcommerce-entwicklungsunternehmen\/\" target=\"_blank\" rel=\"noopener\" title=\"\">BigCommerce<\/a><\/strong>-Shop die Option \u201eStickerei hinzuf\u00fcgen\u201c hinzuf\u00fcgen m\u00f6chten, ist Ihr erster Impuls vielleicht, nach einer App zu suchen. Es gibt einige Personalisierungs-Apps auf dem Markt, und die sind durchaus in Ordnung. Allerdings fallen daf\u00fcr monatliche Geb\u00fchren an. In der Regel speichern sie die Eingaben der Kunden au\u00dferhalb von BigCommerce, und es gelingt selten, die Benutzeroberfl\u00e4che so zu gestalten, dass sie wie ein integraler Bestandteil der Website wirkt und nicht wie ein nachtr\u00e4glich angeh\u00e4ngtes Element.<\/p>\n\n\n\n<p>Es gibt einen einfacheren Weg, der ausschlie\u00dflich die Funktionen nutzt, die BigCommerce bereits bereitstellt: Produktmodifikatoren. Ich habe das nun schon einige Male umgesetzt, daher hier eine grobe Beschreibung meiner Vorgehensweise.<\/p>\n\n\n\n<p>Die Kurzfassung: Richte die Stickfelder als normale Produktoptionen ein und verwende dann ein wenig JavaScript, um sie auf der Produktseite korrekt anzuzeigen und alles mit den Preisregeln zu verkn\u00fcpfen, die BigCommerce bereits verwaltet. Sie bauen kein zweites System auf, um zu verfolgen, was der Kunde ausw\u00e4hlt, sondern verbessern lediglich die Darstellung des Systems, \u00fcber das BigCommerce bereits verf\u00fcgt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Beginnen Sie im Admin-Bereich, nicht im Code<\/strong><\/h2>\n\n\n\n<p>Nehmen wir an, Sie m\u00f6chten dies f\u00fcr eine Jacke umsetzen. Bevor Sie auch nur eine Vorlage bearbeiten, richten Sie die Modifikatoren direkt am Produkt selbst ein, unter \u201eOptionen\/Modifikatoren\u201c:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ein Kontrollk\u00e4stchen mit einer Bezeichnung wie \u201eStickerei\u201c ist lediglich ein von JavaScript gesteuertes Kennzeichen, damit der Rest des Shops wei\u00df, ob dieser Artikel bestickt ist.<\/li>\n\n\n\n<li>Ein Textfeld f\u00fcr den Sticktext, gegebenenfalls mit einer Zeichenbegrenzung, falls Ihr Stickdienstleister eine solche vorsieht. Kunden werden versuchen, einen ganzen Absatz dort hineinzuschreiben, wenn Sie es zulassen.<\/li>\n\n\n\n<li>Ein Dropdown-Men\u00fc f\u00fcr die Schriftart.<\/li>\n\n\n\n<li>Eine Farbmuster-Option f\u00fcr die Garnfarbe, sofern der Farbmustertyp von BigCommerce f\u00fcr Ihr Angebot geeignet ist. Eine Liste mit Farbnamen ist weitaus weniger n\u00fctzlich als ein echtes Farbmuster.<\/li>\n\n\n\n<li>Eine Auswahl mit Optionsfeldern f\u00fcr die Platzierung (linke Brustseite, \u00c4rmel, R\u00fccken usw.). Dies ist in der Regel die Option, die einen Preisaufschlag mit sich bringt, und Sie legen diese Preisregel direkt dort im Modifikator fest.<\/li>\n<\/ul>\n\n\n\n<p>Dieser letzte Punkt ist der entscheidende Trick, um das Ganze einfach zu halten: Berechnen Sie die Stickpreise nicht selbst. \u00dcberlassen Sie das BigCommerce. Sobald die Regel auf der Option hinterlegt ist, funktioniert die integrierte Funktion \u201ePreis bei Options\u00e4nderung neu berechnen\u201c einfach, und Sie m\u00fcssen die Preislogik in Ihrem eigenen Code nie anfassen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"551\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-10-980x551.png\" alt=\"\" class=\"wp-image-17767\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-10-980x551.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-10-300x169.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-10-768x432.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-10-1000x562.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-10-800x450.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-10.png 1366w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Lassen Sie die Optionen auf der Produktseite anzeigen<\/strong><\/h2>\n\n\n\n<p>Lassen Sie die Felder wie jede andere Option direkt auf der Produktseite erscheinen und nutzen Sie JavaScript, um die Benutzererfahrung rund um diese Felder zu optimieren. Hier sind einige empfehlenswerte Ma\u00dfnahmen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blenden Sie die Stickfelder erst ein, wenn das Kontrollk\u00e4stchen \u201eStickerei\u201c aktiviert ist, anstatt jedem Besucher standardm\u00e4\u00dfig f\u00fcnf zus\u00e4tzliche Felder anzuzeigen.<\/li>\n\n\n\n<li>F\u00fcgen Sie eine kleine Live-Vorschau des Textes neben der Option hinzu, die sich w\u00e4hrend der Eingabe des Kunden aktualisiert, damit dieser Feedback erh\u00e4lt, ohne die Seite verlassen zu m\u00fcssen.<\/li>\n\n\n\n<li>Deaktivieren Sie die Schaltfl\u00e4che \u201eIn den Warenkorb\u201c, bis die erforderlichen Felder (Text, Farbe, Platzierung) ausgef\u00fcllt sind. So verlassen Sie sich nicht allein auf die Standard-Validierungsmeldungen von BigCommerce.<\/li>\n<\/ul>\n\n\n\n<p>Das muss alles nicht kompliziert sein. Etwas wie das Folgende reicht aus, um das Ein- und Ausblenden sowie die Vorschau zum Laufen zu bringen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const toggle = document.querySelector('#attribute_embroidery_toggle');\nconst fields = document.querySelector('.embroidery-fields');\nconst textInput = document.querySelector('&#91;data-name=\"Embroidery Text\"]');\nconst preview = document.querySelector('#embroideryPreview');\n\ntoggle?.addEventListener('change', () =&gt; {\n  fields.style.display = toggle.checked ? 'block' : 'none';\n});\n\ntextInput?.addEventListener('keyup', (e) =&gt; {\n  preview.textContent = e.target.value || 'Your embroidery text will appear here';\n});<\/code><\/pre>\n\n\n\n<p>Das war\u2019s auch schon, was die Kernfunktionalit\u00e4t angeht. Verkn\u00fcpfen Sie die Auswahl \u201eVor dem Hinzuf\u00fcgen zum Warenkorb erforderlich\u201c genauso wie jede andere Pflichtoption im Theme, und \u00fcberlassen Sie es der BigCommerce-eigenen Option-\u00c4nderungsverarbeitung, den Preis anzupassen, wenn sich die Platzierung \u00e4ndert.<\/p>\n\n\n\n<p><strong>Was passiert, sobald der Artikel im Warenkorb liegt?<\/strong><\/p>\n\n\n\n<p>Sobald sich ein bestickter Artikel im Warenkorb befindet, stellt BigCommerce f\u00fcr konfigurierbare Produkte bereits einen Link zum Bearbeiten der Optionen bereit, sodass ein Kunde zur\u00fcckgehen und seinen Text, seine Schriftart oder die Platzierung \u00e4ndern kann, ohne den Support kontaktieren zu m\u00fcssen. Dieser Ablauf nutzt dieselben Felder und dieselbe Logik \u2013 er wird lediglich vom Warenkorb aus ausgel\u00f6st statt von der Produktseite. Bei Interesse w\u00e4re das einen eigenen Beitrag wert.<\/p>\n\n\n\n<p><strong>Warum ich dies einer App vorziehe<\/strong><\/p>\n\n\n\n<p>Vor allem, weil es kostenlos ist und weil die Daten BigCommerce nie verlassen. Die Stickoptionen erscheinen als normale Optionswerte in der Bestellung, genau dort, wo jeder, der sie im Admin-Bereich einsieht, sie erwarten w\u00fcrde. Kein separates Dashboard, kein Webhook, der eines Tages still und leise die Synchronisierung einstellen k\u00f6nnte.<\/p>\n\n\n\n<p>Der Nachteil ist, dass ihr selbst daf\u00fcr verantwortlich seid. Wenn sp\u00e4ter jemand Zeichenbeschr\u00e4nkungen pro Schriftart w\u00fcnscht oder eine Validierung, die verhindert, dass Kunden Emojis in den Sticktext eingeben, m\u00fcsst ihr das selbst entwickeln \u2013 es steht nicht auf der Roadmap eines Anbieters. F\u00fcr viele Shops ist das ein fairer Kompromiss. F\u00fcr andere ist es die bessere Entscheidung, f\u00fcr eine App zu bezahlen, die diese Sonderf\u00e4lle bereits abdeckt. Es lohnt sich, dieses Gespr\u00e4ch mit dem Kunden zu f\u00fchren, bevor ihr anfangt \u2013 nicht erst danach.<\/p>\n\n\n\n<p>Bitte kontaktieren Sie uns unter <strong>wargis@bay20.com \/ manish@bay20.com<\/strong> oder rufen Sie uns unter <strong>+91-9582784309 oder +91-8800519180<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit <strong><a href=\"https:\/\/www.bay20.com\/de\/digitales-marketing-unternehmen\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Bigcommerce<\/a><\/strong> ben\u00f6tigen. Sie k\u00f6nnen auch unsere Website besuchen, um sich \u00fcber unsere Dienstleistungen zu informieren.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn Sie einem BigCommerce-Shop die Option \u201eStickerei hinzuf\u00fcgen\u201c hinzuf\u00fcgen m\u00f6chten, ist Ihr erster Impuls vielleicht, nach einer App zu suchen. Es gibt einige Personalisierungs-Apps auf dem Markt, und die sind durchaus in Ordnung. Allerdings fallen daf\u00fcr monatliche Geb\u00fchren an. In der Regel speichern sie die Eingaben der Kunden au\u00dferhalb von BigCommerce, und es gelingt selten, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17702,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[175],"class_list":["post-17766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bigcommerce","tag-bigcommerce"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17766"}],"version-history":[{"count":1,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17766\/revisions"}],"predecessor-version":[{"id":17768,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17766\/revisions\/17768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17702"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}