Styling Examples

Below you can find examples how modify UI and layout of 3D configurator.

Disclaimer

Please note that the variables provided above are the ones officially supported by our 3D Configurator Embed Application. While it may be possible to alter other properties, we strongly recommend that you only modify those listed in this documentation.

Unofficial modifications, while seemingly effective in the short-term, might not be compatible with future updates of our application. This could lead to instability or unintended behaviours in your implementation. Therefore, if you're considering changing properties not listed in this documentation, we advise you to contact our support team for guidance. This ensures your customizations stay functional and stable with all future software updates.

Configurator dimensions

We have exposed CSS variables which provide developers the opportunity to modify the size and proportions of the 3D/2D configurator.

The following CSS variables should be set on the root of the document:

<style>
  :root {
    --mmq-configurator-container-max-height: 900px;
    --mmq-configurator-container-min-height: 375px;
    /* ...etc. */
  }
</style>

Desktop

The table below lists and describes the available CSS variables:

Name	Description
`--mmq-configurator-container-max-height`	The maximum height of the configurator and options panel. Defaults to 900px.
`--mmq-configurator-container-min-height`	The minimum height of the configurator and options panel. Defaults to 375px.
`--mmq-configurator-container-height`	The static height of the configurator. It sets the height of the side panel and canvas, which is stretched to the height of the side panel on desktop. The default formula is calc(100vh - 30px - var(--mmq-variant-ui-extra-space, 0px)). A value of 30px is used to provide some spacing from the top and bottom. If you set it to 100%, the whole configurator will have the height of the side panel (to fit all option sets), limited by the max-height.
`--mmq-variant-ui-extra-space`	This number is used in the default calculation of the configurator 3D height. It can be used to compensate for a fixed site header, for example.
`--mmq-sidepanel-width`	This variable controls the width of the side panel. By default, it is set to 379px. It works on devices wider than 1200px.
`--mmq-tablet-sidepanel-width`	This variable works similarly to the one above, but is applicable to devices with a width between 840px and 1200px. By default, it is set to 35%.
`--mmq-configurator-page-container-vertical-padding`	This variable is used for the top and bottom padding for the configurator content. It is set to 10px by default, providing some space at the top and bottom.

Mobile

To ensure CSS variables only apply to mobile styles and do not interfere with desktop settings, place all variable declarations within media queries:

<style>
  :root {
    @media (max-width: 839px) {
      --mmq-configurator-container-max-height: 900px;
      --mmq-configurator-container-min-height: 375px;
      /* ...etc. */
    }
  }
</style>

The following variables are available for mobile configurations:

Name	Description
`--mmq-configurator-wrapper-mobile-base-height`	The height of the entire embed. By default, it is set to 100vh - 80px (window height minus space for adress bar).
`--mmq-canvas-height`	The height of the 3D canvas. It must be set in px due to Babylon engine limitations. By default, it is set to half of the device height.
`--mmq-mobile-tabs-min-height`	The minimum height of the mobile tabs. By default, it is set to 115px. If the value falls below this, a scrollbar will appear in the options panel if there are more option sets.
`--mmq-configurator-wrapper-mobile-vertical-padding`	This value is used for setting some space at the top and bottom of the embed, preventing it from sticking to the device edges when the embed fills the whole screen.

For example, if you want to set the embed on mobile to be 400px high, with a 150px tall 3D canvas and 250px tall mobile tabs (options panel):

<style>
  :root {
    @media (max-width: 839px) {
      --mmq-canvas-height: 150px;
      --mmq-configurator-wrapper-mobile-base-height: 400px; /* the height of the option panel will be  calculated as 400px - 150px = 250px */
      --mmq-configurator-wrapper-mobile-vertical-padding: 0px; /* we reset the extra top and bottom padding */
      --mmq-mobile-tabs-min-height: unset; /* we need to unset minimal height of the tabs */
    }
  }
</style>

NOTE: use this link to see full size example

In case there is active Adjust to container option in the theme template, and product has tabs or related products under the configurator there is need to adjust the dimensions of the whole embed.

In our example we will create custom container that will take 100vh (with 3D configurator tabs and related).

<style>
  .container {
    height: 100vh; /* custom container */
  }

  mmq-embed {
    height: 100%;
  }

  #mmq-configurator-wrapper {
    height: calc(
      100vh - 645px
    ); /* height of the container minus the height of tabs and related with paddings. It may be different per scenario, tabs height, or when only tabs or related are present */
  }
</style>

NOTE: use this link to see full size example

Setting configurator dimensions in modals

You can change the size of the 3D configurator when the embed is loaded in a modal.

To control the height of the configurator modify following styles, so they suit the best your needs.

<style>
  :root {
    --mmq-sidepanel-width: 500px;
  }

  #mmq-configurator-wrapper {
    height: 65%;
  }
</style>

NOTE: use this link to see full size example

Spacing of tabs and related (sections beneath the 3D configurator) can be controlled by following CSS variables:

Name	Description
`--mmq-tabs-top-spacing`	Top spacing of tabs, by default it is set to 60px
`--mmq-related-with-tabs-padding-top`	Top spacing of related section, when tabs are visible, by default it is set to 57px
`--mmq-related-no-tabs-padding-top`	Top spacing of related section, when tabs are not visible, by default it is set to 57px
`--mmq-related-margin-bottom`	Bottom spacing of related section, by default it is set to 60px
`--mmq-tabs-no-related-bottom-margin`	Bottom spacing of tabs section, when there is no related section, by default it is set to 0px

<style>
  /* Secnario we have both tabs and related section */

  :root {
    --mmq-tabs-top-spacing: 15px // We are setting 15px gap from the 3D configurator
    --mmq-related-with-tabs-padding-top: 30px // distance between tabs and related section
    --mmq-related-margin-bottom: 15px; // bottom spacing after related section
  }

  /* Secnario there are no tabs active */

  :root {
    --mmq-related-with-no-padding-top: 15px /* 15px gap between 3D configurator and related section */
    --mmq-related-margin-bottom: 15px; /* bottom spacing after related section */
  }

  /* Scenario when there is no related section */

  :root {
    --mmq-tabs-top-spacing: 15px /* We are setting 15px gap from the 3D configurator */
    --mmq-tabs-no-related-bottom-margin: 15px; /* we are setting 15px bottom spacing on tabs section */
  }
</style>

Mobile tabs styles

You can override our default styles for the mobile tabs. There is exposed web component mmq-mobile-tabs where you can modify existing styles, or add new ones.

In this example we are making 3D canvas 100% of the device height and making the mobile tabs float.

<style>
  :root {
    @media (max-width: 840px) {
      --mmq-canvas-height: 100vh;
    }
  }

  mmq-mobile-tabs {
    min-height: unset;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
  }
</style>

NOTE: use this link to see full size example

Adjusting embed size with aspect ratio

Adjusting embed size when using custom aspect ratio rule is limited by the aspect ratio setting. However you can adjust the height of the embed with the following code:

<style>
  :root {
    --mmq-variant-ui-extra-space: 100px;
  }
</style>

The width of the embed will be adjusted automatically to mantain the aspect ratio, but the height will be limited to 100vh - 100px. It works for desktop and mobile devices.

NOTE: use this link to see full size example

Theme modifications

Configurator 3D theme can be customized by using CSS variables listed here;

<style>
  body {
    --mmq-accent-main: red;
    --mmq-button-color: red;
    /* ...etc */
  }
</style>

Quick icons

You can control the style of the icons (controls) visible on the canvas using the following variables:

Name	Description
`--quick-icon-button-bg`	Controls the background color of the quick icon (on-canvas icon buttons with controls). By default, it is controlled by the `--mmq-quick-icon-background` CSS variable, which uses the rgba format. If you prefer not to use the rgba format, use this variable.
`--mmq-quick-icon-background`	Controls the background color of the quick icon, it takes color value in rgba format, by default it is `46, 51, 65, 0.05`
`--mmq-quick-icon-button-icon-color`	Controls the color of the icon inside the button, by default it is `--mmq-grey-600` variable
`--mmq-quick-icon-button-font-size`	Controls the size of the svg icon inside the button, by default, it is 16px
`--mmq-quick-icon-button-width`	The width of the quick icon button, by default, it is 40px
`--mmq-quick-icon-button-height`	The height of the quick icon button, by default, it is 40px
`--mmq-quick-icon-button-border-radius`	The border radius of the quick icon button, by it is default 4px
`--quick-icon-button-bg-hover`	The hover background of the quick icon, by default it is `--mmq-grey-200` variable
`--quick-icon-button-color-hover`	The hover color of the quick icon, by default it is `--mmq-grey-800` css variable
`--mmq-quick-icon-button-disabled-opacity`	The opacity of the disabled button

<style>
  :root {
    --quick-icon-button-bg: green;
    --mmq-quick-icon-button-icon-color: white;
    --mmq-quick-icon-button-font-size: 25px;
    --mmq-quick-icon-button-width: 60px;
    --mmq-quick-icon-button-height: 60px;
    --quick-icon-button-bg-hover: blue;
    --quick-icon-button-color-hover: black;
    --mmq-quick-icon-button-disabled-opacity: 0.1;
  }
</style>

NOTE: use this link to see full size example

Basket CSS variables

You can control some styles of Mimeeq Cart by using CSS variables. Aside from default theme variables we also expose few basket specific ones

Generic

Name	Description
`--mmq-basket-z-index`	Z index of basket backdrop
`--mmq-basket-panel-z-index`	Z index of panel with cart items
`--mmq-font-family`	Font family to be used

Basket button

Name	Description
`--mmq-basket-btn-z-index`	Z index of button
`--mmq-basket-button-button-background`	Background color
`--mmq-basket-button-button-color`	Text color
`--mmq-basket-button-position-bottom`	Distance from bottom of the closest relative parent (by default body)
`--mmq-basket-button-position-left`	Distance from left edge of the closest relative parent (by default body)
`--mmq-basket-button-position-right`	Distance from right edge of the closest relative parent (by default body)
`--mmq-basket-button-position-top`	Distance from top of the closest relative parent (by default body)
`--mmq-basket-button-radius`	Border radious of the basket button, by default 4px 0px 0px 4px. Needs to be changed when swiching the side where basket button is being displayed
`--mmq-basket-button-icon-size`	Size of the basket icon (by default 24px)

Basket Panel

Name	Description
`--mmq-basket-panel-position-right`	Position of the basket panel, (by default 0)
`--mmq-basket-panel-position-left`	Position of the basket panel, (by default unset)
`--mmq-basket-panel-position-top`	Position of the basket panel, (by default 0)
`--mmq-basket-panel-position-bottom`	Position of the basket panel, (by default 0)
`--mmq-basket-panel-position-bottom`	Position of the basket panel, (by default 0)
`--mmq-basket-header-content-flow`	Content flow usign `flex` of the basket panel header. Useful when switching side where is the basket placed. (By default row)

Basket positioning

You can control basket widget position by modifying the CSS styles.

To display basket on the right side of the website use the following code:

<style>
  :root {
    /* Position of the basket button */
    --mmq-basket-button-radius: 0px 4px 4px 0;
    --mmq-basket-button-position-right: initial;
    --mmq-basket-button-position-left: 0;

    /* Position of the basket side panel */
    --mmq-basket-panel-position-right: unset;
    --mmq-basket-panel-position-left: 0;

    /* Flow of the title and close icon in the basket panel header */
    --mmq-basket-header-content-flow: row-reverse;
  }
</style>

NOTE: use this link to see full size example

Price Field Manipulation

You can add suffix to the price field in the 3D configurator by adding following styles:

<style>
  mmq-variant-ui::part(summary-box-price)::before /* dekstop price style  */
  mmq-variant-ui::part(price-value-field)::before /* mobile price style */ {
    content: '*';
  }
</style>

In the same way you can add suffix to the price.

::part(summary-box-price) is responsible for displaying desktop price ::part(price-value-field) is responsible for displaying mobile price

<style>
  /* Prefix the price */

  mmq-variant-ui::part(summary-box-price)::before,
  mmq-variant-ui::part(price-value-field)::before {
    content: '*';
  }

  /* Suffix the price */

  mmq-variant-ui::part(summary-box-price)::after,
  mmq-variant-ui::part(price-value-field)::after {
    content: '*';
  }
</style>

You can also do any other modifications to this elements that are possible by CSS styles modifications. There is also exposed ::part(price-container) which is responsible for displaying and positioning price on mobile.

<style>
  /* Change color of the price on desktop */

  mmq-variant-ui::part(summary-box-price) {
    color: red;
  }

  /* Change color of the price on mobile */

  mmq-variant-ui::part(price-value-field) {
    color: red;
  }

  /* Change price position on mobile */
  mmq-variant-ui::part(price-container) {
    bottom: unset;
    top: 40px;
  }
</style>

NOTE: use this link to see full size example

Tooltips

You can customize tooltips in the following way:

<style>
  div[data-tippy-root] {
    /* Set background for the tooltip */
    --mmq-primary-main: #000;

    /* Modify styles of the tooltip */
    .tippy-box[data-theme='configurator'] {
      padding: 20px;
      line-height: 20px;
      border-radius: 20px;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.15em;
    }

    .tippy-content {
      padding: 0;
    }
  }
</style>

NOTE: Tooltips are not visible on mobile view, which can load with codepen. Use this link to see full size example

You can also disable tooltips by simply adding this styles

<style>
  div[data-tippy-root] {
    display: none;
  }
</style>

Disclaimer​

Configurator dimensions​

Desktop​

Mobile​

Setting configurator dimensions with adjust to container option and tabs or related products visible​

Setting configurator dimensions in modals​

Desktop tabs and related sections spacing​

Mobile tabs styles​

Adjusting embed size with aspect ratio​

Theme modifications​

Quick icons​

Basket CSS variables​

Generic​

Basket button​

Basket Panel​

Basket positioning​

Price Field Manipulation​

Tooltips​

Disclaimer

Configurator dimensions

Desktop

Mobile

Setting configurator dimensions with adjust to container option and tabs or related products visible

Setting configurator dimensions in modals

Desktop tabs and related sections spacing

Mobile tabs styles

Adjusting embed size with aspect ratio

Theme modifications

Quick icons

Basket CSS variables

Generic

Basket button

Basket Panel

Basket positioning

Price Field Manipulation

Tooltips