Create custom Panel in Bigcommerce| Bigcommerce Tutorial

Create a Custom Panel in Bigcommerce | Bigcommerce Tutorial

2 min read

This Bigcommerce Tutorial is about creating custom Panel in Bigcommerce. Before we start about creating custom Panel in Bigcommerce, basic understanding about Panel is required.

Table of Contents

What are Panels ?

Panels are dynamic and reusable block used by Bigcommerce to create a page. These block are repetitive and these block determine the overall layout of the website.

Can we create a custom Panel in Bigcommerce ?

Definitely, custom Panels can be created in Bigcommerce to use the codes of your own while customizing the Bigcommerce free or Premium theme. In this tutorial we will create a custom Panel that will hold a vimeo video embed code to show on the home page of Bigcommerce Theme. To create a custom Panel please follow the steps:

Create a HTML file, say it vimeoVideo.html

<!-- Empty HTML Page -->










<!-- empty HTML page ends -->

Remember to clear default HTML tags if you are using Adobe Dreamweaver to create the HTML file. The HTML file should be clean. as above.

Place your code in the empty HTML file.

<!-- code for custom Panel goes here -- the example shows adding avimeo video -->
<iframe src="//player.vimeo.com/video/83754278" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/83754278">NEPAL BIKETRIAL</a> from <a href="http://vimeo.com/joachim">Joachim Skj&aelig;vestad</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

When you call the custom Panel into any other Panels, it starts with “%% Panel.” and ends with “filename%%” . Here the file name is “vimeoVideo” .
The code when you call vimeoVideo.html would be like : %%Panel.vimeoVideo%% .

The code below is a default HTML page of BluePrint Theme of Bigcommerce, where the vimeoVideo is called.

%%Panel.HTMLHead%%
	<body id="home">
		<div class="page">
			%%Panel.Header%%
			<div class="main">
				<div class="inner">
					%%Panel.WrapperBanner%%
					<div class="Content Widest" id="LayoutColumn1">
						%%Panel.HomeSlideShow%%
						%%Banner.TopBanner%%
						%%Discount.FreeShippingEligibility%%
						%%Panel.HomeFeaturedProducts%%
						%%Panel.SideTopSellers%%
						%%Panel.HomeNewProducts%%
					</div>
				</div>
<!-- vimeo video -->
%%Panel.vimeoVideo%%
<!-- vimeo video ends -->
				%%Banner.BottomBanner%%
			</div>
			%%Panel.Footer%%
		</div>
	</body>
</html>

Not only for the home page; Now you can call %%Panel.vimeoVideo%% in any Panels where you need to call the video.