Published at: 2026-10-12

Configure web and app site portals

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

Web_App site portal

Site portal overview

The site portal and the previous enterprise portal are two frameworks. Treat the site portal as the ShareOrder 3.0 front-end framework. This new front-end framework is based on new technology and rebuilds the mall.
  1. Usage scenario: After long-term ecommerce influence, accounts expect better mall UI, smoother operations, and more customization. The original Partner Portals look traditional and no longer meet expectations. The upgraded site portal uses a mainstream international B2B ecommerce SaaS model. It provides a modern UI, an optimized ordering flow, flexible configuration, and custom development to improve user experience and meet ordering needs.
  2. Feature upgrade and value: Ordering portal 3.0 is newly released. UI and experience are upgraded. It supports flexible component configuration and PWC low-code custom development. It improves user experience and efficiency, and it can meet personalized Business Scenario needs.

Apply for limited rollout

Apply for the ShareOrder independent site limited-rollout item.
alt text After configuration, the approximate result is as follows:
Site portal result after configuration

Configure and apply

Web site

Create a web site
  1. In ShareOrder settings, create a site portal. Maintain Basic Info: site name, whether sign-in is required, and Applicable Scope. Select Use now to reuse the ShareOrder mall template directly.
alt text Require sign-in to visit: if it is not required, enable guest mode.
Show Mobile Client bottom navigation: after the site is Created Successfully, you cannot change this setting.
  1. Select WEB site to open the web portal configuration page. Configure pages and components as needed, then show them in the main navigation menu.
alt text 3. In access settings, bind the ShareOrder public Mini Program or dedicated Mini Program to the site portal Mobile Client.
alt text alt text
Home page, header, footer, and navigation
ShareOrder home components: product list, banner carousel, favorite products, and recommended categories.
  1. Configure the header. Usually add a grid container, then set the grid layout and alignment.
alt text 2. Example: split the grid container into three columns, then drag in an image, multi-level navigation, and personal center.
alt text In personal center, you can drag another grid container and place a mini-cart component. alt text Multi-level navigation: besides Home, create in-site pages such as Mall, Product Details, Cart, and Orders. Create menu items in navigation content and bind in-site pages.
Create in-site pages in multi-level navigation
Bind in-site pages to navigation menu items
  1. Configure the footer: usually configure quick links. Main components are the grid container and rich-text component.
Configure footer quick links with grid and rich text
  1. Configure the home area: slideshow, image-text component 1, product list, and more.
alt text #### Mall page configuration
ShareOrder product components: product list, product category tree, product filter (left), product filter (top), product filter results, product sort, product pagination, and product list data.
Mall list page
  1. Create a mall tab.
alt text 2. Configure product components.
alt text alt text ##### Product Details page
  1. Create a Product Details page (do not show it in navigation).
alt text 2. Assemble Product Details components.
alt text alt text ##### Cart page
  1. Create a cart page.
alt text 2. Assemble cart page components.
alt text ##### Order page
  1. Create a sales order page.
alt text 2. Configure the order list, detail, and create pages in sequence.
alt text alt text alt text alt text #### App site
Create an app site
Build the Mobile Client on the same site portal.
alt text ##### Maintain site pages
Like the web, maintain Home, Mall (product list), Product Details, Cart, and Orders in sequence.
alt text ##### Maintain app navigation
Configure multi-level navigation and show the pages you need.
alt text ### Access the site portal

Access the web site

Give accounts the new site portal URL, or bind it in the enterprise portal, so users can experience the new site.
  1. Home result
alt text 2. Mall result
alt text 3. Cart result
alt text 4. Order result
alt text #### Access the app site
  1. Give accounts the new site portal URL, or the account and partner portal Address, so users can experience the new site.
alt text 2. After users sign in to the mall, the result is as follows.
Multi-level navigation mode
Bottom navigation mode

Other features

Parts mall supports selecting Parts based on a complete machine

The External Apps Parts mall adds a Select Parts from complete machine component. After an admin configures the component, dealers or end users select Select Parts from complete machine on the site. The product explosion view appears. The explosion view shows each part position, Hierarchy, and relationship from a disassembled view. Users select a part to locate matching Parts quickly, reduce manual identification errors, and shorten selection time.
Admin:
alt text App:
alt text NOTE: This depends on switches. Enable CPQ configuration, and turn on the explosion-view quote switch. First purchase OCR text recognition resource pack - general recognition type (high-precision position) before you can enable the product explosion view.
alt text After the explosion-view feature is enabled, on the sales BOM detail page, select Configure explosion view in the upper right to open the configuration page.
On the explosion-view configuration page, if OCR recognition times are sufficient, the system recognizes part numbers automatically. In the left sales BOM list Drawing number field, select the matching part number to complete matching.

Web site supports a single Product Category / mall category or a single product

Admin: when you configure navigation content, you can specify the data source and select a specific Product Category or a Designated Product.
Admin specifies a Product Category or a single product
App
App shows a single category or single product

Component description

Slideshow

Slideshow component overview
The slideshow (carousel) component shows multiple rotating items on the mall home page. You can configure carousel items, auto switch, style, and interaction. Use it for product promotion and campaign publicity to improve visual impact and information reach.
Add the component
  • Open the home page editor. In the left component panel, expand the ShareOrder components category.
  • Find the slideshow component and drag it to the target position in the page editor.
  • After you add it, the system generates a default carousel structure. Configure it in the right panel.
Core attributes
Setting Description
Carousel items Define the carousel content items and manage multiple items
Height Set the overall component height
Auto switch Control whether the carousel plays automatically
alt text ##### Slideshow content configuration
alt text ###### Structure
The mall slideshow consists of multiple carousel items. Each item is carried by an overlay container and includes:
  • Background image: the visual base of the carousel
  • Text component: title / subtitle Text Content
  • Rich-text component: extra descriptive text
  • Button component: jump interaction, such as a BUY button
Content editing
In the left outline tree, expand the Carousel node and select the target Carousel item.
Expand the Overlay child node and edit:
  • Text: change title text, font, color, and size.
  • Rich-text component: edit Description content and use rich-text formats such as line breaks and bold.
  • Button: change button text, link Address, and click events, such as opening a Product Details page.
You can also select the element in the middle preview area to enter edit mode quickly.

Image-text component 1

Image-text component overview
Image-text component 1 is a composite layout component in the ShareOrder component library. It shows an image + text + button combination. Use it as a brand introduction, campaign Description, or product guidance module.
alt text ##### Core features and settings
  • The image child component supports uploading or replacing brand/product Related Images, alignment (left / center / right), and click jumps (external link / internal page).
  • The rich-text child component supports editing title and Description text, and custom font, size, and color. Use it for brand introduction and campaign copy.
  • The button child component can customize button text (for example LEARN MORE) and configure a click jump link to guide users.
alt text #### Personalized Content recommended products (product list)
Personalized Content recommended products overview
Personalized Content products (product list) is a recommendation component in the ShareOrder component library. It shows a product list that matches specific rules for precise product recommendation.
alt text ##### Core settings
Data source
The component supports two data-source modes. Choose based on business needs:
Source type Configuration Scenario
Manual selection Select + Add products and check products from the product library (up to 30) Recommend fixed products such as bestsellers or new arrivals
Custom Select Set conditions and filter by rules such as Product Tags equals Recommended Dynamically recommend products that match Product Tags rules, such as by category or tag Update
Layout
  • Display count: set the Number of Products the current page shows (7 or 10 in the example).
  • Display method: wrap: products wrap automatically and show more content. Horizontal scroll: products are arranged horizontally. Swipe left or right to see more and save vertical space.
  • Wrap: products wrap automatically and show more content.
  • Horizontal scroll: products are arranged horizontally. Swipe left or right to see more and save vertical space.
alt text #### Rich text supports inserting a category name
Admin: on the mall tab, insert a rich-text component and configure a Product Category / mall category name variable.
alt text App: after you select a specific Product Category, the category name is displayed.

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.

Related topics

Submit Feedback
Previous
Configure the ordering mall and business parameters
Next
Customize Partner Portals