Home

SILK Wrapper

The SILK wrapper allows Localist to apply the same header, footer, and styles to every calendar page which translates to a seamless experience for your users (they won’t even know they’re using a third party platform). The added advantage is if links change in your header and footer, you won’t need to mirror those changes in Localist; they’ll just happen.

 

In this article you’ll find:

  • Template Clean Up Steps
  • Adding Wrapper Comments
  • Configuring a SILK Wrapper in Localist
  • Customer Examples

Template Clean Up Steps

Start by identifying the wrapper source you would like to use then follow these steps:

  • Remove body content

    All content specific to the page (body) should be removed, so only the head, header and footer remain.

  • Remove title tags

    These are automatically added by Localist.

  • Remove jQuery references

    This is automatically added by Localist.

  • Remove Google Analytics reference

    This is added by Localist when you specify your UA number in Global options.

  • Make all URLs absolute

    Ensure all references to CSS, JavaScript, images, etc., use complete URLs.

  • Responsive Design

    If your wrapper does not support responsive design, you must uncheck Responsive Design in Global Options.

  • Non-absolute URLs: /external/wcpages/styles/styles.css
  • Absolute URLsyourdomain.com/external/wcpages/styles/styles.css

 

SILK Wrapper Design

What do you get when you combine your vision + our technical chops? A seamlessly branded visitor experience. Enter your email address to connect with your Customer Success Manager to learn more about our SILK Wrapper design services.

*

Adding Wrapper Comments

  • Comments must be on their own line.
  • Comments must use double dashes and not emdashes.
  • Comment names (head_tags) must remain lower case. 

Directly after the opening <head>

<!-- LOCALIST COMMENT - START head_tags -->

 

…your styles/CSS/JS/etc. will be here.

 

Directly before the closing </head>

<!-- LOCALIST COMMENT - PLACEHOLDER localist_styles -->
<!-- LOCALIST COMMENT - PLACEHOLDER localist_js -->
<!-- LOCALIST COMMENT - END head_tags -->

Directly after the opening <body>

<!-- LOCALIST COMMENT - START before_grid -->

 

your header code will start here.

 

Directly after the closing </header>

<div class="content-wrapper">

<div class="wrapper">

<!-- LOCALIST COMMENT - END before_grid -->

<!-- LOCALIST COMMENT - START body -->

<!-- LOCALIST COMMENT - PLACEHOLDER user_menu -->

<!-- LOCALIST COMMENT - PLACEHOLDER search_bar -->

<!-- LOCALIST COMMENT - PLACEHOLDER top_bar -->

<!-- LOCALIST COMMENT - PLACEHOLDER content -->

<!-- LOCALIST COMMENT - END body -->

<!-- LOCALIST COMMENT - START after_grid -->

</div>

</div>

 

…your footer code will start here.

 

Directly before the closing </body>

<!-- LOCALIST COMMENT - END after_grid -->

Configuring a SILK Wrapper in Localist

Localist automatically refreshes wrappers over night, but if you can manually deploy your changes by selecting Refresh Wrapper.

 Steps to follow:

1. In your Admin Dashboard, navigate to Settings > Appearance

2. While on the Appearance page you will see a field called SILK Wrapper URL

3. Insert the new URL

4. Save Changes

5. Click Refresh Wrapper, which will appear under the URL field.

Customer Examples