我正在定制 Shopify 的“首次亮相”主题，从现有的“精选系列”创建一个可定制的主页部分。该部分的基本格式是来自所选系列的 4 张横向产品图像，标题和价格位于照片下方。在价格下方，我希望能够从 .png 资产文件中添加一个自定义的“添加到购物车”按钮，该文件在每个单独的产品图片下排列。
到目前为止，我已经使用此代码片段将我的 4 个自定义按钮放置在页面上，但我无法让它们正确格式化，因此它们在每张照片的标题和价格下完美排列：
DF %>%
filter(rowSums(select(., starts_with('PCS')) < 0.03) > 0)
这是原始代码，似乎是网格中显示的产品图片、标题和价格：
<div>
<a href=“#”><img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
<a href=“#”><img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
<a href=“#”><img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
<a href=“#”><img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
</div>
我怎样才能实现这种布局？让图片按钮自动显示在该部分中的所有产品下方也非常有用，以防在下方添加另一行 4。
非常感谢任何帮助。