Customizing CSS styles

Any styling of our widgets can be changed via CSS to better match your website. To isolate our styles from your website's styles, we often use iframes, which is why we have provided a convenient way for you to add your own custom CSS.

How to customize styling

  • Navigate to App > Styling on your dashboard.
  • If you have your own CSS file you'd like to use (or external files like Typekit or Google fonts), you can link it in External CSS.
  • If you'd rather add your CSS inline, you can use the Inline CSS field.

Hints:

  • Styles are applied only to the parts of the widget that are within the iframes. If you'd like to style the widget's containers, use your own CSS from your own site.
  • If you'd like to apply CSS changes to elements, it's a good idea to use classes that start with a zenlocator- prefix. Do not use generated classes (eg: cnEeRY or sc-TOsTZ) as those will often change when we do builds. Also try to avoid using tag names (h1 , span , etc) as those could change as well.
  • When you see classnames like zenlocator-location-6m9554w7 or zenlocator-product-zr68acb2 that means those classes refer to a specific object. In this case they refer to a specific location record and a specific product record, respectively. Those are good to use if you'd like to apply CSS to individual objects.
  • We try to avoid using !important keyword to keep styles clean. However, you're more than welcome to use !important to increase specificity of your own styles.
  • We don't recommend resizing iframes or their parent elements with CSS. We apply iframe dimensions programmatically which could break your styles.

Please note that as we push widget updates, while we do try to be careful, some markup might change, which could affect your custom styles.