{"section":"troubleshooting","requestedLocale":"en","requestedSlug":"my-storefront-has-layout-issues","locale":"en","slug":"my-storefront-has-layout-issues","path":"docs/en/troubleshooting/data-access-and-security/my-storefront-has-layout-issues.md","branch":"main","content":"This article helps you investigate layout issues in your storefront. By following the instructions in this guide, you will be able to compare different versions of the product listing page, isolate the root causes of layout issues, and gather evidence to share with VTEX Support or your implementation partner if needed.\n\n## Solution\n\nTo investigate layout issues, consider the following solutions:\n\n- **[Blocking customizations to isolate storefront issues](#blocking-customizations-to-isolate-storefront-issues):** Temporarily disable customizations to check if the problem is caused by custom code.\n- **[Comparing different versions of your storefront](#comparing-storefront-versions):** Compare your store's current layout with an alternative version to see if the issue is related to a specific customization.\n\n### Blocking customizations to isolate storefront issues\n\nThis solution helps determine whether a storefront issue is caused by custom code (such as JavaScript, CSS, or third-party scripts). By temporarily blocking customizations, you test the store using only VTEX native behavior.\n\nTo run the test, you must remove the customizations using the browser's own native developer tool. Below are the instructions for doing it in Google Chrome using **DevTools**.\n\nTo configure [Chrome DevTools](https://developer.chrome.com/docs/devtools/), follow the steps below.\n\n1. Open [Google Chrome](https://www.google.com/chrome/) on your computer.\n2. Press the `F12` button on your keyboard or right-click anywhere on the screen with your mouse and select **Inspect**.\n3. Click the vertical ellipsis in the top right corner of the page, as shown in the image below.\n4. Select **More tools** and then **Request conditions** to block all customizations made via CSS, JavaScript, and Google Tag Manager.\n\n![legado-02-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/shopping/legado-02-en.png)\n\n5. On the **Request conditions** tab, click `Add rule` to define the first resource to be blocked. To add more resources, click `+` again and, after defining it, click `Add`. This configuration only needs to be set once in your browser. Include the items below:\n\n- `*:/arquivos/*.js`\n- `*:/files/*js`\n- `*:/arquivos/*.css`\n- `*:/files/*.css`\n- `*://www.googletagmanager.com/gtm.js*`\n\n![request-conditions-02-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/shopping/request-conditions-02-en.png)\n\n6. Check the **Enable blocking and throttling** option and all the checkboxes next to each configured resource. This will be the default configuration, with all blocking options enabled.\n7. Now refresh the page. It will display without the custom components.\n\nTo view the customizations again, uncheck the **Enable blocking and throttling** option and refresh the page.\n\nCheck whether the unwanted behavior you initially observed occurs only when the customization is active. If so, contact your storefront team and have them investigate the behavior.\n\nIf the unwanted behavior persists even when customizations are blocked, open a ticket with [VTEX Support](https://supporticket.vtex.com/support).\n\n### Comparing storefront versions\n\nThis solution should be used when you want to test a page URL that has a problem with the VTEX native layout or with a different layout by changing the template or controls. To perform this test, follow the steps below:\n\n1. In the VTEX Admin, go to **Storefront > Layout > CMS** and create a new template in **HTML Templates**. Make sure the new template is the same type as the one currently used on the affected page. For example, if the issue occurs on a category page, you should create a new category template. For more details on how to create a template, see the guide [Creating and editing a page template](https://help.vtex.com/docs/tutorials/how-to-create-a-page-template).\n2. In the created template, keep the basic layout structure and use only the [native controls](https://developers.vtex.com/docs/guides/list-of-controls-for-templates) required to render the page.\n3. Go to the layouts section in **CMS > Sites and channels** and locate the folder for the page with the issue. For example, if the problem is on a category page, you should:\n   - Click the desired website.\n   - Click the root folder (`/`).\n   - Click the **Category > @category@** folder.\n   - In the window on the side, click `new layout` to create a new layout.\n4. Associate the created template with the new layout. For more details, see the guide [Associating a template with a layout](https://help.vtex.com/docs/tutorials/associating-a-template-with-a-layout).\n5. In the **Properties** section of the new layout, find the LID.\n6. Go to the page with the issue and add the layout's LID as a `QueryString` (`?` or `&`) to the URL in the browser's address bar.\n\nIf the problem doesn't occur with the native layout, it's a customization issue. If the issue persists, open a ticket with [VTEX Support](https://supporticket.vtex.com/support)."}