↓下図のようなレイアウトをクリエイターモード【Pursefit】の初期値のソースに追加する場合のソース例をご紹介します。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「共通<footer>」 モジュールタグ「$module.footer」
の、先頭に以下を追記（コピー＆ペースト）し保存してください。
※ショップ運営に合わせて内容を適宜変更してください
＜HTML＞▼94行
<div class="footer-guide-container">
<div id="footerGuide">
<h2>ご利用ガイド</h2>
<div class="ft-guide-outer">
<div class="ft-guide-inner">
<div class="ft-guide-section">
<h3>お支払いについて</h3>
<div class="toggle">
<p>お支払い方法は、クレジットカード、代金引換、銀行振込・郵便振込（前払い)、よりお選びいただけます。</p>
<dl>
<dt class="ft-guide-subtitle">クレジットカード</dt>
<dd>VISA・MASTER・JCB・AMERICAN EXPRESS・DINERSがご利用いただけます。<br>
（一括払いのみ申し受けます）</dd>
</dl>
<dl>
<dt class="ft-guide-subtitle">代金引換</dt>
<dd>商品ご到着時、代金をお支払いいただく方法です。<br>
お受け取りの際、宅配便のドライバーに現金にてお支払いください。<br>
※○○の代金引換サービスを利用しております。<br>
※代引手数料がかかります。</dd>
</dl>
</div>
</div>
<div class="ft-guide-section">
<h3>表示価格について</h3>
<div class="toggle">
<p>オンラインショップに記載された価格は、消費税込みの価格です。</p>
</div>
</div>
</div>
<div class="ft-guide-inner">
<div class="ft-guide-section">
<h3>配送・送料について</h3>
<div class="toggle">
<dl>
<dt class="ft-guide-subtitle">配送について</dt>
<dd>「○○運輸」にて、お届けします。<br>
ご注文後、通常約○○日程度でお届けします。<br>
※但し配送上の都合で遅れることもございますので、予めご了承ください。<br>
※商品のお届けは、日本国内に限らせていただきます。</dd>
</dl>
<dl>
<dt class="ft-guide-subtitle">お届け日時のご指定について</dt>
<dd>お届け時間帯は、下記よりご指定いただけます。<br>
<ul>
<li>午前中（8時～12時）</li>
<li>12時～14時</li>
<li>14時～16時</li>
<li>16時～18時</li>
<li>18時～20時</li>
<li>19時～21時</li>
</ul>
</dd>
</dl>
<dl>
<dt class="ft-guide-subtitle">送料について</dt>
<dd>全国一律525円となります。</dd>
</dl>
</div>
</div>
</div>
<div class="ft-guide-inner">
<div class="ft-guide-section">
<h3>商品の返品交換について</h3>
<div class="toggle">
<p>お届けした商品がお申込みと内容と異なった場合、商品をお取替えいたします。</p>
<dl>
<dt class="ft-guide-subtitle">返品・交換の期限</dt>
<dd>商品到着後○○日以内にお願い致します。</dd>
</dl>
<dl>
<dt class="ft-guide-subtitle">ご注意事項</dt>
<dd>次の商品の返品・交換は、お受けできませんのでご了承ください。<br>
<ul>
<li>お届け後日から○○日以上経過した商品</li>
<li>一度ご使用になられた商品</li>
<li>開封後の商品</li>
<li>お客様が汚損、破損された商品</li>
<li>お客様のご都合による返品、交換</li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="ft-guide-section">
<h3>個人情報について</h3>
<div class="toggle">
<p>お客様からお預かりした大切な個人情報は第三者に譲渡することは一切ございません。</p>
</div>
</div>
</div>
</div>
</div>
</div>
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」
の末尾に、以下を追記（コピー＆ペースト）し保存してください。
＜CSS＞▼82行
/*---------------------------------------
フッターご利用ガイド
----------------------------------------*/
.footer-guide-container {
width:100%;
background-color:#fff;
}
#footerGuide {
margin: 0 auto;
padding-bottom: 50px;
width: 1000px;
}
#footerGuide h2 {
border-left: 4px solid #444;
font-size: 16px;
padding: 4px 8px;
margin-bottom: 8px;
}
.ft-guide-outer{
text-align:left;
display: flex;
justify-content: space-between;
}
.ft-guide-inner li {
margin-left: 24px;
list-style-type: disc;
}
.ft-guide-inner {
width: 30%;
}
.ft-guide-inner h3 {
font-size: 15px;
padding-bottom: 4px;
margin: 32px 0 24px;
border-bottom:#ccc 1px solid;
pointer-events: none;
}
.ft-guide-subtitle {
margin: 16px 0 8px 0;
padding: 2px 8px;
border-left: #ccc 4px solid;
font-weight: bold;
}
@media screen and (max-width: 768px){
#footerGuide{
width: 95%;
padding-bottom: 10px;
}
#footerGuide .toggle{
display: none;
}
.ft-guide-inner{
width: 100%;
}
.ft-guide-inner h3 {
padding-bottom: 8px;
margin: 10px 0;
pointer-events: all;
position: relative;
}
.ft-guide-inner h3::before{
content: '';
width: 8px;
height: 8px;
border-top: solid 1px #333;
border-right: solid 1px #333;
position: absolute;
right: 10px;
top: 8px;
transform: rotate(135deg);
}
.ft-guide-inner h3.open::before{
top: 10px;
transform: rotate(-45deg);
}
.ft-guide-outer {
display: block;
}
.ft-guide-section dl{
margin-bottom:30px;
}
}
スマホでメニューを開閉するには、
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「JavaScript」
の末尾に、以下を追記（コピー＆ペースト）し保存してください。
＜JavaScript＞▼7行
//フッターご利用ガイド スマホで開閉
$(function(){
$('.ft-guide-inner h3').click(function(){
$(this).next().slideToggle();
$(this).toggleClass('open');
});
});＜関連記事＞
■makeshopサポート
クリエイターモードでフッターに「ご利用ガイド」を表示する方法