Placing the Live Shopping component

2 min read

Once your event is configured on Bundle or an external studio and before transmitting it, you have to place the Live Shopping component on your site, whether on the store homepage or a landing page. The configuration steps vary depending on your store frontend solution:

Store Framework (VTEX IO)
Legacy CMS Portal
Headless CMS

After configuring the Live Shopping component, it may take five to ten minutes for the changes to be reflected on the storefront due to caching.

Store Framework (VTEX IO)

For stores using Store Framework, follow the steps below to place the Live Shopping component from Site Editor:

In the VTEX Admin, go to Storefront > Site Editor, or type Site Editor in the search bar at the top of the page.
On the Blocks list on the right side of the page, select the Live Shopping block.
Activate the Show component option.

${"base64":" ","img":{"width":309,"height":354,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":18686,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/omnichannel/vtex-live-shopping-getting-started/placing-the-live-shopping-component_1.png"}}$

Click the Events (Live) dropdown and select the desired event. The options displayed only include events with Live status.
Click Save.

Legacy CMS Portal

For stores using Legacy CMS Portal, follow the steps below to place the Live Shopping component:

In the Event Information page of the created event, click the arrow icon.
After turning on the event, go to the CMS Configuration section.
In Script for template, select CMS template.
Copy the code in Script for template.

${"base64":" ","img":{"width":1440,"height":321,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":54290,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/omnichannel/vtex-live-shopping-getting-started/placing-the-live-shopping-component_2.png"}}$

Go to Storefront > Layout, or type Layout in the search bar at the top of the page.
Click CMS > HTML Templates.
Paste the code in the desired HTML file.

Headless CMS

For stores using Headless CMS, follow the steps below to place the Live Shopping component:

In the Event Information page of the created event, click the arrow icon.
Go to the CMS Configuration section.
In Script for template, select External template.
Copy the code in Script for template.

${"base64":" ","img":{"width":1453,"height":318,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":49461,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/omnichannel/vtex-live-shopping-getting-started/placing-the-live-shopping-component_3.png"}}$

Paste the code in the desired HTML file.

After configuring the event, you can see a preview by clicking the preview button. However, since this preview only displays certain Live Shopping components, we highly recommend doing additional checks on the entire website to ensure everything is working properly.