Menu
Feedback
Start here
Tutorials
Developer portal

Known Issues
Support Rules
Troubleshooting

Frequently Asked Questions
Announcements
Tutorials
Tutorials
Explore in-depth tutorials for operating your VTEX store.
Tutorials
Storefront
Layout
Managing placeholders
Managing placeholders

Placeholders allow the store to insert four types of elements on its page:

  • Banner
  • DHTML Banner
  • Collection
  • HTML

In practice, a placeholder is a configurable snippet of code that meets store-defined conditions.

For example, you could insert a placeholder on the homepage and set it as a banner; and then pick three different images for this banner, each activated on a specific date range.

Inserting the placeholder in the template

First of all, to create a new placeholder, you need to insert the control that will define it in the template.

This is the placeholder control: <vtex:contentPlaceHolder id="" />

It creates a configurable element in the part of the code where it is inserted.

It is important to enter an id value. It will be the identifier of that placeholder in the system.

{"base64":"  ","img":{"width":944,"height":668,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":65164,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/managing-placeholders_1.png"}}

Configuring the placeholder

Once the placeholder control has been inserted into the template, you can configure it in the settings of the layout that uses this template.

  1. Open the layout and then click on the Settings tab. The new placeholder should appear there, with the name equal to the id value defined in the control. For now, this placeholder is empty, meaning there are no objects inside it.
    {"base64":"  ","img":{"width":1360,"height":642,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59019,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/managing-placeholders_2.png"}}
  2. To insert an object, click on add object.
  3. Then choose the object type and click on the Add button.
  4. Finally, click on the Save Settings button.

You can now edit the object inserted in the placeholder.

To do this, click on the pencil icon inside the object, and then click on add content.

{"base64":"  ","img":{"width":2240,"height":636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":71389,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/managing-placeholders_3.png"}}

You can now name this object, upload images to it and configure the conditions under which it will be rendered.

At the end, click on the Add Content List button and then save the content.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 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