Themes

The ShopAR Plugin offers powerful customization capabilities. You can customize the appearance of the AR & 3D viewer to match your website's design.

CSS Customization

To change the look-and-feel of the plugin's UI, use CSS custom properties (variables). Set them on the target element or any ancestor:

#my-target-element {
  /* Hide 3D loading bar */
  --shopar-3d-loading-display: none;

  /* Move 3D loading bar to bottom */
  --shopar-3d-loading-top: auto;
  --shopar-3d-loading-bottom: 0;

  /* Change 3D loading bar appearance */
  --shopar-3d-loading-radius: 0;
  --shopar-3d-loading-fg: #f28232;
  --shopar-3d-loading-bg: transparent;

  /* Change 3D background */
  --shopar-3d-bg: linear-gradient(to top, #1a88ff, #003e80);

  /* Hide AR loading screen */
  --shopar-ar-loading-container-display: none;

  /* Change AR loading bar appearance */
  --shopar-ar-loading-bar-radius: 0;
  --shopar-ar-loading-bar-fg: #000000;
  --shopar-ar-loading-bar-bg: #f0f0f0;

  /* Change AR prompt appearance */
  --shopar-ar-prompt-bg: #161616b2;
  --shopar-ar-prompt-text-color: #f0f0f0;

  /* Change QR code screen appearance */
  --shopar-qr-bg: #f0f0f0;

  /* ...see full reference below... */
}

3D Loading Screen

Variable	Default	Description
--shopar-3d-loading-display	block	3D loading bar display. Set to none to hide.
--shopar-3d-loading-top	0	3D loading bar top position.
--shopar-3d-loading-bottom	auto	3D loading bar bottom position.
--shopar-3d-loading-height	0.375rem	3D loading bar height.
--shopar-3d-loading-radius	calc(infinity * 1px)	3D loading bar border radius.
--shopar-3d-loading-fg	linear-gradient(90deg, #773cd8, #5fb9ec)	3D loading bar foreground (progress).
--shopar-3d-loading-bg	#e5e7eb	3D loading bar background.

3D Viewer

Variable	Default	Description
--shopar-3d-bg	#ffffff	3D view background color.

AR Loading Screen

Variable	Default	Description
--shopar-ar-loading-container-display	flex	Loading container display. Set to none to hide.
--shopar-ar-loading-container-bg	#ffffff	Loading container background color.
--shopar-ar-loading-container-gap	1rem	Gap between loading elements.
--shopar-ar-loading-bar-width	80%	Loading bar width.
--shopar-ar-loading-bar-height	0.5rem	Loading bar height.
--shopar-ar-loading-bar-radius	calc(infinity * 1px)	Loading bar border radius.
--shopar-ar-loading-bar-fg	linear-gradient(90deg, #773cd8, #5fb9ec)	Loading bar foreground (progress).
--shopar-ar-loading-bar-bg	#e5e7eb	Loading bar background.

AR Prompt

Variable	Default	Description
--shopar-ar-prompt-bg	#1e293bb2	AR prompt background color.
--shopar-ar-prompt-gap	1rem	Gap between AR prompt elements.
--shopar-ar-prompt-text-color	white	AR prompt text color.
--shopar-ar-prompt-img-max-width	80%	AR prompt image max width.
--shopar-ar-prompt-img-max-height	50%	AR prompt image max height.

QR Code Screen

Variable	Default	Description
--shopar-qr-bg	#ffffff	QR code container background.

Default UI

By default, the plugin renders its own UI which includes control buttons (to switch between 3D and AR) and error UI. This is useful for quick start and prototyping.

Tip: For production use, we recommend implementing a custom UI instead. This allows you to track user interactions with your own analytics and integrate the plugin seamlessly into your existing design system. See Custom UI for details.

You can customize the default UI appearance using CSS variables:

Variable	Default	Description
--shopar-btn-container-padding-bottom	2rem	Button container bottom padding.
--shopar-btn-container-gap	0.5rem	Gap between buttons.
--shopar-btn-padding	0.5rem 0.75rem	Button padding.
--shopar-btn-gap	0.25rem	Gap between button icon and text.
--shopar-btn-border	1px solid #dddddd	Button border.
--shopar-btn-border-radius	calc(infinity * 1px)	Button border radius.
--shopar-btn-bg	#ffffff	Button background color.
--shopar-btn-hover-bg	#f5f5f5	Button hover background color.