shopify 二次开发 添加优惠弹框（折扣码弹框）

摘要

本文主要教shopify商家如何给自己的商店添加优惠弹框，所以本文我直接提供代码，不讲解代码上的知识点（有些主题是带有优惠弹框的，你可以先检查一下自己的主题是否带有优惠弹框功能，如果没有再通过本文添加）。如果你需要一些 特别的功能或者修改样式等 你也可以与我联系

优惠弹框弹框

效果图

可编辑功能

添加代码

步骤一：打开编辑代码

步骤二：在 sections 目录下新建 coupon-dialog.liquid 文件

步骤三：写入 coupon-dialog.liquid 文件的代码

coupon-dialog.liquid 代码

{% if section.settings.masklayer_swtach %}<!-- 优惠弹框 --><div id="couponDialog"> <div >  <div ><div > <div >  {% if section.settings.masklayer_info %}  <h3 >{{ section.settings.masklayer_info }}  </h3>  {% endif %}  {% if section.settings.masklayer_image %}  <div ><img src='/images/loading.gif' data-original="{{ section.settings.masklayer_image | img_url: '600x' }}" >  </div>  {% endif %}  {% if section.settings.masklayer_code != '' %}  <h4 >{{ section.settings.masklayer_code }}  </h4>  {% endif %}  {% if section.settings.masklayer_btn != '' %}  <div >{{ section.settings.masklayer_btn }}  </div>  {% endif %} </div></div><span > <svg t="1607667093846" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4228" width="30" height="30"><path d="M512 0a512 512 0 0 0-512 512 512 512 0 0 0 512 512 512 512 0 0 0 512-512 512 512 0 0 0-512-512z" fill="#000000" p-id="4229"></path><path d="M717.165714 306.176a35.986286 35.986286 0 0 0-50.834285 0.146286L512 461.019429 357.668571 306.322286a35.986286 35.986286 0 0 0-50.980571 50.761143L461.165714 512 306.688 666.916571a35.986286 35.986286 0 0 0 50.980571 50.761143L512 562.980571l154.331429 154.843429a35.693714 35.693714 0 0 0 50.834285 0.073143 35.986286 35.986286 0 0 0 0.146286-50.907429L562.834286 512l154.331428-154.916571a35.913143 35.913143 0 0 0 0-50.907429z" fill="#FFFFFF" p-id="4230"></path></svg></span>  </div> </div></div><style> .coupon-dialog{  display: none;  width: 100%;  height: 100%;  position: fixed;  left: 0;  top: 0;  z-index: 1000;  background-color: rgba(0,0,0,0.5); } .coupon-dialog__flex {  width: 100%;  height: 100%;  display: flex;  justify-content: center; } .coupon-dialog__box {  width: 500px;  align-self: center;  background: {{ section.settings.mask_background_color }};  position: relative;  padding: 12px;  max-width: 90%; } .coupon-dialog__wraper{  height: 100%;  border: 2px dashed {{ section.settings.border_color }}; } .coupon-dialog__inner-box{  width: 90%;  text-align: center;  margin: 15px auto; } .coupon-dialog__title{  font-size: 26px;  font-weight: bold;  line-height: 1.25em;  margin: 0;  color: {{ section.settings.mask_txt_color }};  border: none; } .coupon-dialog__subtitle{  font-size: 18px;  font-weight: normal;  line-height: 18px;  margin-bottom: 12px;  color: {{ section.settings.mask_txt_color }};  border: none; } .coupon-dialog__code{  font-family: Arial, Helvetica, sans-serif;  border: 1px solid;  font-size: 18px;  font-weight: bold;  text-transform: uppercase;  padding: 8px 16px;  color: {{ section.settings.mask_txt_color }};  border-color: {{ section.settings.mask_txt_color }};  background-color: {{ section.settings.button_background_color }};  margin: 0 10px; } .coupon-dialog__btn-close{  position: absolute;  top: -18px;  right: -18px;  width: 36px;  height: 36px;  cursor: pointer;  z-index: 118040;  background-position: 0 0;  font-size: 0;  background-color: transparent;  background-size: 44px 152px; }</style><script> (function(){  var close = document.getElementsByClassName('coupon-dialog__btn-close')[0];  function setCookie(name, value, expires) {var _expires = "";expires && (_expires = new Date, _expires.setTime(_expires.getTime() + 864E5 * expires), _expires = "; expires\x3d" + _expires.toUTCString());document.cookie = name + "\x3d" + value + _expires + "; path\x3d/"  }  function getCookie(cname) {var name = cname + "=";var decodedCookie = decodeURIComponent(document.cookie);var ca = decodedCookie.split(';');for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') {  c = c.substring(1); } if (c.indexOf(name) == 0) {  return c.substring(name.length, c.length); }}return "";  };if (getCookie("coupondialog")) {couponDialog.style.display = "none";  } else {document.documentElement.style.overflowY = 'hidden'; couponDialog.style.display = "block";close.onclick = function () { couponDialog.style.display = "none"; setCookie("coupondialog", "coupon", 1); document.documentElement.style.overflowY = 'scroll'; }  } })();</script>{% endif %}{% schema %} { "name": "优惠弹框", "settings": [ {  "type": "paragraph",  "content": "您可以编辑促销的详细信息" }, {  "type": "checkbox",  "id": "masklayer_swtach",  "label": "启用优惠弹框",  "default": false }, {  "type": "text",  "id": "masklayer_info",  "label": "标题",  "default": "Get $5 off your first order" }, {  "type": "text",  "id": "masklayer_code",  "label": "字幕",  "default": "Coupon Code" }, {  "type": "image_picker",  "id": "masklayer_image",  "label": "图片" }, {  "type": "text",  "id": "masklayer_btn",  "label": "优惠码",  "default": "XXXX" }, {  "type": "color",  "id": "mask_txt_color",  "label": "文本颜色",  "default": "#000000" }, {  "type": "color",  "id": "mask_background_color",  "label": "背景颜色",  "default": "#F6B1C3" }, {  "type": "color",  "id": "border_color",  "label": "单色边框颜色",  "default": "#A20D1E" }, {  "type": "color",  "id": "button_background_color",  "label": "按钮背景色",  "default": "#ffffff" } ]}{% endschema %} 

将上方代码复制到 coupon-dialog.liquid 里面，并保存

步骤三：在 theme.liquid 的 </body> 上方引入 coupon-dialog

打开 theme.liquid 并在底部找的 </body>

在 </body> 上方添加 {% section 'coupon-dialog' %} 并保存

{% section 'coupon-dialog' %} 

至此 代码就已经添加完成了，接下来就是如何使用了

使用优惠弹框

使用也比较简单，大家多做测试即可

结语

感谢你查阅本文，希望本文能够为你提供帮助，如果你有需要可以与我联系，谢谢

（来源：baymax）

原标题：shopify 二次开发 添加优惠弹框（折扣码弹框）

关键词：