【シンプルブログ複製】商品カードの見た目を変更する方法

【シンプルブログ複製】商品カードの見た目を変更する方法

  • ブログ記事をワンクリックで複製

  • 記事に動的な商品カードを簡単追加可

  • 編集は標準エディタと同じで迷いません

NEW
NEW
【シンプルブログ複製】商品カードの見た目を変更する方法

アプリの特徴

【無料プラン】
・ブログ記事の複製（月5件まで）
・ブログ記事テンプレート
・保存ビューで特定の検索条件を保存

【Proプラン】
・ブログ記事の複製無制限
・ブログ記事内に動的な商品カードを簡単追加

ブログ記事に入れた商品カードの、色・大きさ・並び方などを変える方法です。テーマエディタの設定で、お店のデザインに合わせられます。

この記事でわかること

  • 設定画面の開き方
  • 設定項目の一覧（カード・文字・ボタン）
  • カードの並び方・画像の見え方・スマートフォンでの表示
  • CSSで細かく調整するためのクラス名（CSSが分かる方向け）

操作する場所：Shopify管理画面 → アプリ → SAKUシンプルブログ複製 → ホーム「セットアップガイド」→「テーマエディタを開く」


1️⃣ テーマエディタの設定画面を開く

次のどれかの「テーマエディタを開く」をクリックします。

  • ホームの「セットアップガイド」のステップ3
  • 商品カードを挿入するページ（「段落の間に商品カードを追加」）の右側の「プレビュー」の枠
  • 「ヘルプ」画面の「テーマエディタでこれらの設定を開く」

テーマエディタの左側の「アプリ埋め込み」で、「商品カード」の設定が開きます。商品カードの機能自体の準備は「ブログ記事に動的な商品カードを設置する方法」をご覧ください。

テーマエディタの「商品カード」の設定。「カード」の項目

項目がたくさんありますが、まずは次の3つだけ変えれば十分です。①ボタンの色　②ボタンの文言　③レイアウト（横並び／縦積み）。ほかの項目は、気になったときに触ってください。色は、色の四角をクリックして選びます。


2️⃣ 「カード」の項目を変える

項目 選べる内容（最初の設定）
レイアウト 「横並び」（最初）／「縦積み」
内容の寄せ 「左寄せ」（最初）／「中央寄せ」／「右寄せ」
カードの幅 40〜100%（5ずつ）。最初は100
カードの寄せ 「左寄せ」（最初）／「中央寄せ」／「右寄せ」
画像サイズ 60〜600px（10ずつ）。最初は300
画像の比率（画像の縦横の形） 「正方形（切り抜き）」（最初）／「商品画像に合わせる」
商品画像の表示 「1枚のみ」（最初）／「複数枚（サムネイル）」
サムネイルの大きさ 24〜96px（4ずつ）。最初は36
枠線を表示する チェック。最初はオフ
枠線の太さ 0〜4px。最初は1
枠線の色 最初は薄いグレー
カードの角丸（かどの丸さ） 0〜24px（2ずつ）。最初は12
背景をテーマに合わせる チェック。最初はオン
カードの背景色 最初は白。「背景をテーマに合わせる」をオフにしたときに使われます


3️⃣ 「文字」の項目を変える

項目 選べる内容（最初の設定）
商品名の文字サイズ 12〜28px。最初は16
価格の文字サイズ 12〜28px。最初は16
文字色を指定する チェック。最初はオフ。オフのときは「オフの場合はテーマの文字色に従います。」
商品名の色 最初はほぼ黒。「文字色を指定する」をオンにしたときに使われます
価格の色 最初はほぼ黒。「文字色を指定する」をオンにしたときに使われます


4️⃣ 「ボタン」の項目を変える

項目 選べる内容（最初の設定）
ボタンの色 最初はほぼ黒
ボタンの文字色 最初は白
ボタンの角丸（かどの丸さ） 0〜24px（2ずつ）。最初は8
ボタンの文言 テキスト。空欄のときは「空欄の場合は自動（カートに追加 / Add to cart）になります。」アプリ内の「プレビュー」では、長い文言は60文字で切られて表示されます。
個数を選べるようにする チェック。最初はオフ
在庫数を表示する チェック。最初はオフ。「在庫管理しているバリエーションに「残り◯点」を表示します。」

テーマエディタの「商品カード」の設定。「文字」と「ボタン」の項目

「個数を選べるようにする」をオンにすると、カードに「−」「＋」のボタンと個数の入力欄が出ます。個数は1以上で、最大99です。在庫を管理していて、売り越しを許可していない商品は、在庫の数が上限になります。


5️⃣ 右上の「保存」をクリックする

設定を変えたら、テーマエディタの右上の「保存」をクリックします。保存すると、アプリの商品カードの挿入ページの「プレビュー」にも反映されます。範囲外の数値は、近い値に丸められます。プレビューの色が違って見えるときは、ストアの実際の記事ページで確認してください。


設定後のストア表示

  • レイアウトを「横並び」にすると、画像が左、商品の情報が右に並びます。「縦積み」では、画像の下に情報が並びます。画面の幅が520px以下（スマートフォンなど）のときは、設定にかかわらず、縦積みで表示されます。
  • 「商品画像の表示」を「複数枚（サムネイル）」にして、商品に2枚以上の画像があるときは、小さなサムネイルが並びます（最大8枚）。バリエーションに画像があるときは、バリエーションを選ぶと、メインの画像も切り替わります。
  • 価格は、お客様のテーマの言語に合わせた形（日本語なら「¥1,000」のような形）で表示されます。
  • カードは、画面に近づいてから描かれるので、記事の表示が重くなりにくくなっています。
  • 「在庫数を表示する」をオンにすると、「残り◯点」が表示されます。

CSSで細かく調整する（CSSが分かる方向け）

ここは、CSSが分かる方向けです。ふつうは読まなくても大丈夫です。

設定だけでは足りないときは、テーマエディタの「テーマ設定」→「カスタムCSS」に、次のクラスを指定して調整できます。これらのクラス名は、変更されません。

.saku-duplicate_container
.saku-duplicate_card
.saku-duplicate_media
.saku-duplicate_image_link
.saku-duplicate_image
.saku-duplicate_thumbnails
.saku-duplicate_thumbnail
.saku-duplicate_body
.saku-duplicate_title
.saku-duplicate_prices
.saku-duplicate_price
.saku-duplicate_compare_price
.saku-duplicate_variants
.saku-duplicate_button
.saku-duplicate_stock
.saku-duplicate_buy
.saku-duplicate_quantity（_minus／_input／_plus も使えます）

例：商品名を太字にしたいときは、次のように書きます。

.saku-duplicate_title { font-weight: 700; }

うまくいかないとき

  • 設定を変えたのにストアに反映されない
    テーマエディタの右上の「保存」を押したか確認してください。ページを読み込み直すと反映されます。
  • 色が変わらない
    文字の色は「文字色を指定する」をオンに、カードの背景色は「背景をテーマに合わせる」をオフにしたときに使われます。
  • カードそのものが表示されない
    「商品カードが表示されないときの確認ポイント」をご覧ください。
Read more