How do I decorate my storefront for the holiday season?

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

In this article we will show you how to make your BigCommerce storefront ready for the holidays with several tips on how do some seasonal decorating.


Please note that while we offer this tutorial and it is tested and working at the time of creation, any customization of or support for these types of articles is outside of our scope of support. If you require assistance with any design or customization, we recommend that you contact a Homestead web advisor for further assistance.

Adding a Sale Banner to your Store

Here we will show you how to add a large graphic on the main page letting your customers know that you are having a sale.

1.) Click the attachment at the bottom of this document to download the sample images used in this tutorial. You will need to unzip the graphics to your computer.
2.) Once you have those image on your computer, login to your store's control panel.
3.) Now, click on Marketing and then View Banners.

2012-02-09_1109.png

4.) Click on the button labeled Create Banner.

2012-02-09_1120.png

5.) Create a banner name (this will not be seen by anyone but you). Ex: Holiday Sale Banner

2012-02-09_1121.png

6.) Click on the Upload Image button (2012-02-09_1121_001.png) in the toolbar.

2012-02-09_1130.png

7.) Click Browse and upload the graphic that you previously downloaded to your computer (or use your own custom graphic).

2012-02-09_1122.png

8.) After you have uploaded the graphic, click the Insert button.

2012-02-09_1122_001.png

9.) Now you will see that graphic added into your banner. Now you can choose where to display it. For this example, I chose the following options:

a.) Show on Page: For a specific category
b.) Date Range: Always show this banner until I remove it
c.) Visible: Yes, this banner should be visible on my web site
d.) Location: Top of Page

10.) When you're done, click the Save button.

2012-02-09_1124_001.png

Below is what my iPhone Accessories category looks like after I added the sale banner to the store.
2012-02-09_1128.png

Back to top

Adding a Gift Boxes Image to the Bottom of the Left Column
Now I am going to show you how to add a gift box graphic image below the newsletter panel in the left column. This step assumes that you have already downloaded and unzipped the attached graphics at the end of this article.

1.) Download the holiday images bundle at the bottom of this article.
2.) Login to your store's control panel.
3.) Click on Website Content and then Image Manager.

2012-02-11_1418.png

4.) Click on the Upload Images button.

2012-02-11_1419.png

5.) Find the gift boxes image on your computer, and click Upload.

2012-02-11_1420.png

6.) A progress bar will then appear. Once your image upload, click the View Full Size link under the picture.

2012-02-11_1420_001.png

7.) Copy the highlighted portion from the address bar as you see below.

2012-02-11_1421.png

8.) Now, go back to your control panel and click Design.

2012-02-11_1422.png

9.) Click on the Browse Template Files button.

2012-02-11_1536.png

10.) Depending on your template file, you may or may not have a left column. You can tell what type of column the code refers to by the class in the <div> tag.

 

2012-02-11_1432.png

11.) To place the images at the bottom of the left/right column, find the last variable that has content in the list (in this case, it's %%Panel.SideNewsletterBox%%, %%Panel.SideLiveChatServices%% does not contain any actual content for this page.)

2012-02-11_1529.png

12.) In the top part of the left column, find that panel and click on it.

2012-02-11_1530.png

13.) Now, type in the following code near the bottom of the panel's code, and replace [IMAGE URL] with the actual path to your image.

<img src="[IMAGE URL]" width="100%" />

2012-02-11_1533.png

14.) Click Save.

2012-02-11_1531.png

You should now have gift boxes in the bottom of your side column. Here is what it looks like on my store.

2012-02-11_1532.png

 

Add Falling Snowflakes to the Background of your Page

The last part of adding holiday festivity is having snowflakes falling in your store. This is the most advanced thing that we will be doing (as it requires FTP and javascript), and again I will state that our support team will not assist you with these changes.

1.) Download and unzip the snowstorm.zip file at the bottom of this article.
2.) Login to your store's control panel.
3.) Click on Settings and then FTP Settings.

2012-02-11_1619.png

4.) Note the information for your server and username, and open your FTP program. (If you are unsure of how to do this, please visit this article to learn more about FTP.)
5.) Connect to your remote server and open the content folder.

2012-02-11_1620.png

6.) Drag the entire contents of the snowstorm folder that you unpacked into the content folder.

2012-02-11_1621.png

7.) Now, go back to your store's control panel, and click on Design.

2012-02-11_1622.png

8.) Click on the Browse Template Files button.

2012-02-11_1623.png

9.) Now, click on HTMLHead.html in the top left menu under "Files used by this template."

2012-02-11_1624.png

10.) Before the closing tag paste in the following code.


<script type="text/javascript"></script>


2012-02-11_1625.png

11.) Click Save.

2012-02-11_1626.png


 

The above tweak is not something that BigCommerce created and all credit should go to: http://www.schillmania.com/projects/snowstorm/
Nor do we guarantee that the above steps will work with future upgrades of the software.


Here you can see the javascript working on my test store. Note the small white dots everywhere.

2012-02-11_1632.png
(Click to view larger)

Here's a video of this last part of decorating your store:

 

Back to top


Attachments
Photo of Drew N

Drew N, Community Manager

  • 251,604 Points 100k badge 2x thumb

Posted 5 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.