2024 Shopify 網站設計教程 - 逐步指南

By Metics Media · 2023-12-11

這段影片將逐步向您展示如何設計 Shopify 商店。建議使用推薦連結以延長免費試用期。透過影片描述下方的步驟,您可以快速尋找所需內容。

設計Shopify商店的步驟

  • 這段影片將逐步向您展示如何設計Shopify商店。

  • 首先,您需註冊Shopify帳號,建議使用指南中的推薦連結以延長免費試用期。

  • 影片將指導您如何透過Shopify編輯器建立設計出色的商店。

  • 透過影片描述下方的步驟,您可以快速尋找所需內容。

  • 讓我們不浪費時間,直接進入教學吧。

設計Shopify商店的步驟
設計Shopify商店的步驟

建立 Shopify 帳戶

  • 這個優惠讓你只需每月 $1,就能額外使用三個月的 Shopify,享有所有功能。

  • 這是一個絕佳的優惠,讓你有足夠時間準備開啟你的商店。

  • 在進入頁面後,輸入你的電郵地址,然後點擊「開始免費試用」。

  • 接下來,根據你的業務或店舖類型回答一些問題,但其實不論你如何回答,我們都得到相同的 Shopify 版本。

  • 點擊底部的「跳過所有步驟」,選擇你的國家,然後點擊「下一步」。

  • 你可以選擇使用 Apple、Facebook 或 Google 帳戶,或者使用電郵註冊 Shopify 帳戶。

  • 設定密碼後,點擊「建立 Shopify 帳戶」,此時你的 Shopify 商店便已建立完成,進入了 Shopify 的儀表板。

建立 Shopify 帳戶
建立 Shopify 帳戶

設計你的商店

  • 首先要做的事情是啟用為期3個月的延長試用期,要做的是去右下角點擊這個黑色框,然後點擊選擇方案。

  • 基本方案起初將是足夠的,我們可以看到首3個月每月1美元的價格。

  • 然後,我們可以開始設計我們的商店,首先要做的是為我們的商店選擇一個主題,讓我們轉到網上商店這將帶我們到主題頁面。如果你想更改主題,可以向下滾動然後點擊訪問主題商店。

  • 現在我們已經啟用了延長試用期,我們有3個月的完整訪問權限。

設計你的商店
設計你的商店

選擇和安裝主題

  • 您可以在商店上使用和安裝各種不同主題,可以瀏覽這些主題,但需要注意許多這些主題實際上都是付費主題,所以您需要付費才能在商店上安裝它們。

  • 如果您剛開始使用,建議先使用免費主題,在左側點選免費篩選,就可以看到所有免費主題,這些主題都能夠在Shopify計劃中使用。

  • 如果您想查看主題,只需點選主題然後選擇查看示範商店,您可以瀏覽整個商店,看看各個頁面的效果,如果您喜歡某個主題,只需點選試用主題,主題就會安裝在您的商店上。

  • 安裝完成後,可以在Shopify儀表板的主題庫中看到所有主題的概觀,當前我們剛剛查看過的主題正在安裝中。

  • 新主題安裝完成後,如果您想使用它,只需在Shopify儀表板中進行配置即可。

選擇和安裝主題
選擇和安裝主題

如何在Shopify上更改和自定義主題?

  • 點擊發佈,然後再次點擊發佈。現在主題從默認主題(黎明主題)切換到了我們剛剛添加的新主題,名為Refresh。

  • 在這個視頻中,我們將使用默認主題(黎明主題)。這是他們最好的主題之一,我在很多成功的Shopify商店中都看到使用這個主題,所以在這個視頻中也會使用它。

  • 要切換回默認主題,我們只需點擊發佈黎明主題並確認,現在又切換回了黎明主題,我們可以刪除這個新添加的主題。

  • 現在我只是想向你展示如何安裝另一個主題,現在我們回到了原來的主題,接下來我們將開始自定義我們的商店。

  • 點擊自定義,進入商店編輯器,我們目前在首頁,如果要切換頁面,可以點擊這裡,然後切換到任何我們想編輯的頁面,左側可以看到所有頁面元素的概覽。

  • 在您的商店的每個頁面上,都會有...

如何在Shopify上更改和自定義主題?
如何在Shopify上更改和自定義主題?

網頁標頭區域

  • 網頁的標頭區域包括公告欄、導覽選單、商店名稱或標誌以及購物車

  • 在標頭和頁腳之間通常會有一些連結到法律頁面的鏈接,可能會有電子郵件訂閱部分,以及一些圖示

  • 網頁標頭和頁腳之間的內容通常包括首頁的圖片橫幅和展示商店產品的特色收藏

  • 整個商店由不同類型的區段構成,而在這些區段內部又包含不同類型的元素,例如圖片橫幅區段內包含文本區塊和按鈕區塊

網頁標頭區域
網頁標頭區域

在Shopify商店上設計頁面

  • 進入Shopify商店的頁面設計界面後,我們可以通過點擊加號圖標來添加不同類型的部分。例如,我們可以添加文本部分,然後開始編輯其中的內容。

  • 我們還可以通過左側的概覽直接拖放部分到想要的位置。

  • 要刪除特定部分,只需在左側懸停在該部分上並點擊垃圾桶圖標,或者選擇部分後在左下角點擊“移除部分”即可。

  • 瞭解了在Shopify商店上頁面結構後,我們可以開始設計您的店鋪。首先,我們要做的是添加一些內容。

在Shopify商店上設計頁面
在Shopify商店上設計頁面

在首页幻灯片上,添加图像轮播

  • 在网站首页最常见的是幻灯片,尤其是时尚店铺,我们也要做一个幻灯片,可以使用图像轮播来呈现

  • 首先,我要删除整个部分,然后点击“添加部分”,选择幻灯片部分插入到首页上

  • 接下来,我要在幻灯片上方展示特色产品,需要回到概述,拖拽部分将特色产品移到首页顶部

  • 现在,要为幻灯片添加图像,需要点击选择图像,将准备好的图像拖放到字段中上传,然后选中第一张图像,完成添加

在首页幻灯片上,添加图像轮播
在首页幻灯片上,添加图像轮播

優化首頁輪播圖像

  • 目前我們可以看到在第一張幻燈片中只有一張圖像,我希望能夠有四張不同的圖像,即四張幻燈片。

  • 首先點擊「新增幻燈片」,然後再添加另一張幻燈片,這樣就可以添加四張幻燈片。

  • 接著分別為第二、第三、第四張幻燈片選擇圖像,點擊完成後即可完成添加。

  • 重新回到首頁,我們可以看到現在有四張不同的幻燈片,並且可以通過底部的箭頭來切換觀看。

  • 下一步是修改這裡的內容,首先要做的是改變樣式,取消在桌面上顯示容器的選項,然後修改桌面

優化首頁輪播圖像
優化首頁輪播圖像

內容排版和按鈕設置

  • 將內容置於左下角,並在桌面上對齊左邊。

  • 更改文字顏色為scheme 3,使其顯示為白色。

  • 複製預備的標語,貼上作為標題。

  • 刪除次標題,將按鈕標籤改為'立即購物'。

  • 確保按鈕設有連結,如連結至所有產品頁面。

  • 調整標題大小為小。

內容排版和按鈕設置
內容排版和按鈕設置

優化幻燈片內容

  • 需要對所有其他幻燈片進行相同操作,返回上一步,選擇第二張幻燈片。

  • 將按鈕和文字放在右下角是更合理的,因為這裡有一些空白。

  • 滾動到底部,將內容放在右下角,然後在桌面對齊中選擇左對齊。

  • 由於背景是明亮的,所以文本應該是深色。

  • 刪除副標題,使用另一個為標題準備的標語。

  • 標題大小選擇小,然後鏈接按鈕到所有產品。

  • 然後對其他兩張幻燈片做同樣的操作。

優化幻燈片內容
優化幻燈片內容

首頁內容建議

  • 建議在主頁上添加一些熱賣商品或特價促銷的橫幅廣告,或展示新品系列

  • 按鈕可以連到相應的頁面,如特價促銷頁面或新品系列頁面

  • 在不同設備上查看店鋪外觀時,可在右上角切換至桌面或手機檢視

  • 通常我們建議在桌面版本上進行更改,以確保頁面的完整性

首頁內容建議
首頁內容建議

如何在Shopify設置特色商品部分

  • 如果您希望在您的首頁上展示新到貨產品、暢銷產品或者您的單一產品店面,您可以添加一個特色商品部分。

  • 通過點擊“添加部分”,您可以添加一個特色商品部分,顧客可以直接在首頁購買特定商品。

  • 要在店面中添加商品及商品收藏,您需要返回Shopify儀表板進行操作。

  • 在完成操作前,請確保點擊右上角的保存按鈕。接著,將光標懸停在左上角的退出按鈕上,右鍵點擊並選擇在新標籤中打開。這樣我們就可以在新標籤中打開Shopify儀表板,同時保留編輯器,這樣有助於更快速地建立您的商店。

如何在Shopify設置特色商品部分
如何在Shopify設置特色商品部分

添加产品信息

  • 在仪表盘中,点击“产品”然后选择“添加产品”

  • 按照顺序添加产品的详细信息,比如产品名称、描述、高清图片和价格

  • 产品描述需要包括产品特点、特殊规格等,也可以使用AI生成的文本来帮助描述

  • 在媒体部分,上传高质量的产品图片,这对店铺设计非常重要

  • 在定价部分输入产品价格即可

添加产品信息
添加产品信息

添加产品和创建分类

  • 在添加产品时,您可以设置产品的价格,还可以添加折扣价格以及库存信息。

  • 如果需要根据重量计算运费,可以在这里添加产品的重量。

  • 如果有不同尺寸、颜色或其他变体,可以在此设置。

  • 添加完所有产品信息后,点击保存。

  • 接着可以在“产品”选项中看到已添加的产品。

  • 要添加更多产品,只需再次点击“添加产品”并按照相同步骤操作。

  • 除了添加产品,您还可以创建不同分类,用以对所售产品进行分类。

添加产品和创建分类
添加产品和创建分类

Conclusion:

這段影片提供了詳細的 2024 Shopify 網站設計教程,讓您了解從建立帳戶到設計店鋪的整個過程。藉由這些步驟,您將能夠迅速建立自己的 Shopify 商店並進行 SEO 優化。

2024 Shopify 教學Shopify 商店設計建立 Shopify 帳戶選擇和安裝主題設計 Shopify 商店頁面添加特色商品Shopify SEO 優化
如何在線賺取你的第一萬美元?如何通過免費流量在Shopify上每週賺取3092美元?