カラーミーショップ

『カラーミーショップ』お気に入り機能♡ボタンの設置方法と利点を解説!

タヌキ
タヌキ
おはようございます!こんにちは!こんばんは!
タヌキです。杉本園の長男坊では決してない。

今回はネットショップについて書いていきます。
杉本園のネットショップは『カラーミーショップ』を利用させて貰ってます😊
今回はお気に入り機能を簡単に解説していこうと思います。

お気に入り機能って何???


お気に入り機能は商品を登録すれば、次回買うときに簡単に探せる機能です。

最初から機能が付いてるテンプレートもありますが、付いていない物が殆どです。
欲しい方は自分で付けましょう!!😆

お気に入り機能の欠点

お気に入り商品はパソコン毎に登録されます。
今までパソコンで注文していて、次にスマホで注文しようとしたときに『あれ?お気に入り商品が無い!?』ってことになります😅

無農薬茶の杉本園のお気に入りボタン設定


杉本園のお気に入り機能データになります。
♡マークで可愛くなっています。

利用中のテンプレートは有料テンプレートのMODEを利用しています。
レスポンシブテンプレートになります。

基本丸コピーでOK!

フリーページ

お気に入り登録した商品を見る事が出来るページです。
フリーページを新しく作って下さい。

URL内の(あなたのID)をご自分のIDに変更して下さい。

<div class=”free_space”>
<h1 class=”info_heading heading free_kizi”>お気に入り一覧</h1>
20点まで登録可能です。<i class=”fas fa-heart”></i>を押すと解除できます。
<div style=”text-align: center;margin-top: 20px;”>
<ul class=”row unstyled favorite_lists”>
<{section name=num loop=$favorite}>
<li class=”col col-sm-6 col-lg-4 favorite_list” style=”margin-bottom: 40px;”>
<{* ↓↓↓———- PCハート ———-↓↓↓ *}>
<div class=”product-list__fav-items heart_pc hidden-phone”>
<button type=”button” class=”favorite-button” <{favorite_button_attribute product_id=$favorite[num].id added_class=”fav-items”}>>
<svg role=”img” aria-hidden=”true”><use xlink:href=”#heart”>
</use></svg></button></div>
<{* ↓↓↓———- スマホハート ———-↓↓↓ *}>
<div class=”product-list__fav-items heart_fav hidden-desktop”>
<button type=”button” class=”favorite-button” <{favorite_button_attribute product_id=$favorite[num].id added_class=”fav-items”}>>
<svg role=”img” aria-hidden=”true”><use xlink:href=”#heart”>
</use></svg></button></div>
<a href=”<{$favorite[num].link_url}>”>
<{if $favorite[num].img_url != “”}>
<img src=”<{$favorite[num].img_url}>” alt=”” class=”show item_img” />
<{else}>
<img src=”https://img.shop-pro.jp/tmpl_img/76/noimage.png” alt=”<{$favorite[num].name}>” class=”show item_img” />
<{/if}>
</a>
<a href=”<{$favorite[num].link_url}>” class=”syokaitop”>
<span class=”item_name show”><{$favorite[num].name}></span>
</a>
<{if $favorite[num].soldout_flg == false}>
<{if $members_login_flg == true && $favorite[num].discount_flg == true}>
<span class=”item_regular_price show”><{$favorite[num].regular_price}></span>
<{/if}>
<{if $members_login_flg == true && $favorite[num].discount_flg == true}>
<span class=”item_price item_price_discount show”><{$favorite[num].price}></span>
<span class=”item_price item_price_discount show”>[&nbsp;<{$favorite[num].discount_rate}>OFF&nbsp;]</span>
<{else}>
<span class=”item_price show”><{$favorite[num].price}></span>
<{/if}>
<{else}>
<span class=”item_soldout show”>SOLD OUT</span>
<{/if}>
<p style=”margin-bottom: 10px”></p>
<{* ↓↓↓———- PC購入フォーム ———-↓↓↓ *}>
<div class=”cart_input hidden-phone”><span class=”cart_input2″><script type=’text/javascript’ src=’https://(あなたのID).shop-pro.jp/?mode=cartjs&pid=<{$favorite[num].id}>&style=standard&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n’  charset=’euc-jp’></script></span></div>
<{* ↓↓↓———- スマホ購入フォーム ———-↓↓↓ *}>
<div class=”cart_input hidden-desktop”><span class=”cart_input3″><script type=’text/javascript’ src=’https://(あなたのID).shop-pro.jp/?mode=cartjs&pid=<{$favorite[num].id}>&style=standard&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n’  charset=’euc-jp’></script></span></div>
</li>
<{/section}>
</ul></div>
</div>

共通-CSS編集

CSSは共有に入れて下さい。
位置ズレなどは自分で調整して下さい。

/*お気に入り詳細*/
.heart_pc {
position: absolute;
display: block;
z-index: 5;
margin: 0 0 0 190px;
}
.heart {
position: absolute;
display: block;
z-index: 5;
margin: 0 0 0 80%;
}
.heart_fav{
position: absolute;
display: block;
z-index: 5;
margin: 0 0 0 37%;
}
.product-list__fav-items {
width: 30px;
}
.product-list__fav-items button {
display: block;
width: 100%;
padding: 5px 0;
cursor: pointer;
transition: .2s;
text-align: center;
color: #888;
border: 0;
outline: none;
background: transparent;
}
.product-list__fav-items .fav-items {
color: #ff7373;
}
.product-list__fav-items svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* お気に入りハートマーク */
.product__fav-item {
margin-top: 10px;
margin-bottom: 10px;
}
.product__fav-item button {
padding: 0;
cursor: pointer;
transition: .2s;
color: #999;
border: 0;
outline: none;
background: transparent;
}
.product__fav-item .fav-items {
color: #ff7373;
}
.product__fav-item svg {
width: 20px;
height: 20px;
vertical-align: -.35em;
fill: currentColor;
}

トップページ&商品一覧-HTML編集

トップページと商品一覧へ個々に設置して下さい。
商品画像の右上に設置する形になります。
位置ズレは『共通-CSS編集』で編集して下さい。

<{* ↓↓↓———- PCハート ———-↓↓↓ *}>
<div class=”product-list__fav-items heart_pc hidden-phone”>
<button type=”button” class=”favorite-button” <{favorite_button_attribute product_id=$recommend[num].id added_class=”fav-items”}>>
<svg role=”img” aria-hidden=”true”><use xlink:href=”#heart”>
</use></svg></button></div>
<{* ↓↓↓———- スマホハート ———-↓↓↓ *}>
<div class=”product-list__fav-items heart hidden-desktop”>
<button type=”button” class=”favorite-button” <{favorite_button_attribute product_id=$recommend[num].id added_class=”fav-items”}>>
<svg role=”img” aria-hidden=”true”><use xlink:href=”#heart”>
</use></svg></button></div>

商品詳細-HTML編集

『カートに入れる』ボタンの下辺りに配置すると見やすいと思います。

<!– // お気に入りボタン –>
<div class=”product__fav-item”>
<button type=”button” class=”favorite-button” <{favorite_button_attribute product_id=$product.id added_class=”fav-items”}>>
<svg role=”img” aria-hidden=”true”><use xlink:href=”#heart”></use></svg>
お気に入り
</button>
</div>

お気に入り機能♡ボタンのまとめ

下記のカラーミショップ公式ページにも詳しく書いてあります。
↓↓↓↓↓
https://shop-pro.jp/yomyom-colorme/57995

わからない事などありましたら、コメントなど頂けると幸いです。
ただ自分もあまり詳しくないので、答えられたら……になります!😅
宜しくお願い致します。

ABOUT ME
お茶畑のタヌキ
お茶畑のタヌキ
お茶畑横の森林に暮らすタヌキ。
信楽焼に見えるがタヌキである。
杉本園の長男坊では決してない。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA