{%- assign Name = "Ecomus" -%}{%- assign name = "ecomus" -%}
<style>  #purchase_codet4 {    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    z-index: 100000;    display: flex;    align-items: center;    justify-content: center;    flex-direction: column;    text-align: center;    padding: 5%;    background: #fff;    font-size: 13px;    color: #5c6ac4;    font-weight: 400;  }  #purchase_codet4 h2 {    font-weight: 700;    line-height: 1.1;    font-size: 40px;    margin: 0 0 10px;    color: #000639;  }  #purchase_codet4 a {    color: #222;  }  #purchase_codet4:not(.hidden):not(.hide) {    display: flex !important;  }  @media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1025px){    .admin_t4_tools__item:hover{      border-left-color: #008060;      background-color: #f0f1f2;      color: #212326;    }    .admin_t4_tools_btn:hover{      background-color: #004c3f;      color: #ffffff;      border-color: #fff;    }  }  #purchase_codet4 {    overflow-y: auto;    text-align: left;    --text-color: #000;    --heading-color: #000;    color: var(--text-color);    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";  }  #purchase_codet4 .content {    max-width: 1000px;    display: flex;    justify-content: center;    flex-wrap: wrap;    gap: 19px;    overflow-y: auto;  }  #purchase_codet4 .content > *{    flex-shrink: 0;    width: 100%;    max-width: 100%;  }  #purchase_codet4 * {    letter-spacing: normal;  }  #purchase_codet4 .step-1, #purchase_codet4 .step-2 {    padding: 16px;    border-radius: 12px;    background: #fff;    box-shadow: 0px 1px 0px 0px rgba(26, 26, 26, 0.07), 0px 1px 0px 0px rgba(204, 204, 204, 0.50) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset;  }  #purchase_codet4 ul {    list-style: initial;    padding-inline-start: 30px;    margin-bottom: 10px;  }  #purchase_codet4 li {    font-size: 14px;  }  #purchase_codet4 li p {    margin-bottom: 5px;  }  #purchase_codet4 .install-app {    padding: 10px;    background: #5c6ac4;    margin-bottom: 30px;    display: inline-block;    color: #fff;    text-decoration: none;  }  #purchase_codet4 .call-to-action {    text-align: left;  }  #purchase_codet4 a {    color: #5c6ac4;    position: relative;    text-decoration: underline;  }  #purchase_codet4 .recomen-app {    display: flex;    justify-content: center;    margin-top: 20px;    flex-wrap: wrap;  }  #purchase_codet4 .recomen-img {    flex-shrink: 0;    width: 30%;    max-width: 248px;    position: relative;  }  #purchase_codet4 .recomen-img:after{    content: "";    padding-bottom: 77.82%;    width: 100%;    display: block;  }  #purchase_codet4 .recomen-img img {    position: absolute;    border-radius: 12px 0 0 12px;    object-position: center;    object-fit: cover;    width: 100%;    height: 100%;  }  #purchase_codet4 .recomen-info {    text-wrap: pretty;    flex-shrink: 0;    width: 70%;    max-width: 458px;    padding: 16px;    border-radius: 0 12px 12px 0;    background: #fff;    box-shadow: 0px 1px 0px 0px rgba(26, 26, 26, 0.07), 0px 1px 0px 0px rgba(204, 204, 204, 0.50) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset;  }  #purchase_codet4 .recomen-info .recomen-btn{    color: #222;    font-weight: 500;    padding: 3px 10px;    display: inline-block;    text-decoration: none;    margin-top: 10px;    border-radius: 5px;    background: #fff;    box-shadow: 0px 1px 0px 0px rgba(26, 26, 26, 0.07), 0px 1px 0px 0px rgba(204, 204, 204, 0.50) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset;  }  @media (max-width: 575px){          #purchase_codet4 .recomen-img,    #purchase_codet4 .recomen-info {      width: 100%;      max-width: 100%;    }    #purchase_codet4 .recomen-img img {      width: 100%;      border-radius: 12px 12px 0 0;    }    #purchase_codet4 .recomen-info {      border-radius: 0 0 12px 12px;    }  }</style>
<template id="t4s-temp-key-active">
  <div class="content">
    <div style="text-align: center">
      <h3 style="font-weight: 800;">Welcome to {{ Name }} 🎉 </h3>
      <p>Follow these simple steps to activate your theme & get started:</p>
    </div>
    <div class="step-1" style="flex: 1 0 0%;">
      <h4 style="font-weight: 700;font-size: 14px;margin-bottom: 5px;">Step 1: Activate theme</h4>
      <ul>
        <li><p>Go to "Theme Settings" &gt; "Theme Activate"</p></li>
        <li><p>Enter your theme purchase code (license code) and save it </p></li>
      </ul>
      <p>👉 See detailed guide here <a href="https://cdn.shopify.com/s/files/1/0715/0505/1965/files/active.png" target="_blank"> (https://cln.sh/m2PCbz8h)</a></p>
    </div>
    <div class="step-2" style="flex: 1 0 0%;">
      <h4 style="font-weight: 700;font-size: 14px;margin-bottom: 5px;">Step 2: Import theme demos in a click</h4>
      <ul>
        <li><p style="margin-bottom: 10px; line-height: 1.5;">Simply <a href="https://kits.ecomrise.app/install?utm_source=the4-{{ name }}&utm_medium=intheme&utm_content=theme-activate" target="_blank" rel="noopener noreferrer">install EcomRise (FREE)</a> to import demos and update the latest theme versions in the future, with just a single click. (Otherwise, you will need to import demos using JSON codes, which is much more complex & time-taking)</p></li>
      </ul>
      <p style="margin-bottom: 10px;">👉 See detailed guide here <a href="https://support.the4.co/articles/import-demo#1-one-click-demo-import-with-ecomrise" target="_blank"> (https://support.the4.co/articles/import-demo#1-one-click-demo-import-with-ecomrise)</a></p>
    </div>    
    <div class="recomen">
      <h4 style="font-weight: 700;font-size: 20px;margin-bottom: 5px; margin-top: 30px;text-align: center">Recommended app:</h4>
      <div class="recomen-app">
        <div class="recomen-img">
          <img src="https://cdn.shopify.com/s/files/1/0820/6975/0064/files/inte1.png?v=1702540680&width=575" alt="EComposer Page Builder" width="248" height="193">
        </div>
        <div class="recomen-info">
          <p style="margin-bottom: 5px;line-height: 1.5;"><strong style="font-weight: 700">EComposer Page Builder - an advanced design tool for your website (drag-drop editor, 300+ pre-made templates, 20+ boost sales add-ons)</strong></p>
          <p style="font-size: 12px;margin-bottom: 0; line-height: 16px;">🔥 Special offer: Install EComposer <a href="https://ecomposer.app/install?utm_source={{ Name }}&utm_medium=activate-{{ name }}" target="_blank">HERE</a>. Then open chatbox icon in EComposer and leave a message with subject "{{ Name }}+EComposer" to upgrade EComposer Standard Plan for Free 6 months (Save $114)</p>
          <a class="recomen-btn" href="https://ecomposer.app/install?utm_source={{ Name }}&utm_medium=activate-{{ name }}" target="_blank">Install EComposer</a>
        </div>
      </div>
    </div>
  </div>
</template>