Apply graphic badges to highlight discounts, promotions, and key features of your products item.

Features

• Show badges in the image of the product item (Preview)
• Show badges in the images of the product detail page (Preview)

Supported Type

Text

Is a plain text without background or inside a rectangle or circle shape

Image

Choose one of the badges in our library or upload a custom image

Css

Beautiful badges fully customizable by CSS

Supported:

Advanced

A badge to show the discount percentage using the values in regular price and sale price for each product.

Supported:

Requirement

• Cirilla v3.9.0 or above
• Plugin YITH WooCommerce Badge Management Premium. (doc) (link)
• Plugin App builder v3.9.0 or above
• Plugin App Builder – YITH WooCommerce Badge Management Premium (image)

Install Package

Import package in cirilla/pubspec.yaml

Example: 

  flutter_yith_badge:
    path: packages/flutter_yith_badge

Then run flutter pub get in your project

Image example

Show badges in the image of the product item and the images of the product detail page

You should update in cirilla/lib/product_interaction.dart

Import package:

import 'package:provider/provider.dart';
import 'package:flutter_yith_badge/flutter_yith_badge.dart';
import 'package:cirilla/store/store.dart';
import 'package:cirilla/utils/utils.dart';

Add the code snippets to the productInteraction function:

AuthStore authStore = Provider.of<AuthStore>(context);

  if (key == "image") {
    return FlutterYithBadgeContainer(
      background: child,
      width: width,
      height: height,
      data: data?.rawData,
      parentData: data?.rawData,
      formatCurrency: formatCurrency,
      userOptions: authStore.user?.options?.toJson(),
    );
  }

Image example

Video Document