shopify、コレクションページでの記載方法について（HTML、CSS）

解決したいこと

shopify上でコレクションページを作成しようとしています。
a href で飛ばした先のsectionエリアに飛ぶと、
公開ページではsection箇所に、空白が入ったような状態になります。
解決方法を教えて下さい。

発生している問題・エラー

表記上、空白になる

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

 <a href="#test"><img src="〇〇" style="vertical-align: middle; margin-bottom: -1px;"></a>
→画像リンクをクリック

<section class="area" id="test">
<img src="〇〇"></section>

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
CSSで
margin: 0;
padding: 0;

}
:target:before {
content: "";
display: block;

で対処が出来ないか確認をしましたが対応できませんでした。
知識不足で恐縮ですがご教示頂けますと幸いです。