如何將代碼添加到shopify頁面

Question

如何在Shopify商店中的多個Shopify頁面中的僅一箇中添加如下https://codepen.io/fjenpen/pen/pROPov之類的代碼而不破壞現有主題？

<div class="top"></div> 
<div class="bg"> 
<div class="nav"> 
<ul id="menu" style="list-style-type: none;"> 
<!-- Give your href some actual meaning --> 
<li><a href="#Section1" style="text-decoration:none"><h1>Our Brands</h1></a> </li> 
    </ul> 
</div> 

<div class="main"> 
<div id="Section1" class="content"> 

<p>View our brands</p> 
</div> 

Answer 1

導航到Online Store > theme & edit HTML/CSS of current active theme 從你鏈接的筆，你有一個要求添加HTML，CSS & JS。

1. HTML

   • 爲HTML看起來所需區域的液體模板，你可以添加HTML。您可能想要創建片段幷包含。使用語言翻譯而不是裸文本。

2. CSS

   • 外觀爲主題的css文件，它通常是「xxxxx.scss.css`文件。你可以在那裏添加你的css部分或者創建另一個css文件，幷包含theme.liquid模板。

3. JS

   • 像CSS的類似，創建一個新的js文件或者去與主題JS增加。與js最好創建新的js幷包含theme.liquid。

我建議你先熟悉的主題文件，那麼你會得到知道事情是如何一起工作。祝你好運。