Key takeaways
- In the Shopify page editor, select text and click the link icon in the toolbar to add a hyperlink.
- In Theme Editor text blocks, some have a dedicated link field — no text selection needed.
- For full control over link styling and placement, use HTML anchor tags in the code editor or via Fudge.
- You can link to internal pages, products, collections, or external URLs.
Adding a clickable link to text in Shopify depends on where that text lives. The method is different for page content, Theme Editor sections, and code. This guide covers all three.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge — an AI storefront editor with a 5.0 rating on the Shopify App Store.
How to add a link to text in the Shopify page editor
This applies to text in Online Store → Pages or Online Store → Blog posts.
Step 1. Go to Online Store → Pages (or Blog posts) and open the page you want to edit.
Step 2. In the content area, select the text you want to make into a link. Highlight it with your cursor.
Step 3. Click the link icon in the editor toolbar (it looks like a chain link). A popup appears asking for the URL.
Step 4. Enter the URL. For internal links, use the relative path: /products/my-product, /collections/sale, /pages/about. For external links, use the full URL including https://.
Step 5. Click Apply or Insert, then save the page.
The selected text is now a clickable hyperlink, styled by your theme’s default link styles.
How do I insert a clickable link in text?
If you want the link to open in a new tab, click the link icon in the toolbar, enter the URL, and look for an “Open in new tab” checkbox before confirming. External links typically benefit from opening in a new tab; internal links don’t need it.
How to add a link to text in the Shopify Theme Editor
Text blocks inside Theme Editor sections work differently from page content.
Step 1. Go to Online Store → Themes → Customize.
Step 2. Click the section or block containing your text.
Step 3. In the settings panel on the left, look for a Link or URL field below the text input. Some text blocks include this; others don’t.
Step 4. Enter the link destination and save.
If a text block doesn’t have a link field, you can’t make that specific text a hyperlink through the Theme Editor alone. You’d need to add it via code or Fudge.
Note: Rich text blocks in the Theme Editor (sections with a WYSIWYG editor) do support inline links — select the text within the rich text field and look for the link icon in that mini-toolbar.
How to add a link to text using HTML
For precise control, you can use an HTML anchor tag directly in your Shopify page content or in theme files.
Basic syntax:
<a href="/products/my-product">Shop the collection</a>
Opening in a new tab:
<a href="https://example.com" target="_blank" rel="noopener">Visit site</a>
Where to use this:
- In the Shopify page editor, switch to HTML view (look for
< >or “Show HTML” in the toolbar) and insert the tag directly. - In theme files (sections, snippets, templates), edit via Online Store → Themes → Actions → Edit code.
Always use rel="noopener" when linking to external URLs with target="_blank".
How to link text to a product, collection, or page in Shopify
Shopify URLs follow a consistent pattern:
| Destination | URL format |
|---|---|
| Product | /products/product-handle |
| Collection | /collections/collection-handle |
| Page | /pages/page-slug |
| Blog | /blogs/news |
| Blog post | /blogs/news/post-slug |
| Cart | /cart |
| External | https://full-url.com |
The “handle” or “slug” is the URL-friendly version of the name - lowercase, hyphens instead of spaces. You can find a product’s handle in Shopify Admin → Products → click the product → look at the URL or the SEO section at the bottom.
How to add a link to text in Shopify using Fudge
If you need links in places the Theme Editor doesn’t support natively - inside a custom section, inside a table, or styled differently from default link styles - describe it to Fudge:
“Add a ‘Learn more’ link to the second paragraph of the product feature section on my homepage, pointing to /pages/how-it-works.”
Fudge makes the code change as a draft for you to review before anything goes live.