Shopify主题开发：如何移除部分页面URL中的/pages路径？

Hey there, I’ve tackled this exact headache while building Shopify themes, so I totally get why you’re frustrated—Shopify doesn’t offer a native toggle for this, but there are two reliable workarounds that get the job done:

1. URL Redirects + Theme Link Overrides #

This is the most straightforward method, perfect for most standard use cases:

Step 1: Set Up Permanent Redirects in Shopify Admin #

• Head to your Shopify Admin → Online Store → Navigation → URL Redirects
• For every page you want to clean up, create a redirect where:
  • Old URL: /pages/your-page-slug (e.g., /pages/contact)
  • New URL: /your-page-slug (e.g., /contact)
• Set the redirect type to Permanent (301) to preserve your SEO rankings—this tells search engines the old URL has moved for good.

Step 2: Update All Page Links in Your Theme #

You need to tweak every instance of page links in your theme to skip the /pages prefix, so visitors land directly on the clean URL instead of hitting a redirect first.

For example, if your theme uses code like this for page navigation links:

<a href="{{ page.url }}">{{ page.title }}</a>

Replace it with:

<a href="{{ page.url | remove: '/pages' }}">{{ page.title }}</a>

Don’t forget to check all these spots in your theme files:

• Main header navigation (look for snippets like header.liquid or navigation.liquid)
• Footer links
• Custom page sections or templates
• Breadcrumb trails (if your theme includes them)

2. Custom Slug Metafields (For Advanced Control) #

If you want to use unique slugs that don’t match the page’s default name, metafields give you that flexibility:

Step 1: Create a Page Metafield #

• Go to Shopify Admin → Settings → Metafields → Pages
• Add a new metafield with:
  • Namespace and key: custom.slug
  • Type: Single line text
• Save it, then go to each page and input your desired custom slug (e.g., get-in-touch instead of contact-us)

Step 2: Update Theme Links and Redirects #

• Modify your theme’s page link code to prioritize the custom slug:

  {% if page.metafields.custom.slug %}
    <a href="/{{ page.metafields.custom.slug }}">{{ page.title }}</a>
  {% else %}
    <a href="{{ page.url | remove: '/pages' }}">{{ page.title }}</a>
  {% endif %}
  

• Create 301 redirects from the old /pages/old-slug URL to your new custom slug URL, just like in Method 1.

Critical Checks to Avoid Mess-Ups #

• Watch for Route Conflicts: Never use slugs that clash with Shopify’s default routes (e.g., /products, /collections, /cart, /account, /blogs). Using /shop as a custom slug will break your default collection page, for example.
• Test Everything: After setting up redirects and updating links, test both the old /pages/xxx URL (it should redirect smoothly to the clean URL) and the new /xxx URL (it should load the page without errors).
• Stick to 301 Redirects: Temporary (302) redirects don’t pass SEO value—only use them if you plan to revert the URL change later.

内容的提问来源于stack exchange，提问作者Nirali