Browse by Topic

Using X-Ray (Blueprint)

These instructions apply to our free, legacy Blueprint themes that have not been customized.  As always, we recommend backing up your current theme customizations before making any changes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.


The BigCommerce X-Ray feature is designed to speed up the template customization process by displaying the names of panel files being used on your storefront.

Follow these steps to enable X-Ray and locate a specific template file.

Enabling X-Ray

1. Go to Storefront Design › Design Options.

2. Click MoreX-Ray.

3. Click Launch X-Ray. Your homepage will load with X-Ray Mode enabled.

Each element on your homepage will be overlayed with a colored box which lists which template file is responsible for its content.

Example of the X-Ray overlay boxes on a BigCommerce homepage.

Locating Template Files

Once you have located the element whose template file you would like to edit, follow these steps.

1. Copy the file name (e.g. CategorySortBox.html) in the upper left of the overlay.

Example of a filename in an X-Ray overlay box.

2. In your control panel, go to Storefront Design › My Themes, then click Edit HTML/CSS.

3. Click Ctrl F or Command F to enable your browser's search tool, then paste the filename you copied in step 1 into the search field.

4. Once found, click the file name, and make your template updates as necessary.

Example template fie listing in the BigCommerce control panel.

Was this article helpful?