如何通过点击自定义图图片进入对应产品系列

[aq2]

如何我才能像图中展示的那样，通过点击自定义的图片进入到对应的产品系列，DAWN本身的产品系列功能并不支持自定义图片，就像我点击了CHRISTMAS就能进入CHRISTMAS系列，此处的图片又是自定义的，我用的是DAWN主题

[akshay_bhatt]

Hi @aq2 ,

1. 为自定义图像链接添加新部分
转到在线商店 > 主题 > 操作 > 编辑代码。
在左侧边栏中，单击“添加新部分”并将其命名为“custom-collection-links”。
将以下代码粘贴到新   的节文件中：

Yào shíxiàn liànjiē dào Dawn zhǔtí zhōng tèdìng chǎnpǐn xìliè de zì dìngyì kě diǎnjī túpiàn, qǐng ànzhào xiàliè bùzhòu cāozuò:

1. Wèi zì dìngyì túxiàng liànjiē tiānjiā xīn bùfèn
zhuǎn dào zàixiàn shāngdiàn > zhǔtí > cāozuò > biānjí dàimǎ.
Zài zuǒ cè biānlán zhōng, dān jī “tiānjiā xīn bùfèn” bìng jiāng qí mìngmíng wèi “custom-collection-links”.
Jiāng yǐxià dàimǎ zhāntiē dào xīn de jié wénjiàn zhōng:

{% schema %}
{
  "name": "Custom Collection Links",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "First Collection Image"
    },
    {
      "type": "url",
      "id": "link_1",
      "label": "First Collection Link"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "Second Collection Image"
    },
    {
      "type": "url",
      "id": "link_2",
      "label": "Second Collection Link"
    },
    {
      "type": "image_picker",
      "id": "image_3",
      "label": "Third Collection Image"
    },
    {
      "type": "url",
      "id": "link_3",
      "label": "Third Collection Link"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Custom Collection Links",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}

<div class="custom-collection-links">
  <div class="custom-collection-link">
    <a href="{{ section.settings.link_1 }}">
      <img src="{{ section.settings.image_1 | img_url: 'large' }}" alt="Collection 1">
    </a>
  </div>
  <div class="custom-collection-link">
    <a href="{{ section.settings.link_2 }}">
      <img src="{{ section.settings.image_2 | img_url: 'large' }}" alt="Collection 2">
    </a>
  </div>
  <div class="custom-collection-link">
    <a href="{{ section.settings.link_3 }}">
      <img src="{{ section.settings.image_3 | img_url: 'large' }}" alt="Collection 3">
    </a>
  </div>
</div>

<style>
.custom-collection-links {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.custom-collection-link img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.custom-collection-link img:hover {
  transform: scale(1.05);
}
</style>

2.将该部分添加到您的主页
返回在线商店 > 主题 > 自定义。
在“部分”侧栏中，单击“添加部分”并选择“自定义集合链接”。
上传您要使用的图像并设置相应的集合链接（例如，将 CHRISTMAS 链接到 CHRISTMAS 集合）。
3. 调整样式（可选）
提供的 CSS 可确保图像具有响应能力并具有悬停效果。
通过调整 CSS 中的间隙和框阴影来调整间距或布局。
4. 保存并测试
保存更改并预览主页。
单击图像以确认它们重定向到正确的集合页面。

2. Jiāng gāi bùfèn tiānjiā dào nín de zhǔyè
fǎnhuí zàixiàn shāngdiàn > zhǔtí > zì dìngyì.
Zài “bùfèn” cè lán zhōng, dān jī “tiānjiā bùfèn” bìng xuǎnzé “zì dìngyì jíhé liànjiē”.
Shàngchuán nín yào shǐyòng de túxiàng bìng shèzhì xiāngyìng de jíhé liànjiē (lìrú, jiāng CHRISTMAS liànjiē dào CHRISTMAS jíhé).
3. Tiáozhěng yàngshì (kě xuǎn)
tígōng de CSS kě quèbǎo túxiàng jùyǒu xiǎngyìng nénglì bìng jùyǒu xuán tíng xiàoguǒ.
Tōngguò tiáozhěng CSS zhōng de jiànxì hé kuàng yīnyǐng lái tiáozhěng jiānjù huò bùjú.
4. Bǎocún bìng cèshì
bǎocún gēnggǎi bìng yùlǎn zhǔyè.
Dān jī túxiàng yǐ quèrèn tāmen zhòng dìngxiàng dào zhèngquè de jíhé yèmiàn.

知道了！如果您发现我的建议有帮助，请考虑喜欢或将其标记为解决方案。 
感谢您的反馈！如果您还有任何疑问或需要进一步帮助，请告诉我。

感谢与问候
阿克谢·巴特

Zhīdàole! Rúguǒ nín fāxiàn wǒ de jiànyì yǒu bāngzhù, qǐng kǎolǜ xǐhuān huò jiāng qí biāojì wèi jiějué fāng'àn. 
Gǎnxiè nín de fǎnkuì! Rúguǒ nín hái yǒu rènhé yíwèn huò xūyào jìnyībù bāngzhù, qǐng gàosù wǒ.

Gǎnxiè yǔ wènhòu
ā kè xiè·bātè

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt