You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Shopify Narrative主题:如何修改页脚社交链接的悬停名称

Fixing the Tumblr Hover Text on Shopify's Narrative Theme

Hey there! Let's get that stubborn "Tumblr" hover text sorted out for your replaced icon. I’ve worked with the Narrative theme quite a bit, so here are two straightforward ways to fix this:

Option 1: Update via Theme Customizer (No Code Needed)

This is the simplest route if your theme version supports it:

  • Log into your Shopify admin, go to Online Store > Themes, then click Customize on your Narrative theme.
  • Scroll to the bottom of the left sidebar and expand the Footer section.
  • Locate the social links area—you’ll see the entry for the former Tumblr link.
  • Click that entry, and look for a field labeled something like Link Name or Label (this controls the hover text).
  • Replace "Tumblr" with your desired custom text, then hit Save at the top right. Refresh your store front, and the hover text should update immediately.

Option 2: Edit Theme Code (For Trickier Cases)

If the customizer doesn’t let you edit the hover text, you’ll need to tweak the code directly:

  • Go back to your theme page, click Actions > Edit Code.
  • In the left file list, head to the Sections folder and open footer.liquid (if you don’t see it there, check the Snippets folder for social-links.liquid—different Narrative versions store this code in one of those two places).
  • Use the search bar to look for "tumblr"—you’ll find a code snippet that looks similar to this:
    <a href="{{ settings.social_tumblr_link }}" class="social-link" title="{{ 'general.social.links.tumblr' | t }}">
      <!-- Your replaced icon code will be here -->
    </a>
    
  • The title attribute is what controls the hover text. You have two choices here:
    1. Directly replace the dynamic text: Swap {{ 'general.social.links.tumblr' | t }} with your custom text, like title="My Custom Link".
    2. Update the theme’s translation file: If you want all instances of "Tumblr" in your theme to change, open the Locales folder, pick your active language file (e.g., en.default.json), search for "tumblr", and replace the corresponding value with your new text.
  • Click Save, then refresh your store to test the hover text.

After making either change, just hover over your icon—the new custom text should show up instead of the old "Tumblr" label!

内容的提问来源于stack exchange,提问作者Janamir Xavier

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.29 16:22:39