Design of discount labels for items on sales

Egor Polyakov24 July 2019 Technologies:mapSVGHTMLCSSPDF

Task

Quick design of stickers for discount labels of items on sales.

At result:

— Block in HTML+CSS3+SVG to visual presentation of discount table.

— Scalable PDF labels for stickers to push on board in store.

Intro

Everyone mass-market company goes to discounts and sales for some groups of items from catalog to grow up the month earning and results in sales overview.

The online stores and eshop also using the same strategy.

Quick design for online and paper catalog is need as possible (ASAP) at real practice of discount`s period.

This lesson is about this practice and how to upgrade the skills of designer or admin of online store to do discounting for catalog quickly.

Example

For example we should do the discount of winter hats, tshirts and pocket sales (more than one item in order) only with online payments.

Discount for goods in the catalog

Fixed Box Layout using HTML plus CSS3 for design of table using the visual elements of items, discount and price settings is available in this lesson step by step learning.

The visual identity of sales symbols is very actual to do focus of client on chosen items.

Use the input data of the catalog discounting.

Discount of items in catalog
Items Discount
Winter hats -30%
Tshirts -20%
Pocket sales
more than one item in order
-10%
Notice: actual only for online payments.

Notice:
Positions of areas at example are location by absolute positions on map block.
In real practice can used the geo coordinates by real data.

Let`s go to do it!

Design of discount labels for items on sales

Simple scheme to design of discount labels

Work step by step: Design of discount labels for items on sales

Study step by step

  1. Search the actual glyph icons for catalog by keywords of the choosen visual items: hat, tshirt, pocket and discounts «-10», «-20», «-30».
    Glyph icon Hat Glyph icon Tshirt Glyph icon Pocket
    Glyph icon discount -10 Glyph icon discount -20 Glyph icon discount -30
  2. Go to Inmotus SVG Generator for next use in practice special functions to do discount labels.
  3. After import chosen icons they will be displayed at list in left column.
  4. Add new styles to right column by click on button «Add style»:
    Background style Ticket Background style Guarantee label Background style Round price
    Background style Price -10 Background style Price -20 Background style Price -30
    Background style Percent Background style Round accept Background style Round cancel
  5. Choose colors for object and background of discount labels.

    Colors for labels
    Pattern Color name Hex color
    Price tags White #FFFFFF
    Background Gold #b09829
    Dark Black #111111
  6. After set of color settings use the Export function to download the resulted SVG icons and printing PDF labels.
  7. The code of HTML + CSS3 to visualisation is realised by <div> constructions (actual for responsive design).
Code of discount table
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Discount of items in catalog</title>
  6. </head>
  7. <body id="discount">
  8. <div class="discountTable">
  9. <header>
  10. <h1>Discount of items in catalog</h1>
  11. </header>
  12. <div class="content">
  13. <div class="tableHead">
  14. <div class="items">Items</div>
  15. <div class="discount">Discount</div>
  16. <div class="order">Order</div>
  17. </div>
  18. <div class="tableRow firstChild">
  19. <div class="items"><span class="winterHats"></span><b>Winter hats<small>Price: $ <s>25</s></small></b></div>
  20. <div class="discount"><span class="minus30"></span></div>
  21. <div class="order"></div>
  22. </div>
  23. <div class="tableRow">
  24. <div class="items"><span class="tshirts"></span><b>Tshirts<small>Price: $ <s>18</s></small></b></div>
  25. <div class="discount"><span class="minus20"></span></div>
  26. <div class="order"><span class="orderTshirt"></span></div>
  27. </div>
  28. <div class="tableRow pocket">
  29. <div class="items"><span class="pocketSales"></span><b>Pocket sales<small>more than one item in order</small></b></div>
  30. <div class="discount"><span class="minus10"></span></div>
  31. <div class="order"></div>
  32. </div>
  33. <div class="notice">
  34. <span class="creditCard"></span>
  35. <div class="noticeText"><b>Notice:</b> actual discount only for online payments.</div>
  36. </div>
  37. </div>
  38. </div>
  39. <style>
  40. body#discount {margin:0;padding:0;width:100%;height:100%;}
  41. div.discountTable {min-width: 320px;width: 100%;max-width: 480px;height: 395px;background: #ececec;}
  42. div.discountTable h1 {background:#2980b9;color:#fff;font-family:'Arial',sans-serif;font-weight:normal;font-size:16px;text-align:center;padding:7px 0 7px 0;margin:0;display:block;width:100%;height:18px;}
  43. div.content,div.tableRow {display:block;width:100%;height:auto;color:#111;font-family:'Arial',sans-serif;font-size:14px;}
  44. div.content div.tableHead {display: block;width: 100%;height: 30px;background: #e2e2e2;color: #333;border-bottom: 1px solid #dad9d9;}
  45. div.content div.tableHead div {padding-top:7px;}
  46. div.content div.items{width: 50%;}
  47. div.content div.order {width: 20%;}
  48. div.content div.discount {width:22%;}
  49. div.content div.items, div.content div.discount, div.content div.order {display: inline-block;padding: 9px 0 0 10px;font-size: 14px;text-shadow: 0 1px 1px #fff;}
  50. div.content div.discount {padding:0 0 0 10px !important;}
  51. div.content div.items {padding-top:0;}
  52. div.tableRow,div.notice {height:85px;vertical-align: top;border-top:1px solid #fff;padding: 0;margin: 0;}
  53. div.tableRow {font-size:14px;}
  54. div.firstChild {padding-top: 10px;height: 75px;}
  55. div.tableRow div.items small {display: inline-block;width: 200px;font-size: 13px;line-height: 1.1em;margin-top: 5px;font-weight: normal;}
  56. div.pocket div.items {display: inline-block;padding-top: 10px;}
  57. div.notice {display:block;padding:15px 10px 15px 10px;}
  58. div.notice b {font-size:13px;}
  59. div.noticeText {display: inline-block;padding-top: 5px;font-size: 13px;margin-top: 8px;color: #666;}
  60. span.winterHats {display: inline-block;margin: 12px 10px;width:40px;height:40px;background-image: url(hat.svg);background-repeat: no-repeat;background-size:40px 40px;vertical-align: top;}
  61. span.tshirts {display:inline-block;margin: 12px 10px;width:40px;height:40px;background-image:url('tshirt.svg');background-repeat:no-repeat;background-size:40px 40px;vertical-align:top;}
  62. span.pocketSales {display:inline-block;margin: 12px 10px;width:40px;height:40px;background-image:url('pocket.svg');background-repeat:no-repeat;background-size:40px 40px;vertical-align:top;}
  63. div.content div.items b {display: inline-block;width: 150px;vertical-align: top;margin-top: 15px;font-size: 15px;line-height: 1.2em;}
  64. span.minus10 {display:inline-block;margin:0;width:70px;height:70px;background-image:url('discount-pocket-10.svg');background-repeat:no-repeat;background-size:70px 70px;vertical-align: top;}
  65. span.minus20 {display:inline-block;margin:0;width:70px;height:70px;background-image:url('discount-tshirt-20.svg');background-repeat:no-repeat;background-size:70px 70px;vertical-align: top;}
  66. span.minus30 {display: inline-block;margin:0;width:70px;height:70px;background-image: url('discount-hat-30.svg');background-repeat: no-repeat;background-size:70px 70px;vertical-align: top;}
  67. span.creditCard {display: inline-block;margin: 0 8px;width: 38px;height: 38px;background-image: url('discount-percent-credit-card.svg');background-repeat: no-repeat;
  68. background-size: 38px 38px;vertical-align: top;opacity:0.7;}
  69. span.orderTshirt {display: inline-block;margin: 13px 10px;width: 40px;height: 40px;background-image: url(accept-order-tshirt.svg);background-repeat: no-repeat;
  70. background-size: 40px 40px;vertical-align: top;}
  71. </style>
  72. </body>
  73. </html>

Conclusions after the lesson

Used technical operations in touch of SVG + HTML + CSS3 gets as result the visualization of discounting table of items on sale.

Sizes of exporting in PDF are fixed in square form [512x512]px on transparent background and available for scale using vector paths in code of labels.

Bonus:

From online editor Inmotus SVG Generator you can export all created labels in SVG, PNG or PDF file formats.

Export labels in format PDF is actually and available for printing discount items on paper in catalog or advertising of discount period for cheaper prices.

Tutorial video «How it works»

Watch a tutorial video to have the first practice and knowledge about SVG Generator.

Have any questions?

We can helps you at all questions:
read more about instruments and frequently asked questions.

Ask question

Working process: step by step

← View all lessons
Share link:
Hello! We can help you.Please, choose from list.
Open FAQ for reading Ask question View tutorial video Preview Premium Graphics
Ask your questionAnswer will be in the next 24 hours.
Main questionsPlease, choose from list.
Ask question
Tutorial videofor Inmotus SVG Generator
Ask question