はじめてのShopify 既存テーマ「Dawn」をカスタマイズしてみた #1
みなさま、初めまして。
株式会社COMMAでフロントエンドエンジニアをしているのんです。
私のnoteでは、実務を元にした学びを備忘録としてここに記していこうかと思います。
自分の「わからない」は誰かの「わからない」でもあるので、
誰かの助けに少しでもなれれば幸いです。
最初の記事では、私が最近頭を悩ませていた
ShopifyのDawnというテーマを使ってカスタマイズをしていくなかで学んだことを書いていこうと思います。
Shopifyとは…そもそもなに？
簡単にいうと、オンラインストアが手軽に作れるプラットフォームです。
決済が絡んでくると1から作るのはかなり工数がかかりますし、
前提として、もちろん知識がないとサイト構築はできません。
テーマとは？
Shopifyには、ネットショップ向けに設定されたテンプレートがあります。このテンプレートのことをテーマといいます。
提供されているテーマの中には無料・有料がそれぞれあります。
色々なテーマがあるので、ぜひチェックしてみてください。
今回は、Shopify公式がイチオシしているDawn(ドーン)というテーマを使ってカスタマイズを行なっていきます。
テーマのカスタマイズを早速していく
前提として、私の場合は5割程度作業済みの
少し手のついた状態のShopifyを触ることになりました。
なので、複製してバックアップをとった状態で作業を進めて
検証などを行なっていました。
適宜状況に合わせて、バックアップなどとった上での作業をしてください。
これがデフォルト機能で無いの！？
「ここの画像をPCとSPで分けたいんだよね〜そんな機能が見当たらなくて…」という声が。
画像がPCとSPで分けられない、1番の衝撃でした。
もちろん、すべてのコンテンツにおいて分ける必要があるわけではないので、必須ではないことは理解しています。
ものによって必要では？となる部分が出てくるものだと思うので選択肢くらいは欲しかった。
なのでまずはこの機能を追加していこうと思います。
コード編集にチャレンジ
Shopifyとは主にLiquidという言語が使われて書かれているようで、
私は完全に、初めまして…という状態でした。
Liquidの基礎知識などは公式が説明しているので、気になる方はこちらをどうぞ！
全部を理解しなくても今回はなんとかなります。（なりました）
このLiquidと、CSS、JS、JSONを駆使してカスタマイズしていこうと思います。
カスタマイズしていく時の考え方
この考え方、私は作業していく上で理解できたのですがこれをもっと早く理解していれば、作り方ももう少し変わっていたかもな、と反省しています。
今回の場合はPCとSPで別の画像を表示できるようにする、というのがゴール。
でも運用のことを考えて、管理画面で設定できるようにしたほうがいいよな…と思い、これも追加しました。
この特定のページにこの機能を追加したい！と考えた時に、まず特定のページを探してそこにコードを書き込めばいいと思っていました。
その考えこそ、一番の間違いだったと気づくまでだいぶ時間がかかりました。
普通の静的Webサイトのページ作りと違い、動的なWebページはパーツやセクションで分かれており、それを追加して組み合わせていくというのがセオリー。
なので、どのページでも使える「パーツ」的なものとして考えて追加していきます。Shopify上ではセクションと呼ばれているようです。
（パーツはもっと細かい部分を指すそうです。）
Liquid
{{ 'custom-banner-layout.css' | asset_url | stylesheet_tag }}
{% liquid
assign pc_image = section.settings.image_pc
assign sp_image = section.settings.image_sp
assign image_alt = section.settings.image_alt
if image_alt == blank and pc_image != blank
assign image_alt = pc_image.alt
endif
%}
<div class="custom-banner {{ section.settings.custom_class }}">
{% for block in section.blocks %}
{% assign pc_image = block.settings.pc_image %}
{% assign sp_image = block.settings.sp_image %}
{% assign banner_link = block.settings.banner_link %}
{% assign image_alt = block.settings.image_alt %}
{% if pc_image != blank or sp_image != blank %}
{% if banner_link != blank %}
<a
href="{{ banner_link }}"
class="custom-banner__link"
{% if block.settings.open_new_tab %}target="_blank" rel="noopener"{% endif %}
{{ block.shopify_attributes }}
>
{% else %}
<div class="custom-banner__link" {{ block.shopify_attributes }}>
{% endif %}
<picture>
{% if sp_image != blank %}
<source
media="(max-width: 768px)"
srcset="{{ sp_image | image_url: width: 1600 }}">
{% endif %}
{% if pc_image != blank %}
<img
src="{{ pc_image | image_url: width: 1600 }}"
alt="{{ image_alt | escape }}"
width="{{ pc_image.width }}"
height="{{ pc_image.height }}"
loading="lazy">
{% elsif sp_image != blank %}
<img
src="{{ sp_image | image_url: width: 1600 }}"
alt="{{ image_alt | escape }}"
width="{{ sp_image.width }}"
height="{{ sp_image.height }}"
loading="lazy">
{% endif %}
</picture>
{% if banner_link != blank %}
</a>
{% else %}
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% schema %}
{
"name": "カスタムバナー",
"settings": [
{
"type": "text",
"id": "custom_class",
"label": "カスタムクラス"
}
],
"blocks": [
{
"type": "banner",
"name": "バナー",
"settings": [
{
"type": "image_picker",
"id": "pc_image",
"label": "PC画像"
},
{
"type": "image_picker",
"id": "sp_image",
"label": "SP画像"
},
{
"type": "text",
"id": "image_alt",
"label": "altテキスト"
},
{
"type": "url",
"id": "banner_link",
"label": "リンク先URL"
},
{
"type": "checkbox",
"id": "open_new_tab",
"label": "別タブで開く",
"default": false
}
]
}
],
"presets": [
{
"name": "カスタムバナー",
"blocks": [
{
"type": "banner"
}
]
}
]
}
{% endschema %}
max-widthの数値、読み込みのサイズ、CSSは適宜サイトに合わせて調整すれば使えると思います。
このあと、JSONにも書き込む必要があるのですが管理画面から追加するとJSONに勝手に追加されることに気づいたため、
管理画面から追加して確認しています。
管理画面から追加する時はpresetsで指定したnameで設定したものが出てくるので、
設定したカスタムバナーを選ぶと、PCとSPで画像が切り替えられる機能が追加できるようになります。
こんな感じで設定ができるようになります。
今回はdivタグの親要素の中に、pictureタグで画像を出すようにしました。
クラスの設定はdivタグの方につくようになっています。
altタグの設定、リンクの設定、別タブの設定もできたほうが便利かと思ったので入れています。
これで、PCとSPで別の画像を表示をする機能の完成となります。
初めてのことばかりで実作業では膨大な時間を溶かしてしまったので、未来の自分のためにも備忘録を残しておくのは大切ですね。
次回もShopifyについての記事を更新予定です。
私の所属する株式会社COMMAでは、大手企業の制作案件から、スモールブランドの広報のお手伝いまで、業種にこだわらず多様なクライアント様とお付き合いしています。
また、代理店や制作会社との協業も多く、企画・デザインのみ、サイト構築のみといった部分的な対応も柔軟にお受けいたします。
Webサイトからは過去の制作実績を掲載した会社案内をダウンロードすることが出来ます。
弊社に興味をお持ちになりましたら、下記Webサイトをご覧ください。
また、Webサイトでは、弊社代表タムラによる無料相談を受け付けています。「サイトをリニューアルしたいけれど、何から手をつければいいのか分からない」「SEO対策はどうすればいいのか」「SNSを始めてみたが、運用の方法が分からない」など、制作に関するお悩みをお持ちの方はお気軽にご相談ください。
