Andrew’s Awesome Weekly Tip #4 : Creating a Sale Page


Like many, I’m a bargain hunter. The first thing I do when shopping – online or in a retail store – is check out the sales section. Having a Sale section on your website is a great way to catch customer’s attention and get them to make an impulse buy.

Although DecoNetwork does not automatically have a Sale page set up, we can take a couple of simple steps to make our own.

Note: This tutorial is for blank products only. If there is interest, I will follow-up with a tutorial for pre-decorated products later on.

  1. Create a “Sale” category.Login to your Manage Fulfillment Center and navigate to “Products”. On the left side, you’ll see the “Categories” menu. Click “add” and name your new category “Sale”. Make sure it is a top-level category, and not a sub-category. (You can always drag and drop to move the category placement around).aawt4_1
  2. Add products to your new “Sale” category.Click “configure” above the product that you want to appear on the Sale page. Now, click on “Categories” from the left-menu. Check the “Sale”
    category. (Your products can belong to multiple categories, so that’s all you have to do!) Repeat this step for all products that you want to appear on the “Sale” page.aawt4_2
  3. Create Your Sale Page. Navigate to Websites > Manage > Website Pages. From the left menu, click “Add Page”. Name your page “Sale”.
    Under Body Settings for this new page, click “configure” next to “Blank Products”. Name the Panel Title “Sale Items”. Under the “category” dropdown menu, select the “Sale” category which we just created. Now, all of the products in the sale category will display on this page. Click save.aawt4_3

Awesome! Now we have a page that is displaying any of the products that belong to the “Sale” category. Yours should look something like this (except probably with more products!)


The only problem? There is no indicator of the original price! As a customer, I’m not convinced that an item is on sale until I see some red numbers! We can take things one step further by tricking the system into adding some extra “sale” content to your product.

  1. Go back to your product configuration (MFC > Products > Configure). On the product name field, paste this code:
    <span class="sale">Sale! Originally $5.50</span>

    (Feel free to change “Sale! Originally $5.50” to anything you’d like. Just make sure that there is a space before the first word!)
    While you’re here, feel free to add some additional text in the “Description” field about the product being on sale. Click save when you are done. Repeat this for the other Sale products.


  2. Paste this CSS into your Custom CSS Template (Websites > Manage > Appearance >Customize Template CSS > Create Custom CSS). Feel free to change the code if you’d like.
    .sale {
      color: red;
      font-weight: bold;

Awesome! Now our Sales page should look something like this:


Congrats! Now go take advantage of your new Sale page and market it to the world! Share on your social media accounts, and send out an e-mail blast!

Thanks, and until week, Happy Deco-ing!


No Comment.