Managing landing pages in cross-border stores

To meet your store's specific needs, you may want to create custom landing pages. In a cross-border context, you may also want them to be distinct depending on the locations in which your shop operates.

In this case, after creating a custom page, you must link its path to the desired binding as presented in the Linking a landing page to a binding section.

Finally, you may want to remove your landing page from the default binding. For that, check the Unlinking a landing page from a specific binding. section.

Before you start

Before proceeding any further with this step-by-step:

It's also worth noting that this technique only works if the custom pages were created via the CMS rather than the Store Theme.

Step by step

Linking a landing page to a binding

After creating a new page, the page's route becomes available only in the store associated with your account's default binding. The following shows how to associate your page with the desired binding.

  1. Open the terminal and install the [email protected] app:
vtex install [email protected]
  1. Open the Admin and go to the GraphQL IDE section.
  2. From the GraphQL IDE dropdown list, choose the vtex.rewriter app.
  3. Run the following query to get the internal data related to your custom page's path.
  • Replace the values between the curly brackets according to your scenario.
{
  internal {
    get(path: "/{URL}") {
      from
      declarer
      type
      id
      query
      binding
      endDate
      imagePath
      imageTitle
      resolveAs
      origin
      disableSitemapEntry
    }
  }
}
  1. Copy and save the returned data.
  2. Erase the previous query and fill in the main text box with the following mutation command.
mutation saveInternal($args: InternalInput!) {
  internal {
    save(route: $args) {
      id
    }
  }
}
  1. Click on Query Variables at the bottom of the page and fill in the Query Variables section as in the following:
{
    "args": {
        "from": "/US/about-us",
        "declarer": "[email protected]",
        "type": "userRoute",
        "id": "[email protected]:store.custom::{URL}",
        "query": null,
        "binding": "7cf37a3b-efc0-4e47-8201-d8b58kd4d3fd",
        "endDate": null,
        "imagePath": null,
        "imageTitle": null,
        "resolveAs": null,
        "origin": "[email protected]",
        "disableSitemapEntry": null
    }
}
  • Replace the args values with the information obtained in Step 4.
  • Update the binding value with the binding id of the store you want to have your new custom landing page live.

Done! Now, your landing page will be accessible in the default binding as well as in the desired binding.

ℹ

If you want to link the same landing page to other stores, just repeat this process considering their respective binding ids.

If you don't want to have this landing page in the default binding, check the following section on Unlinking a landing page from a binding.

Unlinking a landing page from a binding

  1. Open the Admin and go to the GraphQL IDE section.
  2. From the GraphQL IDE dropdown list, choose the vtex.rewriter app.
  3. Fill in the main text box with the following mutation.
  • Replace the values between the curly brackets according to your scenario.
mutation deleteInternal($args:RouteLocator){
  internal{
    delete(path:"/{URL}",locator:$args){
      from
    }
  }
}
  1. Click on Query Variables at the bottom of the page and fill in the Query Variables section as in the following.
  • Replace the values between the curly brackets according to your scenario.
{
  "args": {
    "from": "/{URL}",
    "binding": "{bindingId}"
  }
}

Once you run this mutation, you'll remove the page related to the specified {URL} from the {bindingId} provided.

Next steps

Related resources