Menu
Feedback
Start here
Tutorials


Tutorials
Layout
How to work with different layouts for the same page
How to work with different layouts for the same page

Warning: there are two ways to configure collections, through the CMS or the Collection module (Beta). This article is about how to configure collections through the CMS.

On the Storefront > Layout page, a standard layout is established for all pages of the same kind included on each folder of a website; e.g. product.

However, it is possible to apply different layouts for the same page through certain conditions (group of products, categories, brands). They would be two products with different layouts or a specific category with a special layout, for example.

To do so, select a new template, be it a page or shelf. After creating it, follow the steps below in order to select the foulder in which you want to apply the new layout:

  1. On Storefront, access Layout;
  2. Click on the CMS folder;
  3. Click on Sites and channels;
  4. Access the desired website;
  5. Click on the / foulder and select the desired foulder for the new layout;
  6. Click on New Layout.

After filling in the Layout Name and Body Class fields, select the desired template on the Template box and uncheck the Default Page option. After that a new section will be available and you can define through the fields the conditions under which the new layout will be displayed in your store.

It is possible to limit the availability of the template to a predetermined period of time by filling in the From and To fields as well as to define in which categories, products, brands and collections the chosen template will be applied.

{"base64":"  ","img":{"width":1926,"height":492,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25931,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-work-with-different-layouts-for-the-same-page_1.png"}}

After filling in all the needed fields, do not forget to save the changes made by clicking on Save Layout.

Please note that these criteria are based on the page's "search context" on which the user is, which is directly tied to the search parameters, but that are not necessarily set manually by the store admin - the entire page automatically fits in a content context.

It happens that the offered conditions are not present on any page:

  • product pages will never have the collection context;
  • search pages (in which the department, category, brand, collections and landing pages also fit) will never have the product context.

Hence, it is not possible to asign conditions to specific product or to different layouts through a collection. You would need to register these together with the product condition.

According to the chosen conditions, an order of priority is established for the applicability of the template. The order first follows, if available, product template, category and, finally, brand. Thus, a template conditioned for a given product layout overlaps the template conditioned for the category in which this product is contained and so on.

In case of doubt with this set up, we recommend using the lid: Layout Test

Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
How inventory availability works on the product page
« Previous
Defining Window Displays
Next »
Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX community.
Join our community
Request support from VTEX
For personalized assistance, contact our experts.
Open a support ticket
GithubDeveloper portalCommunityFeedback