[Shopify]コピペでOK!カート追加ボタンをフッターに固定する(Debut編)
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
Shopifyで用意されているDebutテーマでは、モバイル版で商品ページを商品説明を見ながらスクロールしても、カート追加ボタンが上の方にあるので、もう一度スクロールして上まで戻る必要があります。これはユーザーフレンドリーではありません。購入するときにちょっとストレス。。。
なので、今日はモバイル版のみフッターにカート追加ボタンを固定したままにしておけるようにしました!
■Dawnバージョン
今日の商品ページレイアウト
▼バリエーションがない場合
設置手順
テーマはDebut対象です。
❶管理画面>テーマ>コードを編集
❷Templatesフォルダ直下の「新しいtemplateを追加する」をクリック
❸テンプレート作成します。
目的は「product」を選択。
名前はなんでもOKです。今回は「custom」にしました。
product.custom.liquidというファイルが生成されます。
❹Sectionsファイル直下の「新しいsectionを追加する」をクリック
❺名前に「product-template-bottom」を入れてセクションを作成。
product-template-bottom.liquidというファイルが生成されました。
❻product.custom.liquid(❸で作成したファイル)を開く
{% section 'product-recommendations' %}の下に以下のコードをコピペ(8行目)
<div class="product-bottom medium-up--hide">
{% section 'product-template-bottom' %}
</div>
❼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」を選択し保存。
これでモバイル版のフッターに表示されていると思います!テンプレートをCustomに変更している商品のみ表示されます。
▼今のところ「test」の文字しか表示されていません
上手く表示されましたでしょうか?
ここまで出来れば後はカートボタンなどを設置するだけ♪
ここからは、「product-template-bottom.liquid(❺で作成)」にこれからご紹介するコードをそのままコピペするだけです。残り1ステップ♪
テンプレートコード
※返金やサポートは対応しておりません。
続きをみるには
¥ 1,200
この記事が気に入ったらサポートをしてみませんか?