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.
To go to another page on your site, click Turn Off, then navigate to the page you would like to x-ray. Once there, click Turn On. Note that in order to use the X-Ray feature on secure pages, such as the cart, checkout, and account pages, you must have a private SSL certificate installed on your store.
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.