見出し画像

[Shopify]コピペでOK!カート追加ボタンをフッターに固定する(Debut編)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

Shopifyで用意されているDebutテーマでは、モバイル版で商品ページを商品説明を見ながらスクロールしても、カート追加ボタンが上の方にあるので、もう一度スクロールして上まで戻る必要があります。これはユーザーフレンドリーではありません。購入するときにちょっとストレス。。。

なので、今日はモバイル版のみフッターにカート追加ボタンを固定したままにしておけるようにしました!

■Dawnバージョン


今日の商品ページレイアウト


画像1
画像4

▼バリエーションがない場合

画像2
画像3

▪️できないこと
・バリエーションは1個まで対象です。2個以上の場合は画面途中で切れます。
・本レイアウトのフッターの高さは固定のため、変更不可です。
HTML /CSSが分かる方は、お好みで変更ください。
・Debutテーマ用で作成しています。他の無料テーマでも挿入される場合は、CSSなどを各自で調整してください。
・トップのバリエーションと数量はフッター固定エリアの数量などとは連動していません。

設置手順

テーマはDebut対象です。

❶管理画面>テーマ>コードを編集

❷Templatesフォルダ直下の「新しいtemplateを追加する」をクリック

スクリーンショット 2021-06-12 午後6.30.26

❸テンプレート作成します。

目的は「product」を選択。
名前はなんでもOKです。今回は「custom」にしました。

スクリーンショット 2021-06-12 午後6.29.47

product.custom.liquidというファイルが生成されます。

❹Sectionsファイル直下の「新しいsectionを追加する」をクリック

スクリーンショット 2021-06-12 午後6.35.57

❺名前に「product-template-bottom」を入れてセクションを作成。

スクリーンショット 2021-06-12 午後6.36.37

product-template-bottom.liquidというファイルが生成されました。

❻product.custom.liquid(❸で作成したファイル)を開く

{% section 'product-recommendations' %}の下に以下のコードをコピペ(8行目)

<div class="product-bottom medium-up--hide">
{% section 'product-template-bottom' %}
</div>
スクリーンショット 2021-06-12 午後6.49.55

❼product-template-bottom.liquidを開く(❺で作成)

ファイル内の全てを削除し、以下のサンプルコードをコピペし保存。

<style>
@media screen and (max-width:780px ) {

 .product-bottom{
     padding-top: 3vw;
     position: fixed;
     bottom: -50vw;
     background-color: #fff;
     border-top: 1px solid #dcdcdc;
     height: 80vw;
     width: 100%;
     z-index: 1;
     transition: all 1s;
 } 

}
</style>

<div class="product-template__container page-width"
 id="ProductSection-{{ section.id }}"
 data-section-id="{{ section.id }}"
 data-section-type="product"
 data-enable-history-state="true"
 data-ajax-enabled="{{ settings.enable_ajax }}"
>
 <p>test</p>
 
</div>

❽商品情報追加ページへ行き、商品ページの右下のテーマテンプレートのプルダウンから「custom」を選択し保存。

スクリーンショット 2021-06-12 午後7.07.07

これでモバイル版のフッターに表示されていると思います!テンプレートをCustomに変更している商品のみ表示されます。

▼今のところ「test」の文字しか表示されていません

画像11

上手く表示されましたでしょうか?

ここまで出来れば後はカートボタンなどを設置するだけ♪

ここからは、「product-template-bottom.liquid(❺で作成)」にこれからご紹介するコードをそのままコピペするだけです。残り1ステップ♪

テンプレートコード

※返金やサポートは対応しておりません。

続きをみるには

残り 10,586字

¥ 1,200

期間限定 PayPay支払いすると抽選でお得に!

この記事が気に入ったらサポートをしてみませんか?