Published at: 2026-10-12

Configure banners and product cards

Configure advertising and product cards to improve mall operations.

Before you begin

❗

Applicable scope: ShareOrder Professional Edition.
Role and permission: Use an admin account with ShareOrder management permission.
Prerequisites: Prepare test accounts, products, and price data.

Steps

Mall advertising banner

Home advertising banner

Web and mobile advertising banners can open product, merchandise, or new promotion links. Promotion example:

#### Banner component configuration

Both web and mobile need an advertising banner component in Partner Portals.

#### Maintain advertising banner data

Create an advertisement

Create an advertisement, upload an image, then select jump type, applicable client, online status, and applicable accounts. Jump type is related to the applicable client:

Advertisement jump types support internal data, external data, and custom pages.

Internal data: select an internal object (preset merchandise and promotion objects, or custom objects). Supports web and mobile.
External data: enter an external link. Web is supported by default. Mobile needs domain authorization and R&D support.
Custom page: relate an External custom page. Web is supported by default. Mobile is a native WeChat Mini Program and does not support dynamic extension unless you apply for R&D support.

In the applicable account component, you can specify a range by conditions, or select one or more account names directly.

Advertising popup

You can set a popup for terminal advertising content. After you set it, ShareOrder web and mobile show the popup.

Personalized mall list cards

The mall list can replace the card component through the dht.shopmall.list.render.before hook. Custom cards reuse the standard list data structure and event protocol.

Interface parameters

Parameter	Type	Description
`product`	`Object`	Current merchandise or product data.
`productFields`	`Object`	Field descriptions for the merchandise or product.
`shoppingCard`	`Component`	Custom card component returned by the hook.

Register a card component

import Card from './card';

export default class Plugin {
  apply() {
    return [
      {
        event: 'dht.shopmall.list.render.before',
        functional: this.shopmallRenderBefore.bind(this)
      }
    ];
  }

  shopmallRenderBefore() {
    return Promise.resolve({
      shoppingCard: Card
    });
  }
}

Custom cards return the action type and product data through the on-action event. Action types include add to cart, view details, favorite, select specification, select configuration, and select attributes.

Configuration entry

Configure the custom card plugin in the merchandise or product list page layout.

## Expected results

Use a test account to confirm the saved settings take effect on the related pages and records.

Undo or roll back

Return to the configuration entry, restore the previous switch, layout, or rule values, and re-verify with a test account.