Configure URL patterns

In Commerce, you can customize the URL structure of your store’s Collection and Product pages so they mirror your SEO strategies.

This section applies to both OSF and Storefront Classic. This section applies to Open Storefront Framework (OSF) and Storefront Classic.

This section includes the following topics:

Plan URL patterns

Keep the following points in mind as you plan your URL patterns:

  • It is best to customize URL patterns when you are planning and testing your store. If you change a URL pattern on your production storefront, you must specify a URL redirect for that pattern. Otherwise, older bookmarked URLs will display an error page instead of the pages you intended.
  • Each URL pattern must be a valid URL for the page type (Collection or Product) and must contain only components that are valid for the page type. For example, if you include the variable {brand} in the Collection pattern, you will not be able to save your changes because brand is not a collection property.
  • Each URL pattern uniquely identifies each product and collection via id numbers, or, you can use the URL slug to enter descriptive terms. For example, /product/{=seoUrlSlugDerived}
    • descriptive URLs for categories may not be required as, by definition, categories should already have distinctive unique names.
    • descriptive URLs for products may be necessary as products can have similar names (slugs) and could, therefore, benefit store maintenance.
  • Each URL pattern can contain up to 254 characters and cannot contain spaces or special characters except – (dash).
  • It is best to plan URL patterns bearing in mind that each URL must be unique. This is necessary in order to avoid storefront display issues, such as, 404 errors, or the wrong collection being displayed.

Keep the following points in mind as you plan your URL patterns and your Commerce instance supports more than one language:

  • Commerce automatically creates URL patterns for each supported language. Commerce uses your catalog translations for the variables values, but you must manually translate any words that are not variables. For example, in the default product page URL pattern, you must manually translate the word product. For more information, see Localize Your Store.
  • Although it is possible to configure a different product and collection page URL pattern for each language supported by your site, it is recommended to maintain URL pattern consistency between each language. This allows you to translate any fixed parts you many have in your URL patterns for each language.
  • There is a language prefix (a language subdirectory) that is automatically included for each additional language supported by your site. This subdirectory is not included in the default language URL structure for a multi-lingual site. For example, if you support 3 languages for your site: English, Spanish, and French, with English being the default language, your URL structures will be as follows:

English URLs: www.example.com/my-url-patterns

Spanish URLs: www.example.com/es/my-url-patterns

French URLs: www.example.com/fr/my-url-patterns

Understand default URL patterns

By default, Commerce uses the following URL patterns for Category and Product pages:

  • Collection page: /{seoTitleDerived}/category/{id} For example, /cameras-and-camcorders/category/cameracat.
  • Product page: /{seoTitleDerived}/product/{id} For example, /striped-button-down/product/prod10001.

Understand URL slug patterns

Clicking the Build URL Slugs button generates a URL mapping table, allowing the slug value to be used as a unique url pattern identifier instead of the {id} property.

This enables you to define the URL patterns with a descriptive slug value, prefixed with ‘=’. The ‘=‘ symbol is used with the seoUrlSlugDerived pattern only and ensures that the specified products and collections are returned from the server, as highlighted below:

  • Collection page: /category/{=seoUrlSlugDerived}, for example /category/cameras-and-camcorders.
  • Product page: /product/{=seoUrlSlugDerived}, for example, /product/samsung-f90bn-hd-flash-memory-camcorder.

Customize URL patterns

To customize URL patterns for your store:

  1. Click the Settings icon.
  2. Select Setup and then click the URL Patterns tab.
  3. If your Commerce instance runs multiple sites, pick a site to configure from the list at the top of the settings list. See Run Multiple Stores from One Commerce Instance for more information.
  4. Click the Collection Page URL.
  5. Type the new pattern and click the Save icon when you are done. Note: URL slug values must be unique, if not, a warning message is displayed indicating that this must be the case.

    Variables must be inside {} (curly braces, for example, {id} or {seoTitleDerived}). For a list of variables for Collection Page URLs and Product Page URLs, see the tables that follow this procedure.

  6. (Optional) Check the Auto Redirect box so that shoppers who have bookmarked older URLs are automatically redirected to the new URL. Auto Redirect is selected by default and will only redirect from the default URLs, not from previous patterns.
  7. If you want to use URL slugs rather than IDs in your URLs, you will need to click the Build URL Slugs button.
  8. (Optional) You can simplify your URL slugs by clicking the Build URL Slugs button. You will notice that the most recent date and time the URL slug table was built is displayed. Simplifying URL slugs removes any special characters, replaces spaces with hyphens, and simplifies into lowercase. Once the simplified URL slugs have been built, you will need to manually update the URL pattern to use the new URL slug. For example, "/product/{=seoUrlSlugDerived}".Note: If a warning displays informing you that URL slugs are not unique, then a uniqueness check can be performed in order to fix this issue. See Perform uniqueness checks for URL patterns for details.
  9. Click the Product Page URL and repeat steps 4 – 6 to update the URL pattern for the product page.
  10. Check if the URL pattern was changed by clicking through your store. You may also wish to check that redirected URLs work correctly.

The following table describes the available properties for Collection Page URL patterns. Each property displays the value of the corresponding collection property. For more information about collection properties, see Organize products in collections.

Collection Page URL Variable Description
displayName The collection’s Name property. (A short, descriptive name that identifies the collection.)
Id The collection’s ID property. (The ID that identifies the collection internally.)
Description* The collection’s Description property. (A short description to display with the collection.)
parentCategory The display name of the collection’s current parent.
seoDescriptionDerived* The collection’s Meta Description property. See Add metadata to products and collections for more information.
seoTitleDerived* The collection’s Title Tag property. See Add metadata to products and collections for more information.
seoUrlSlugDerived The collection’s URL Slug property. See Add metadata to products and collections for more information.

* These variables should not be used as queryable elements in URL patterns (that is, they are not included in Build URL Slugs).

The following table describes the available properties for Product Page URL patterns. Each variable displays the value of the corresponding product property. For more information about product properties, see Understand the base product type.

Product Page URL Variable Description
displayName The product’s Name property. (A short, descriptive name that identifies the product.)
Id The product’s ID property. (The ID that identifies the product internally.)
Description* The product’s Description property. (A short description to display with the product.)
parentCategory The display name of the product’s current parent collection.
Brand The name of the manufacturer.
Type The product type. If the product was created with the Base product type, this value is not displayed. See Create and edit product types for more information.
seoDescriptionDerived* The product’s Meta Description property. See Add metadata to products and collections for more information.
seoTitleDerived* The product’s Title Tag property. See Add metadata to products and collections for more information.
seoUrlSlugDerived The product’s URL Slug property. See Add metadata to products and collections for more information.

* These variables should not be used as the elements in URL patterns.

Perform uniqueness checks for URL patterns

The uniqueness of URL patterns plays a significant role in ensuring your site does not encounter storefront display issues, such as 404 errors or the wrong collection being displayed. Therefore, you must ensure the URL patterns used produce unique URLs for each product and category.

It is worth noting that the uniqueness check for URL patterns is required only when you have clicked the Build URL Slugs button and you are using {=seoUrlSlugDerived} in your URL pattern.

You can use the Catalog export file to check that categories and/or products do not have a shared URL slug value. To do so:

  1. Go to Catalog and click the Export button to export the Catalog data.
  2. Select the item you wish to export and click Export. This exports the data in the form of an Excel spreadsheet.
  3. Open the Excel data.
  4. Scroll to the seoUrlslugs column and sort alphabetically.

    The seoUrlslugs column may not contain any data; this happens only when URL slugs have already been built.

  5. Identify instances that are identical, and do one of the following:

    Either

  6. Edit the values for the duplicated seoUrlslugs within Excel, and click Save. You must then click Import, choose the edited file, and click Upload File. Click the Validate button to confirm.

    Or

  7. On the Catalog page, open the product with the duplicated URL and go to the Metadata tab. To change the current information, check Edit Manually and enter the text within each box. You can change back to the default alt text by checking Edit Manually and clicking Reset Default.
  8. Click Save.

Note: The uniqueness check procedure is automatically performed when the Build URL button is clicked, producing a list of duplicates via the API response. However, you can continue to perform the above procedure as required.