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.
Related: Edit Navigation Menus in Shopify.
Related: Change Link Color in Shopify.
Related: Create a New Page in Shopify.
Related: Add a Link to an Image in Shopify.
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.
FAQ
Most often the link wasn't applied to the selected text - the toolbar's link icon needs text highlighted before it will activate. Other causes: a theme CSS rule that disables pointer events on the parent container, or the link was inserted but later wrapped in another element via the HTML view that broke the anchor tag.
In the page editor, select the linked text and click the link icon again - there's usually an "Unlink" or "Remove link" option in the popup. Alternatively, switch to HTML view and remove the <a href="..."> tags around the text.
A relative URL like /products/my-product works on any storefront and follows the domain you're on (good for internal links - they keep working if your domain changes). An absolute URL includes the full path: https://yourstore.com/products/my-product - use this for external links and any place outside your store (emails, social posts).
The page editor's link UI doesn't expose a nofollow option. To add it, switch to HTML view and edit the anchor tag directly: <a href="..." rel="nofollow">. For sponsored links, use rel="sponsored". For UGC-heavy areas like comments, use rel="ugc".
Your theme is likely applying the same colour to text and links, or removing underlines globally. Check Theme Editor → Theme settings → Colors → Links, or override it in CSS. To skip the class-hunt, describe what you want to Fudge ("make body links blue with underline-on-hover, leave nav and buttons untouched") and it writes the scoped CSS. See change link color in Shopify for the full walkthrough.
