Docs

VIVAshop Documentation

Custom Labels

 

The “Custom Labels” add-on allows you to add customizable labels with multiple settings for backgrounds, borders, texts, icons. It also includes 13 animations which can be individually assigned to the whole label, text and icon. Each label can be set to display automatically based on various conditions or may be manually assigned to products and catalog promotions.

 

 

 

Please follow the steps below in order to learn how to create and customize Custom Labels.

 

  • Step 1

In your admin panel, go to “Add-ons” - “EnergoThemes Add-ons” - “Custom labels”

 

  • Step 2

In the next page click on the right side “+ Add label” to add a new Label. For the sake of the example, we have clicked on the label called “Top rated” that we have created.

 

  • Step 3

In the newly opened page, choose your own settings for your newly created Custom label. As an example, we’ll show you the settings we have chosen for the “Top rated” label. When you’re done, click on the top right blue “Save” button

 

A: Update for all languages - If you have more than one language you can check this box in order to update any modifications you make to a Custom label to the other language(s) as well
B: Name - Choose a name that will be used only in the administrator interface so you can easily identify each label
C: Position - Type the position you want your block among the other Custom labels
D: Use available period - Enable this setting if you want to display the label only during a certain period
E: Available from - Select a beginning date from when this Custom label will start being displayed
F: Available to - Select an ending date after which this Custom label will no longer be displayed
G: Status - Chose if this Custom label should be active or disabled

 

  • Step 4

In order to change the Custom label settings, click on the “Settings” tab

 

Text and icon

 

A: Label text - Add your Custom label text to display on the storefront
B: Use icon -Check this box if you want to add an icon before the Custom label text. If this box remains unchecked, then no icon will be displayed for this Custom label
  • B1: Type - If you chose to add an icon to your Custom label, select the type of icon you want to use. You can choose between picking a “Font Awesome” icon, or add your own “Custom” icon. We have chosen a Font Awesome icon in this example
  • B2: Icon - Select the icon you want to use from the Icon picker

 

Desktop - General settings

 

A: Background - Enable this setting if you want to display a background to your Custom label. When enabled, you will have the following options:
  • A1: Background Color - From the color picker choose the color for your Custom label
  • A2: Opacity - Enter the desired opacity level, in percentages
B: Border - If this option is checked, you will have the following options:
  • B1: Border size - Enter the size in pixels for the Custom label border

  • B2: Border style - Here you have 3 options that you can select from the dropdown:

    • - Solid
    • - Dashed
    • - Dotted
  • B3: Color - Pick the color for your button border
C: Animation - Enable this setting to add an animation to your Custom label. When enabled, you will have the following options:

  • C1: Animation name - Here you have 13 options that you can select from the dropdown:

    • - Flash
    • - Pulse
    • - RubberBand
    • - Swing
    • - Tada
    • - Wobble
    • - Rotate
    • - ShakeX
    • - ShakeY
    • - HeadShake
    • - Jello
    • - HeartBeat
    • - Flip
  • C2: Animation speed - Enter the speed of the animation in milliseconds. So if you want the animation to take half a second use 500ms and if you want it to take five seconds use 5000ms

  • C3: Animation timing - Here you have 5 options that you can select from the dropdown:

    • - Linear - The animation has the same speed throughout its animation cycle
    • - Ease - The animation starts slow, speeds up, then slows down
    • - Ease-in - The animation has a slow start, then gradually speeds up
    • - Ease-out - The animation has a quick start and slow end
    • - Ease-in-out - The animation has a slow start and end

 

D: Show on product listing - Enable this setting to display the Custom label on the product listing. If this option is checked, you will have the following options:
  • D1: Padding - Set the padding for your Custom label

 

Padding is used to generate space around an element's content, inside of any defined background and border. For example, if you set a padding to the left of the Custom label, there will be a space created to the left of the Custom label content, and the content will move to the right without the background/border moving. The more padding to the left, the more the content will move to the right. The setting format is like for example, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so Custom label content is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the label content is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the Custom label content is pushed up), and “LL” is the size of the padding left (space is created on the left, so Custom label content is pushed to the right).

 

  • D1: Margin - Set the spaces you want to add outside the Custom label

 

Margins are used to generate space around an element's content, outside of any defined background and border. For example, if you set a margin to the left of the Custom label, the Custom label will be pushed to the right including the background/border. If you set a margin up, the Custom label will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (Custom label is pushed to the bottom), “RR” is the size of the margin right (Custom label is pushed to the left), “BB” is the size of the margin bottom (Custom label is pushed up), and “LL” is the size of the margin left (Custom label is pushed to the right).

 

  • D3: Border size - Enter the size in pixels for the Custom label border
  • D4: Rounded corners - Set the corner radius for your Custom label

 

The setting format is like for example, “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “10px 0px 10px 0px”, meaning that all background corners have a 10px radius in the top left and bottom right.

 

E: Show on product page - Enable this setting to display the Custom label on the product page. If this option is checked, you will have the following options:
  • E1: Padding - Enter the padding values
  • E2: Margin - Enter the margin values
  • E3: Border size - Enter the size in pixels for the Custom label border
  • E4: Rounded corners - Enter the rounded corner values for your Custom label
F: Show on sidebar products - Enable this setting to display the Custom label on the sidebar products. If this option is checked, you will have the following options:
  • F1: Padding - Enter the padding values
  • F2: Margin - Enter the margin values
  • F3: Border size - Enter the size in pixels for the Custom label border
  • F4: Rounded corners - Enter the rounded corner values for your Custom label

 

Desktop - Text settings

 

A: Enabled - Enable the Custom label text
B: Label text color - Set the color of the Custom label text. Simply choose from the color picker
C: Font weight - Set the wight of the Custom label text. You have 3 options here:
  • Normal
  • Light
  • Bold
D: Font style - Set the style of the Custom label text. You have 2 options here:
  • Normal
  • Italic
E: Animation - Enable this setting if you add an animation to your Custom label text. When enabled, you will have the following options:

  • E1: Animation name - Here you have 13 options that you can select from the dropdown:

    • - Flash
    • - Pulse
    • - RubberBand
    • - Swing
    • - Tada
    • - Wobble
    • - Rotate
    • - ShakeX
    • - ShakeY
    • - HeadShake
    • - Jello
    • - HeartBeat
    • - Flip
  • E2: Animation speed - Enter the speed of the animation in milliseconds. So if you want the animation to take half a second use 500ms and if you want it to take five seconds use 5000ms

  • E3: Animation timing - Here you have 5 options that you can select from the dropdown:

    • - Linear - The animation has the same speed throughout its animation cycle
    • - Ease - The animation starts slow, speeds up, then slows down
    • - Ease-in - The animation has a slow start, then gradually speeds up
    • - Ease-out - The animation has a quick start and slow end
    • - Ease-in-out - The animation has a slow start and end
F: Show on product listing - Enable this setting to display the Custom label text on the product listing. If this option is checked, you will have the following options:
  • F1: Font size - The size of the Custom label text in pixels on the product listing
  • F2: Margin - Set the spaces you want to add outside the Custom label text on the product listing
G: Show on product page - Enable this setting to display the Custom label text on the product page. If this option is checked, you will have the following options:
  • G1: Font size - The size of the Custom label text in pixels on the product page
  • G2: Margin - Set the spaces you want to add outside the Custom label text on the product page
H: Show on sidebar products - Enable this setting to display the Custom label text on the sidebar products. If this option is checked, you will have the following options:
  • H1: Font size - The size of the Custom label text in pixels on the sidebar products
  • H2: Margin - Set the spaces you want to add outside the Custom label text on the sidebar products

 

Desktop - Icon settings

 

A: Enabled -Enable the Custom label icon
B: Icon color - From the color picker choose the color for the Custom label icon
C: Animation - Enable this setting if you add an animation to your Custom label icon. When enabled, you will have the following options:

  • C1: Animation name - Here you have 13 options that you can select from the dropdown:

    • - Flash
    • - Pulse
    • - RubberBand
    • - Swing
    • - Tada
    • - Wobble
    • - Rotate
    • - ShakeX
    • - ShakeY
    • - HeadShake
    • - Jello
    • - HeartBeat
    • - Flip
  • C2: Animation speed - Enter the speed of the animation in milliseconds. So if you want the animation to take half a second use 500ms and if you want it to take five seconds use 5000ms

  • C3: Animation timing - Here you have 5 options that you can select from the dropdown:

    • - Linear - The animation has the same speed throughout its animation cycle
    • - Ease - The animation starts slow, speeds up, then slows down
    • - Ease-in - The animation has a slow start, then gradually speeds up
    • - Ease-out - The animation has a quick start and slow end
    • - Ease-in-out - The animation has a slow start and end
D: Show on product listing - Enable this setting to display the Custom label icon on the product listing. If this option is checked, you will have the following options:
  • D1: Font size - The size of the Custom label icon in pixels on the product listing
  • D2: Margin - Set the margin you want to add outside the Custom label icon on the product listing
E: Show on product page - Enable this setting to display the Custom label icon on the product page. If this option is checked, you will have the following options:
  • E1: Font size - The size of the Custom label icon in pixels on the product page
  • E2: Margin - Set the margin you want to add outside the Custom label icon on the product page
F: Show on sidebar products - Enable this setting to display the Custom label icon on the sidebar products. If this option is checked, you will have the following options:
  • F1: Font size - The size of the Custom label icon in pixels on the sidebar products
  • F2: Margin - Set the margin you want to add outside the Custom label icon on the sidebar products

 

Phone - General settings

 

A: Enabled - Enable the Custom label on phones
B: Background - Enable this setting if you want to display a background to your Custom label. When enabled, you will have the following options:
  • B1: Background Color - From the color picker choose the color for your Custom label
  • B2: Opacity - Enter the desired opacity level, in percentages
C: Border - If this option is checked, you will have the following options:
  • C1: Border size - Enter the size in pixels for the Custom label border

  • C2: Border style - Here you have 3 options that you can select from the dropdown:

    • - Solid
    • - Dashed
    • - Dotted
  • C3: Color - Pick the color for your button border
D: Animation - Enable this setting to add an animation to your Custom label. When enabled, you will have the following options:

  • D1: Animation name - Here you have 13 options that you can select from the dropdown:

    • - Flash
    • - Pulse
    • - RubberBand
    • - Swing
    • - Tada
    • - Wobble
    • - Rotate
    • - ShakeX
    • - ShakeY
    • - HeadShake
    • - Jello
    • - HeartBeat
    • - Flip
  • D2: Animation speed - Enter the speed of the animation in milliseconds. So if you want the animation to take half a second use 500ms and if you want it to take five seconds use 5000ms

  • D3: Animation timing - Here you have 5 options that you can select from the dropdown:

    • - Linear - The animation has the same speed throughout its animation cycle
    • - Ease - The animation starts slow, speeds up, then slows down
    • - Ease-in - The animation has a slow start, then gradually speeds up
    • - Ease-out - The animation has a quick start and slow end
    • - Ease-in-out - The animation has a slow start and end

 

E: Show on product listing - Enable this setting to display the Custom label on the product listing. If this option is checked, you will have the following options:
  • E1: Padding - Set the padding for your Custom label

 

Padding is used to generate space around an element's content, inside of any defined background and border. For example, if you set a padding to the left of the Custom label, there will be a space created to the left of the Custom label content, and the content will move to the right without the background/border moving. The more padding to the left, the more the content will move to the right. The setting format is like for example, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so Custom label content is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the label content is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the Custom label content is pushed up), and “LL” is the size of the padding left (space is created on the left, so Custom label content is pushed to the right).

 

  • E1: Margin - Set the spaces you want to add outside the Custom label

 

Margins are used to generate space around an element's content, outside of any defined background and border. For example, if you set a margin to the left of the Custom label, the Custom label will be pushed to the right including the background/border. If you set a margin up, the Custom label will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (Custom label is pushed to the bottom), “RR” is the size of the margin right (Custom label is pushed to the left), “BB” is the size of the margin bottom (Custom label is pushed up), and “LL” is the size of the margin left (Custom label is pushed to the right).

 

  • E3: Border size - Enter the size in pixels for the Custom label border
  • E4: Rounded corners - Set the corner radius for your Custom label

 

The setting format is like for example, “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “10px 0px 10px 0px”, meaning that all background corners have a 10px radius in the top left and bottom right.

 

F: Show on product page - Enable this setting to display the Custom label on the product page. If this option is checked, you will have the following options:
  • F1: Padding - Enter the padding values
  • F2: Margin - Enter the margin values
  • F3: Border size - Enter the size in pixels for the Custom label border
  • F4: Rounded corners - Enter the rounded corner values for your Custom label
G: Show on sidebar products - Enable this setting to display the Custom label on the sidebar products. If this option is checked, you will have the following options:
  • G1: Padding - Enter the padding values
  • G2: Margin - Enter the margin values
  • G3: Border size - Enter the size in pixels for the Custom label border
  • G4: Rounded corners - Enter the rounded corner values for your Custom label

 

Phone - Text settings

 

A: Enabled - Enable the Custom label text
B: Label text color - Set the color of the Custom label text. Simply choose from the color picker
C: Font weight - Set the wight of the Custom label text. You have 3 options here:
  • Normal
  • Light
  • Bold
D: Font style - Set the style of the Custom label text. You have 2 options here:
  • Normal
  • Italic
E: Animation - Enable this setting if you add an animation to your Custom label text. When enabled, you will have the following options:

  • E1: Animation name - Here you have 13 options that you can select from the dropdown:

    • - Flash
    • - Pulse
    • - RubberBand
    • - Swing
    • - Tada
    • - Wobble
    • - Rotate
    • - ShakeX
    • - ShakeY
    • - HeadShake
    • - Jello
    • - HeartBeat
    • - Flip
  • E2: Animation speed - Enter the speed of the animation in milliseconds. So if you want the animation to take half a second use 500ms and if you want it to take five seconds use 5000ms

  • E3: Animation timing - Here you have 5 options that you can select from the dropdown:

    • - Linear - The animation has the same speed throughout its animation cycle
    • - Ease - The animation starts slow, speeds up, then slows down
    • - Ease-in - The animation has a slow start, then gradually speeds up
    • - Ease-out - The animation has a quick start and slow end
    • - Ease-in-out - The animation has a slow start and end
F: Show on product listing - Enable this setting to display the Custom label text on the product listing. If this option is checked, you will have the following options:
  • F1: Font size - The size of the Custom label text in pixels on the product listing
  • F2: Margin - Set the spaces you want to add outside the Custom label text on the product listing
G: Show on product page - Enable this setting to display the Custom label text on the product page. If this option is checked, you will have the following options:
  • G1: Font size - The size of the Custom label text in pixels on the product page
  • G2: Margin - Set the spaces you want to add outside the Custom label text on the product page
H: Show on sidebar products - Enable this setting to display the Custom label text on the sidebar products. If this option is checked, you will have the following options:
  • H1: Font size - The size of the Custom label text in pixels on the sidebar products
  • H2: Margin - Set the spaces you want to add outside the Custom label text on the sidebar products

 

Phone - Icon settings

 

A: Enabled -Enable the Custom label icon
B: Icon color - From the color picker choose the color for the Custom label icon
C: Animation - Enable this setting if you add an animation to your Custom label icon. When enabled, you will have the following options:

  • C1: Animation name - Here you have 13 options that you can select from the dropdown:

    • - Flash
    • - Pulse
    • - RubberBand
    • - Swing
    • - Tada
    • - Wobble
    • - Rotate
    • - ShakeX
    • - ShakeY
    • - HeadShake
    • - Jello
    • - HeartBeat
    • - Flip
  • C2: Animation speed - Enter the speed of the animation in milliseconds. So if you want the animation to take half a second use 500ms and if you want it to take five seconds use 5000ms

  • C3: Animation timing - Here you have 5 options that you can select from the dropdown:

    • - Linear - The animation has the same speed throughout its animation cycle
    • - Ease - The animation starts slow, speeds up, then slows down
    • - Ease-in - The animation has a slow start, then gradually speeds up
    • - Ease-out - The animation has a quick start and slow end
    • - Ease-in-out - The animation has a slow start and end
D: Show on product listing - Enable this setting to display the Custom label icon on the product listing. If this option is checked, you will have the following options:
  • D1: Font size - The size of the Custom label icon in pixels on the product listing
  • D2: Margin - Set the margin you want to add outside the Custom label icon on the product listing
E: Show on product page - Enable this setting to display the Custom label icon on the product page. If this option is checked, you will have the following options:
  • E1: Font size - The size of the Custom label icon in pixels on the product page
  • E2: Margin - Set the margin you want to add outside the Custom label icon on the product page
F: Show on sidebar products - Enable this setting to display the Custom label icon on the sidebar products. If this option is checked, you will have the following options:
  • F1: Font size - The size of the Custom label icon in pixels on the sidebar products
  • F2: Margin - Set the margin you want to add outside the Custom label icon on the sidebar products

 

  • Step 5

In order to change when the Custom label is displayed, click on the “Conditions” tab

 

Type - Set the type for this Custom label. Here you have multiple options that you can select from the dropdown: NOTE: that certain options will not be displayed if the relevant core CS-Cart/Multi-Vendor addon is not enabled and active.
  • - Manual - Manually assign from the product or promotion edit page
  • - Picker - Displayed on all selected products, categories and vendors (vendors picker available only on Multi-Vendor installations)
  • - Free shipping - Displayed instead of the default Free shipping label
  • - Stock - Displayed if the product stock is below the inserted value
  • - Newest - Displayed if the product was created according the inserted value
  • - Discount - Displayed if the product has a discount above the inserted value
  • - Popularity - Displayed if the product has a popularity above the inserted value
  • - Sales - Displayed if the product sales are above the inserted value (requires the core addon "Bestsellers & On-Sale Products" active)
  • - Review count - Displayed if the product has more reviews than the inserted value (requires the core addon "Product reviews" active)
  • - Review rating - Displayed if the product reviews average rating is above the inserted value (requires the core addon "Product reviews" active)
  • - Custom - Displayed if the product meets any condition

 

Type - Manual

 

A: Hide for vendors - Enable this settings if you want to hide the Custom Label from the product editing page of the vendor administrator interface. This is useful for Marketplace owners who want to add a label like "We recommend" or "Our pick" to certain products. NOTE: this settings will only appear on Multi-Vendor installations

 

Type - Picker

 

A: Products - Select which products will display this Custom Label by clicking the "Add products" button
B: Categories - Select which categories will display this Custom Label by clicking the "Add categories" button
C: Vendors - Select which products will display this Custom Label by clicking the "Add vendors" button. NOTE: this settings will only appear on Multi-Vendor installations

 

Type - Free shipping

 

Displayed instead of the default Free shipping label

 

Type - Stock

 

A: In stock below - Enter the number of items a product must be below in order for the Custom Label to be displayed. This is useful if you want to display a label like "Few remaining" or "Last items"

 

Type - Newest

 

A: Product created - Enter the number of days which a product creation date must be below in order for the Custom Label to be displayed. NOTE: this is based on the store Time zone so if it set not set to your time zone, the Custom Label may be displayed for a longer or shorter amount of time.

 

Type - Discount

 

A: Discount above - Enter the discount value a product must be above in order for the Custom Label to be displayed

 

Type - Popularity

 

A: Product popularity above - Enter the popularity value a product must be above in order for the Custom Label to be displayed. NOTE: This can be seen on the product editing page in the "Extra" section

 

Type - Sales

 

A: Minimum sales amount - Enter the minimum sales amount a product must have in order for the Custom Label to be displayed. NOTE: This requires the "Bestsellers & On-Sale Products" active and can be seen on the product editing page in the "Add-ons"tab "Bestselling" section

 

Type - Review count

 

A: Reviews count above - Enter the minimum reviews count a product must have in order for the Custom Label to be displayed. NOTE: This requires the "Product reviews" active and can be seen on the product editing page in the "Reviews"tab on the right side

 

Type - Review rating

 

A: Reviews rating above - Enter the reviews rating a product must be above in order for the Custom Label to be displayed. NOTE: This requires the "Product reviews" active and can be seen on the product editing page in the "Reviews"tab on the left side

 

Type - Custom

 

The custom type is a combination of all the conditions already explained in this section

 

Custom Labels with the Type either Manual or Custom can be manually assigned to products from the product editing page

 

Product editing page location

 

Custom label - Enable the Custom Labels that you want to display on the product and click the Save button

 

Promotion editing page location

 

Custom label - Enable the Custom Labels that you want to display on the product in this promotion and click the Save button. NOTE: Only Catalog promotions will display this setting

 

  • Step 6

Repeat all of the above steps in order to create as many “Custom Labels”, as well as customize them as per your own needs.