Customizer – Gestaltung (URL-Parameter)

Gestaltung mit URL-Parametern

Mit URL-Parametern öffnest du den Customizer mit vordefinierten Darstellungseinstellungen und Produktoptionen, ohne den Einbettungscode zu ändern. Der Customizer liest diese Parameter beim Laden und wendet sie auf den Arbeitsbereichshintergrund, die 3D-Umgebung, die Lichtintensität und die Variantenauswahl an. Per URL gewählte Varianten werden anhand der WooCommerce-Attribut- und Wertzuordnungen aufgelöst. Eigene Farben: Für Produkte mit eigenen Farbvarianten kannst du die eigene Farbe anfordern und gewählte Farbwerte direkt in der URL übergeben. Kodiere # in Abfragewerten als %23.

Liste der verfügbaren URL-Parameter

ParameterTypBeschreibungStandardwert
bcgstringCustomizer-Hintergrundmodus: grad_f6f7fb_e8fff6, app_img_123 oder env. Der Modus env verwendet die Vorschau der gewählten Umgebung als Arbeitsbereichshintergrund.Design-/Theme-Standard
envintID der Laufzeitumgebung. Wählt die HDRI-Umgebung für die 3D-Zeichenfläche und bei bcg=env auch den Umgebungsvorschauhintergrund aus.Design/Standard
light_intensity0 - 2Lichtintensität der Umgebung für die 3D-Zeichenfläche. Werte außerhalb des Bereichs werden auf die Grenzwerte begrenzt.Design/Standard
bcg_blur0 - 100Unschärfe für bildbasierte Customizer-Hintergründe, einschließlich app_img_* und Vorschauhintergründen mit bcg=env.0
bcg_brightness0 - 3Helligkeit bildbasierter Customizer-Hintergründe.1
bcg_underlaystringVerlaufsunterlage hinter bildbasierten Hintergründen, z. B. grad_ffffff_f5f7fb.Design-/Theme-Standard
attribute_pa_*stringWählt einen WooCommerce-Produktattributwert vorab aus. Akzeptierte Schlüsselformen sind attribute_pa_color, pa_color und color; unterstützt werden Aliasnamen für Größe, Farbe, Material, Druckverfahren und Muster.
custom_color0 / 1 / trueFordert die Variante mit eigener Farbe an, sofern das Produkt sie unterstützt. Dasselbe ist mit color=custom möglich.0
picked_colorsstringKommagetrennte eigene Farbwerte im Format detailKey:%23hex, z. B. front:%23ff6b6b,back:%2300ff88. Das Zeichen # muss als %23 URL-kodiert sein.

Beispiel

URL: https://alterproduct.com/app/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b

<iframe
  loading="lazy"
  title="Product Customizer"
  src="https://alterproduct.com/app/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>