Using X-Ray (Blueprint)
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.
1. Go to Storefront Design › Design Options.
2. Click More › X-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.
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.
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.