概要

Produce_14.mp4

設定方法

<p><img src="<https://cdn.shopify.com/s/files/1/XXXX/XXXX/XXXX/files/banner_600x600.png?v=1687474717>" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<h1 style="text-align: center;">初めてのご購入者様限定で<br />10%OFFクーポンをプレゼント!!</h1>
<p style="text-align: center;">
オンラインショップをご愛顧いただき、誠にありがとうございます。<br />
初めてのご購入者様限定限定でクーポンプレゼント企画を実施いたします。</p>
<div id="coupon-area">
<h3>今すぐ使える！クーポンコード</h3>
<ul>
<li><input type="text" value="WELCOME" /></li>
<li><a href="<https://xxx.myshopify.com/discount/WELCOME?redirect=/pages/coupon-present>">適用する</a></li>
</ul>
</div>
<script>// <![CDATA[
// Cookieから値を取得する関数
const getCookie = (name) => {
  const nameEQ = `${name}=`;
  return document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith(nameEQ))?.substring(nameEQ.length) || null;
};
const isCouponApplied = (getCookie('discount_code')== 'WELCOME');
if (isCouponApplied) {
  (document.getElementById('coupon-area')).innerHTML = `<div class="applied">クーポンが適用されました！<br>お買い物をお楽しみください</div>`;
}
// ]]></script>
<style><!--
h1 {
	text-align: center;
}
#coupon-area h3 {
	text-align: center;
	margin: 0 auto;
}
#coupon-area ul {
	display: flex;
	padding:0;
	  align-items: center;
  justify-content: center;
}
#coupon-area li {
	list-style-type: none;
	padding:0;
}
#coupon-area #copyTarget {
  font-size: 20px;
  border: solid 1px #909090;
  padding: 7px 10px;
	width: 140px;
}
#coupon-area #set-coupon {
  border: 1px solid;
  padding: 10px 15px;
  margin-left: 10px;
  background: #000;
  color: #FFF;
  border-radius: 5px;
  position: relative;
	text-decoration: none;
}
.applied {
	padding: 20px;
	margin: 0 auto;
	background-color: #FAFCCA;
	font-weight: bold;
	color: #34CF43;
	    width: fit-content;
	text-align: center;
}
--></style>