Please view our new guide here: Embed Menu Implementation Guide
For any issues or concerns, we kindly request that you contact our support team at help@leafly.com. They will be more than happy to assist you in resolving any problems you may encounter.
General Tips and Best Practices
Do you know if the menu update on my embed?
- Yes! Your menu will update along with your inventory on your Leafly storefront.
How can I test out the new menu first before deciding to replace my current one?
- Create a page on your website that customers can’t access through your site’s navigation. You may also want to adjust the SEO settings of the page so that it is not accessible through a Google search.
Best practices for global site header settings
- The best practice is to display your website menu on a page that has a global site header that will scroll out of view when the user moves down the page. In other words, you should avoid a global header that is fixed to the top of the page. Although your Leafly Website Menu will still be functional, a fixed header can take up valuable vertical screen space on a mobile device. Additionally, the global header may distract the user in the shopping experience, decreasing conversion.
Don’t limit the height and width of the menu
- The Leafly Website Menu size will auto-adjust its size and layout to fit mobile and desktop sizes.
- Be sure to avoid implementing the embedded menu in a way that restricts the width or height. For width, the page/section settings are recommended to be set to full width (or full bleed). The height of our menu dynamically sizes based on the amount of content of the page.
- If notice the menu is displaying too narrow, or if the content of the page is cut off at the bottom, ensure that any parent container (i.e. <div/>, list, paragraph) that you might paste the embed code into isn’t restricting the size.
Don’t add on a stand-alone page
- Linking your site directly to the URL within the code snippet will display your fully functioning menu, users will lose context when navigating.
Avoid transitions and animations
- Implementing the menu on a page that has animation or other visual effects that adjust the vertical position of the menu on the page may cause a jittery experience when scrolling the page.
Remove iframe borders in CSS
- The Leafly Website Menu is designed to feel fully integrated into your site experience. Any styles applied as a border around the menu iframe may detract from the experience.