Popover Section – Crafts

09 Feb, 2022 Craft Theme 0

In the Popover section you can add the HTML code to create your own popover.

Here are two options you can choose from:

Design 1

Copy the HTML code and paste in the Popover section:

<div class="modal-body">
  <div class="modal-inner">
    <span class="close-modal">
      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17 7L7 17" stroke="#130F26" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M7 7L17 17" stroke="#130F26" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </span>
    <div class="modal-lower-info">
      <div class="upper-image ">
        <img src="https://cdn.shopify.com/s/files/1/0515/2407/5716/t/6/assets/default-image.png?v=1617099431">
      </div>
      <div class="newsletter-header-info">
        <h2>Get on the list</h2>
        <p class="dis-info-text-upper">Enter your email below to receive special offers, exclusive discounts and many more!</p>
        <div class="newsletter-form">
          <form>
            <input type="email" name="email" placeholder="Email address">
            <button type="submit"><svg width="35" height="16" viewbox="0 0 35 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M34.7071 8.70711C35.0976 8.31658 35.0976 7.68342 34.7071 7.29289L28.3431 0.928932C27.9526 0.538408 27.3195 0.538408 26.9289 0.928932C26.5384 1.31946 26.5384 1.95262 26.9289 2.34315L32.5858 8L26.9289 13.6569C26.5384 14.0474 26.5384 14.6805 26.9289 15.0711C27.3195 15.4616 27.9526 15.4616 28.3431 15.0711L34.7071 8.70711ZM0 9H34V7H0V9Z" fill="black"></path>
              </svg></button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

copy CSS code to add to your Custom CSS section:

.offer-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.offer-modal.show-modal {
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 9999;
}

.offer-modal .modal-lower-info {
  display: block;
}

.offer-modal .modal-lower-info .upper-image {
  width: 100%;
}

.offer-modal .modal-lower-info .newsletter-header-info {
  width: 100%;
  text-align:left;
}
.offer-modal .modal-lower-info .newsletter-header-info .newsletter-form{
  text-align: left;
  position: relative;
}

.offer-modal .modal-lower-info .newsletter-header-info h2 {
  font-size: 28px;
  line-height: 41px;
  margin: 25px 0 22px 0;
  text-transform: uppercase;
  font-weight: 600;
}

.offer-modal .modal-lower-info .newsletter-header-info p {
  color: #444655;
}

.offer-modal .modal-lower-info .newsletter-form input {
  background: transparent;
  padding: 8px 45px 8px 15px;
  border-radius: 4px;
  color: #5C5C5C;
  outline: none;
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  display: block;
  border-bottom: 0.5px solid #000000;
  border-radius: 0;
}

.offer-modal .modal-lower-info .newsletter-form button {
  margin: 0;
  position: absolute;
  top: 11px;
  right: 0;
}

.offer-modal .modal-lower-info .upper-image img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.offer-modal .modal-dialog {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  align-items: center;
}

.offer-modal .modal-dialog .modal-content {
  background: #fff;
  z-index: 2;
  position: relative;
  max-width: 350px;
  width: 100%;
  z-index: 99;
  text-align: center;
}

.offer-modal span.close-modal {
  position: absolute;
  top: 10px;
  right: 0px;
  cursor: pointer;
  z-index: 99;
  height: 40px;
  width: 40px;
  line-height: 56px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -o-border-radius: 40px;
  text-align: center;
}

.offer-modal:after {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 9;
}

.offer-modal .modal-dialog .modal-content .modal-body {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  padding: 60px 40px;
  overflow-y: auto;
  align-items: center;
}

.offer-modal .modal-dialog .modal-content .modal-body .modal-inner {
  width:100%;
}

Design 2

Copy the HTML code and paste in the Popover section:

<div class="modal-body">
      <div class="modal-inner">
        <span class="close-modal">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7L7 17" stroke="#130F26" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 7L17 17" stroke="#130F26" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

        </span>
        <div class="modal-lower-info">
          <div class="upper-image ">
            <img src="https://cdn.shopify.com/s/files/1/0515/2407/5716/t/6/assets/default-image.png?v=1617099431">
          </div>
          <div class="newsletter-header-info">
            <h2>Get on the list</h2>
            <p class="dis-info-text-upper">Enter your email below to receive special offers, exclusive discounts and many more!</p>
            <div class="newsletter-form">
              <form>
                <input type="email" name="email" placeholder="Email address">
                <button type="submit" class="button button rounded-b-full rounded-t-full inline-block text-base">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
        
      </div>
    </div>

copy CSS code to add to your Custom CSS section:

.offer-modal .modal-lower-info {
  display: flex;
  flex-wrap: wrap
}

.offer-modal .modal-lower-info .upper-image {
  width: 50%;
}

.offer-modal .modal-lower-info .newsletter-header-info {
  width: 50%;
  text-align: center;
  padding: 100px 45px;
}
.offer-modal .modal-lower-info .newsletter-header-info .newsletter-form{
  text-align: left;
  position: relative;
}

.offer-modal .modal-lower-info .newsletter-header-info h2 {
  font-size: 28px;
  line-height: 41px;
  margin: 25px 0 22px 0;
  text-transform: uppercase;
  font-weight: 600;
}

.offer-modal .modal-lower-info .newsletter-header-info p {
  color: #444655;
}

.offer-modal .modal-lower-info .newsletter-form input {
  background: transparent;
  padding: 8px 45px 8px 15px;
  border-radius: 4px;
  color: #5C5C5C;
  outline: none;
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  display: block;
  background: #E9EFFF;
  border-radius: 4px;
}

.offer-modal .modal-lower-info .newsletter-form button {
  margin: 20px 0 0 0;
}
.offer-modal .newsletter-form form{
  text-align:center;
}

.offer-modal .modal-lower-info .upper-image img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-modal .modal-dialog {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  align-items: center;
}

.offer-modal .modal-dialog .modal-content {
  background: #fff;
  z-index: 2;
  position: relative;
  max-width: 800px;
  width: 100%;
  z-index: 99;
  text-align: center;
}

.offer-modal span.close-modal {
  position: absolute;
  top: 10px;
  right: 0px;
  cursor: pointer;
  z-index: 99;
  height: 40px;
  width: 40px;
  line-height: 56px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -o-border-radius: 40px;
  text-align: center;
}

.offer-modal:after {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 9;
}

.offer-modal .modal-dialog .modal-content .modal-body {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  padding: 0px;
  overflow-y: auto;
  align-items: center;
}
.offer-modal .modal-dialog .modal-content .modal-body .modal-inner{
  width:100%;
}

@media screen and (max-width: 768px){
  .offer-modal .modal-dialog .modal-content {
    max-width: 500px;
  }
  .offer-modal .modal-lower-info{
    display: block;
  }
  .offer-modal .modal-lower-info .upper-image {
    width: 100%;
  }
  .offer-modal .modal-lower-info .newsletter-header-info {
    width: 100%;
    text-align: center;
    padding: 30px;
  }
  .offer-modal .modal-lower-info .newsletter-header-info h2 {
    margin: 0px 0 0 0;
  }
  .offer-modal .modal-lower-info .newsletter-header-info p{
    margin: 0 0 15px 0;
  }
}

@media screen and (max-width: 568px){
  .offer-modal .modal-dialog .modal-content {
    max-width: 360px;
    height: 550px;
  }
  
  .offer-modal .modal-lower-info {
    display: block;
  }
  .offer-modal .modal-lower-info .upper-image,
  .offer-modal .modal-lower-info .newsletter-header-info {
    width: 100%;
  }
}

You can enable the Popover settings and the Appearance settings. You can also show the popover based on the user session or once per page.

For the Appearance animation, you can choose for the normal Fade-in or the Fade-in from top or bottom.

You can choose the Popover position – center or left bottom or right bottom.

For the Popover properties, you can choose based on the time or scroll position. You can select the seconds for the time-based position and the page scroll percentage to show the popover.

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

Theme Help Centre

Popover Section – Crafts

Design 1

Design 2

Was this post helpful?