How can I create specific links to different parts of my e-commerce website on Webflow? Currently, I only have the option to link to the homepage when using the link settings.
TL;DR
- Use the page picker for static pages like About or Contact.
- For product or category pages, use Collection Lists with dynamic links or manually enter the URL path (e.g., /product/slug).
- For internal page sections, add a unique ID and link using #id format.
To link to specific parts of your e-commerce website in Webflow, such as product pages, categories, or static pages, you need to manually configure the link settings beyond the default homepage option.
1. Use the Page Picker for Static Pages
- In the Link Settings panel for buttons or text links, click Page to open the page picker.
- All static pages, like your About, Contact, or custom-built Shop pages, will appear here.
- Select the desired page, and Webflow will generate the correct internal link.
2. Link to Product or Category Pages
- Webflow’s CMS structure for e-commerce means products and categories are stored in Collections.
- You cannot select individual CMS pages from the link picker. Instead:
- For Product Template Pages, use Collection Lists to link dynamically to each product.
- Inside a Collection List, add a Link Block or Button, then choose Current Product or use the Product Page option.
- This links directly to the product detail page (e.g.,
/product/product-name).
3. Manually Enter URLs for Known Paths
- If you want to link to a specific product or category page outside of a Collection List:
- Choose URL in the Link Settings.
- Enter the Webflow-relative path, such as /product/your-product-slug or /category/your-category-slug.
- You can find slugs in your Products or Categories collections under the Ecommerce panel.
4. Anchor Links Within the Same Page
- To link to a specific section of a page (like a featured product section):
- Give the section or element a unique ID using the Element Settings panel.
- Then, in Link Settings, enter the link as #your-id.
5. Use Navigation or CMS Collection Lists Strategically
- For site-wide repeatable links (like product categories in the navbar), use a CMS Collection List inside navigation components.
- Add a Link Block inside the list, and bind its link to the Current Category → Category Page to dynamically create accurate links.
Summary
To link to different parts of a Webflow e-commerce site, use the page picker for static pages, build dynamic links with Collection Lists, or manually input known paths (like /product/slug). Webflow doesn't list CMS or product pages in the link picker directly, so manual or dynamic linking strategies are essential.