Convert Snippet to Image

Preview:

<!DOCTYPE html>
<html class="no-js" lang="{{ locale_name }}">
    <head>
        <title>{{ head.title }}</title>
        {{{ resourceHints }}}
        {{{ head.meta_tags }}}
        {{{ head.config }}}
        {{#block "head"}} {{/block}}

        <link href="{{ head.favicon }}" rel="shortcut icon">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script>
            {{!-- Change document class from no-js to js so we can detect this in css --}}
            document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
        </script>

        {{> components/common/polyfill-script }}
        <script>window.consentManagerTranslations = `{{{langJson 'consent_manager'}}}`;</script>

        {{!-- Load Lazysizes script ASAP so images will appear --}}
        <script>
            {{!-- Only load visible elements until the onload event fires, after which preload nearby elements. --}}
            window.lazySizesConfig = window.lazySizesConfig || {};
            window.lazySizesConfig.loadMode = 1;
        </script>
        <script async src="{{cdn 'assets/dist/theme-bundle.head_async.js' resourceHint='preload' as='script'}}"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

        <script>
            WebFont.load({
                custom: {
                    families: ['Karla', 'Roboto', 'Source Sans Pro']
                },
                classes: false
            });
        </script>


        {{ getFontsCollection }}
        {{{stylesheet '/assets/css/theme.css'}}}
        {{{stylesheet '/assets/css/vault.css'}}}
        {{{stylesheet '/assets/css/custom.css'}}}

        {{{head.scripts}}}

        {{~inject 'zoomSize' theme_settings.zoom_size}}
        {{~inject 'productSize' theme_settings.product_size}}
        {{~inject 'showAdminBar' theme_settings.show-admin-bar}}
        {{~inject 'genericError' (lang 'common.generic_error')}}
        {{~inject 'maintenanceModeSettings' settings.maintenance}}
        {{~inject 'adminBarLanguage' (langJson 'admin')}}
        {{~inject 'urls' urls}}
        {{~inject 'secureBaseUrl' settings.secure_base_url}}
        {{~inject 'cartId' cart_id}}
        {{~inject 'channelId' settings.channel_id}}
        {{~inject 'template' template}}
        {{~inject 'validationDictionaryJSON' (langJson 'validation_messages')}}
        {{~inject 'validationFallbackDictionaryJSON' (langJson 'validation_fallback_messages')}}
        {{~inject 'validationDefaultDictionaryJSON' (langJson 'validation_default_messages')}}
        {{~inject 'carouselArrowAndDotAriaLabel' (lang 'carousel.arrow_and_dot_aria_label')}}
        {{~inject 'carouselActiveDotAriaLabel' (lang 'carousel.active_dot_aria_label')}}
        {{~inject 'carouselContentAnnounceMessage' (lang 'carousel.content_announce_message')}}
    </head>
    <body>
      <!-- ACTIVE SHOPNAV DIM PAGE -->
      <div id="shopnav-dim-page" style="display: none;">
        <div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
          <div id="san"></div>
        </div>
        <div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
      </div>
      <!-- END ACTIVE SHOPNAV DIM PAGE -->
      <svg data-src="{{cdn 'img/icon-sprite.svg'}}" class="icons-svg-sprite"></svg>

      {{> components/common/header }}
      <!--{{> components/common/body }}-->
    <div class="container">
        {{{region name="add_widget_here"}}}
          {{{region name="add_Global_widget_here--global"}}}
          {{{page_content}}}
    </div>
    
    
<!--    <div class="body" data-currency-code="{{currency_selector.active_currency_code}}">-->
<!--    {{#block "hero"}} {{/block}}-->
<!--    <div class="container">-->
<!--        {{#block "page"}} {{/block}}-->
<!--    </div>-->
<!--    {{> components/common/modal/modal}}-->
<!--    {{> components/common/alert/alert-modal}}-->
<!--</div>-->



      {{> components/common/footer }}

      <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
      <script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
      <script>
          {{!-- Exported in app.js --}}
          window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
      </script>

      {{{footer.scripts}}}
  </body>
</html>
Download PNG Download JPEG Download SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter