Add Product Picture Ribbon Tab

  • In the product picture ribbon tab, you can configure the ribbons that you want to display on the store front Available Product Tokens - The tokens will be automatically replaced with their values for the product, on which the ribbon will appear.

${old-price-new-price-difference-value}
${old-price-new-price-difference-percentage}
${product-quantity}
${max-discount-value}
${max-discount-percentage}
${special-price-expires-in}

Token

  1. Ribbon Text : Here you can use the available product tokens.The tokens will be automatically replaced with their values for the product, on which the ribbon will appear. You can also specify the text of the ribbon. This text will appear over the product image.
  2. Enabled : This setting allows you to enable or disable the current product ribbon..
  3. Position : The default location where the ribbon will appear relative to the picture of the product.
  4. Picture : From here, you can upload a new picture or delete an existing one.
  5. Text Style : Here you can specify CSS styles that will be applied only to the ribbon text (label) element.
  6. Image style : Here you can specify CSS styles that will be applied only to the ribbon image (<img>) element.
  7. Ribbon Style : Here you can specify CSS styles that will be applied only to the ribbon HTML element. The ribbon HTML element is the main element that wraps the ribbon image and ribbon text elements.

← Previous | Next →