OS2.0テーマをご利用の場合、Shopify管理画面のテーマエディタからアプリウィジェットのデザイン編集が可能です。
注意点
2022/10/22以降の仕様変更により、テーマエディタで編集可能になりました。
過去にCSSでデザイン調整をしていた場合は、そのCSSを削除してください。CSSが優先されて適用されるため、テーマエディタでの編集が反映されないことがあります。
以下の「ギフトオプションの項目」および「不要」の文言はアプリの仕様上テキスト変更ができません。
Shopify管理画面 > オンラインストア > テーマ > カスタマイズに進む
対象ページ（商品ページやカートページなど）を選択する
All in giftブロックをクリック
編集内容を設定
保存をクリックして完了です
（赤丸＝購入画面、青丸＝テーマエディタ画面
編集対象 | テキスト初期値 | 設定可能内容 |
|---|---|---|
| ー | テキスト編集・各ボタンカラー編集 |
| ギフト設定 | テキスト編集 |
| ギフト設定をキャンセルする | テキスト編集 |
| ー |
|
| 指定の住所に贈る | テキスト編集 |
| ギフト配送を希望する | テキスト編集 |
| 住所を知らない相手にeギフトで贈る | テキスト編集 |
| 贈り主の名前を入力してください | ラベル編集 |
| お届け方法 | テキスト編集 |
| 相手の住所を知らなくても、ギフトを贈れるサービスです。購入後に発行される、受け取り用のURLをLINEやSNSなどを使ってお相手にお送りください。 | テキスト編集 |
| ー | 編集可 |
| OFF | 有効/無効切替 ※OFFの場合は主要ボタンの色が適用されます |
| ON | 有効/無効切替 ※ギフト商品ページに通常商品が掲載されている場合はONにしてください |
| ー | 不要パーツの非表示設定 |
・lisオリジナルカラーというのは ↓ の色を指します。 OFFの場合は主要ボタンの色が適用されます。
商品ページに実装
<div
class="sns-gift-product-container"
data-original-color-enable="false"
data-primary-button-text-color="#FFFFFF"
data-primary-button-color="FFFFFF"
>
</div>カートページに実装
<div
class="sns-gift-new-cart-container"
data-original-color-enable="false"
>
</div>eギフトを選択した際、テーマ側のカートボタンや数量カウンターなどが表示される場合があります。これらの要素は 注文に反映されないため、必ず非表示設定 を行ってください。
補足
eギフトの日時指定は「受け取り者」が設定します。
そのため、購入画面に日時指定ウィジェットがある場合も非表示にしてください。
非表示対象 | クラス名 / ID名 | 設定方法 / 備考 |
|---|---|---|
カートボタン | .product-submit.action-button | 全テーマ共通 |
数量カウンター / メモ欄 | テーマごとに異なる | Chromeの検証ツールで確認 |
定期購買アプリ | .huckleberry-subscription-widget-container | 定期購買アプリ使用時のみ |
キャンセルボタン | data-hide-cancel-button="true" | All in giftタグに属性追加 |
お届け方法テキスト | data-hide-header-text="true" | All in giftタグに属性追加 |
指定の住所に贈るラジオボタン | data-hide-general-gift-radio="true" | All in giftタグに属性追加 |
ポイント
ID名の先頭に「#」を付ける
クラス名の先頭に「.」を付ける
複数の場合は「,」で区切る
All in giftのタグに属性として以下を追加してください。
商品ページにてキャンセルボタンを非表示にしたい場合
指定したクラス名やID名には
visibility: hiddenが適用されます。この場合、要素は見えませんが空白として残ります。
テーマ側で JavaScript を利用し、visibility: hidden を検知して display: none を追加してください。※必ず複製テーマで動作確認を行ってください。
例： .product-form__submitの部分に非表示対象のクラス名やid名が入ります。
<script>
document.addEventListener('DOMContentLoaded', () => {
const submitButton = document.querySelector('.product-form__submit');
if (submitButton) {
const callback = (mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
const styles = window.getComputedStyle(submitButton);
if (styles.visibility === 'hidden') {
submitButton.style.display = 'none';
} else {
submitButton.style.display = 'block';
}
}
}
};
const observer = new MutationObserver(callback);
observer.observe(submitButton, { attributes: true, attributeFilter: ['style'] });
}
});
</script>