FROM CACHE - jp_header

アプリを2カラム表示したい

アプリを2カラム表示したい

aoi_16
Shopify Partner
25 1 4

アプリを2カラムに表示することは可能でしょうか?

 

例えば、SNS投稿をインポートして表示するアプリがあったとして、

 

左側:アプリ | 右側:こちらが用意したテキスト

 

というレイアウトで表示させたいです。

 

=====

■コーディング例

 

HTML

<div class="warp">

 <div class="left">

   ここにアプリ(例:SNSの投稿を表示するアプリ)を表示したい

 </div>

 <div class="right">

   <h2>商品をご紹介!</h2>

  <p>{{ section.settings.text }}</p>

 </div>

</div>

 

CSS

.wrap{

 display: flex;

}

 

schema

{

 "type": "text",

 "label": "ここにテキスト",

 "id": "text"

}

※該当箇所のみ抽出し、他の記述は省略しています。

=====

 

↑細かいところは省略していますがこのようにしたいです。

 

テーマエディタでアプリブロックを追加すると1カラムになります。

Liquidで@appで呼び出すやり方を試しているのですが、書き方を間違えているのか上手くいかず…。

 

Liquidで@appでアプリを呼び出してコーディングで2カラムにするというやり方であってますでしょうか…?

Liquidでアプリを呼び出す基本の書き方はどういう書き方になりますでしょうか?

1件の返信1

株式会社フルバランス
Shopify Partner
1540 550 699

Aoi_16さま

 

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

コーディング例のご共有ありがとうございます。

 

いただいた例ですと、

.left, .right{

width:50%;

}

というCSSを追加することで2分割できるかと存じます。

 

また、アプリブロックはschemaに"type": "@app"を追加し、{% for block in section.blocks %}内で{% render block %}すると呼び出せますので、下記記事を参考にお試しいただけますと幸いです。

https://www.shopify.com/jp/blog/partner-theme-blocks


なにかヒントになりましたら幸いです。

 

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス