Sale Pricing

Owned by Antonio Elena (Unlicensed)
Last updated: Nov 24, 2021
3 min read

Merchants rely on discounts to acquire new customers, increase sales, increase customer retention, get rid of unsold or declining products or promoting new products.

What is Sale Pricing?

Sale pricing is useful for getting customer attention during a flash sale. With this feature the Front will display the default price crossed out next to the discount price directly on a product module, as well as category and product pages (see examples below).

When Sale Price is set on a product, that value will override the Default Price on the storefront.

Category page

 

Product page

 

Note: If sale price is higher than base price, the previous price is NOT shown

For placing entire brands or categories on sale, BigCommerce offers the feature “Automatic Promotions” which is out of scope.

 

How to set Sale Pricing for simple Products

This can be done in the backoffice of your shop (BigCommerce).

BigCommerce documentation on how to set Sale Pricing https://support.bigcommerce.com/s/article/Using-Sale-Pricing?language=en_US

Steps:

  1. Edit the product

  2. Go to the Pricing section

  3. Click on Show Advanced Pricing

  4. Add the discounted price in the field Sale Price

  5. Save → Triggers the regeneration of the page in Styla Front

Things to consider

  • If Sale Price is higher than Default Price, it won’t be displayed

  • When bulk prices are set (Bulk Pricing), these will overwrite the Sale Price

 

How to set Sale Pricing for Products with variants

This can be done in the backoffice of your shop (BigCommerce).

Steps:

  1. Edit the product

  2. Go to the Variations section

  3. Click on Edit columns

  4. Add Sale Price

  5. Set the Sale Price per variation

  6. Update the description of the product (you simply add/remove some white space)

  7. Save → Triggers the regeneration of the page in Styla Front if step 6 is done

Things to consider

  • If Sale Price is higher than Default Price, it won’t be displayed

  • When bulk prices are set (Bulk Pricing), these will overwrite the Sale Price

  • For products with variants, the Sale Price included in the pricing section will be overwritten by the value set in the variants table.

  • To re-render the page, it is required to update the product description

Styling

  • While Customers can style the Sale Price per Front, they cannot change the position.

  • To change the sale pricing color in the Product Details module and the Product Listing Module all at once, one needs to add/change the highlight color in the front’s Theme settings' top level colors object in the Organization Manager. e.g. if one were to change the styla stage front’s theme settings so sale pricing is shown in blue it could look as follows:

    "colors": { "link": "#5ca5ed", "caption": "#999999", "primary": "#D8C6BB", "bodyCopy": "#666666", "contrast": "#FFFFFF", "headline": "#17332f", "linkHover": "{colors.bodyCopy}", "highlight": "blue" },

    So to change the styling of individual instances of sale pricing one needs to alter the Module Settings json for the front one wishes to alter. To e.g. change the color of the sale price (incl. tax) in the Product Details Module, one needs to add the follow to the “PRODUCTDETAILS” object.

    "salePrice": { "all": { "color": "#eb0037" } },