通过提供快速复制折扣码的功能,可以提高用户的转化率。传统的折扣码使用需要在后台设置,然后手动复制粘贴到前台,给用户带来不便。我们让用户只需点击”copy”即可快速复制折扣码,从而节省用户的操作时间,提高用户下单的效率,进而提高转化率。
1.创建折扣码
2.创建Custom liquid区块
在shopify模版里面找到default product-Add Block，添加shopify liquid
3.复制下面代码到shopify liquid
<style><!--
.coupon-code {
background-color: #7d4f42;
background-position: center;
border-radius: 6px;
padding: 6px 15px;
/*margin: 1rem 0;*/
margin: 8px 0;
margin-bottom: 20px;
max-width: fit-content;
font-size: 1.2rem;
}
@media screen and (max-width: 768px) {
.coupon-code {
margin-right: auto;
margin-left: auto;
}
}
--></style>
<div class="product__policies rte small--text-center">
<div class="coupon-code"><span style="margin-bottom: 10px; color: #fff;">★ Save Extra 10% with ★ : </span> <span id="cupon-code" style="color: #fff; display: inline-block; font-weight: 500;">christmas25</span> <span style="border: solid 1px; display: inline-block; border-radius: 4px; margin-left: 3px; margin-right: -3px; padding: 2px 9px; background-color: #fff6bd;" id="cupon-code_button" onclick="copyCoupon()">Copy</span></div>
<small style="font-size: 0.75rem;" class="discount-code">
<script type="text/javascript">// <![CDATA[
function copyCoupon() {
let discountCode = document.getElementById("cupon-code").innerText;
let input = document.createElement('input');
input.setAttribute('id', 'copyInput');
input.setAttribute('value', discountCode);
document.getElementsByTagName('body')[0].appendChild(input);
document.getElementById('copyInput').select();
if (document.execCommand('copy')) {
let copied = document.getElementById('cupon-code_button');
copied.innerHTML = "Copied!";
}
document.getElementById('copyInput').remove();
}
// ]]></script>
</small></div>替换掉代码里面的折扣码“christmas25”变成你自己的折扣码即可完成。
★ Save Extra 10% with ★ 这段文案你也可以修改成★ Limited Coupong ★通过文案“限时折扣”提高客户的紧张感