Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store FrameworkSetting up cross-border stores
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 begin

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 vtex.admin-graphql-ide@3.x app:

_10
vtex install vtex.admin-graphql-ide@3.x

  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.


    _18
    {
    _18
    internal {
    _18
    get(path: "/{URL}") {
    _18
    from
    _18
    declarer
    _18
    type
    _18
    id
    _18
    query
    _18
    binding
    _18
    endDate
    _18
    imagePath
    _18
    imageTitle
    _18
    resolveAs
    _18
    origin
    _18
    disableSitemapEntry
    _18
    }
    _18
    }
    _18
    }

  1. Copy and save the returned data.
  2. Erase the previous query and fill in the main text box with the following mutation command.

_10
mutation saveInternal($args: InternalInput!) {
_10
internal {
_10
save(route: $args) {
_10
id
_10
}
_10
}
_10
}

  1. Click on Query Variables at the bottom of the page and fill in the Query Variables section as in the following:

_16
{
_16
"args": {
_16
"from": "/US/about-us",
_16
"declarer": "vtex.store@2.x",
_16
"type": "userRoute",
_16
"id": "vtex.store@2.x:store.custom::{URL}",
_16
"query": null,
_16
"binding": "7cf37a3b-efc0-4e47-8201-d8b58kd4d3fd",
_16
"endDate": null,
_16
"imagePath": null,
_16
"imageTitle": null,
_16
"resolveAs": null,
_16
"origin": "vtex.pages-graphql@2.99.1",
_16
"disableSitemapEntry": null
_16
}
_16
}

  • 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.


    _10
    mutation deleteInternal($args:RouteLocator){
    _10
    internal{
    _10
    delete(path:"/{URL}",locator:$args){
    _10
    from
    _10
    }
    _10
    }
    _10
    }

  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.


    _10
    {
    _10
    "args": {
    _10
    "from": "/{URL}",
    _10
    "binding": "{bindingId}"
    _10
    }
    _10
    }

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

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Indicating alternate versions of localized pages in cross border stores
Storefront Development
Creating a new custom page
Storefront Development
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page