🚪 Entry Point

Access it from the toolbar in the left sidebar after entering the page editor of a campaign page from the campaign management list.

🛠️ Usage

• Use the HTML structure of the SDK webstore page as reference, DO NOT refer to the HTML of the preview canvas in the backend editor🚫
• CSS class name designation:
  1. You can specify it in the "class name" field in the component settings panel on the right side of the backend editor
  2. To style a specific product in the Product list component, use the system-designated class name: awoo-product-column-product-id-{pid}
  • When the same component (class name) has different style settings in the CSS editor vs. the component settings panel on the right side, the frontend will display according to the CSS editor settings
• Example CSS Code:
  CSS

  /*custom class name*/
  .custom-button {
    background-color: #631223 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
  }
  
  /*specific pid in product list*/
  .awoo-product-column-product-id-NF0A5J5NHCZ button {
    background-color: red !important;
    font-size: 18px !important;
  }
  .awoo-product-column-product-id-NF0A5J5NHCZ h5 {
    color: blue !important;
    font-size: 18px !important;
  }

💡 Common CSS Syntax

➤ Product list: Add "Tax in" or "Starting from" text after Price or Sale price

• No need to specify a Class name for the component, just enter the following syntax directly in the CSS editor:

  CSS

  /* add tax in text after original price */
  .productPrice-wrapper p .content::after {
    content: " (Tax in)";
  }
  
  /* add tax in text after sale price */
  /* if not every pid has sale price, do not use this code to prevent accidental exposure */
  .productSalePrice-wrapper p .content::after {
    content: " (Tax in)";
  }

• Preview:

  

➤ Category list: Move Category text to below the Category image

• No need to specify a Class name for the component, just enter the following syntax directly in the CSS editor:

  CSS

  .campaign-star-image-box-children-container {
    position: relative !important;
    margin-top: 25px; /* control the space between category image and category text */
  }

• Preview:

  

➤ Category list: Add "#" symbol before all Category text

• You need to first assign a Class name to the target Category list, then enter the following syntax in the CSS editor:

  Note: This is at the Category list level, not the Category text level!

  CSS

  /* add # symbol before category text */
  /* remember to change "my-category-list-name" to your class name */
  .my-category-list-name { 
    .text-wrapper > p .content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .text-wrapper > p .content:nth-of-type(1)::before {
      content: '#' !important;
      position: relative !important;
    }
  }

• Preview:

  

➤ All text: Adjust line height and letter spacing

• No need to specify a Class name for the component, just enter the following syntax directly in the CSS editor:

  CSS

  * {
    line-height: 1.62em !important;
    letter-spacing: 0.1px !important;
  }

• Preview:

  

➤ All text: Apply fonts not yet supported by Campaign Star

• No need to specify a Class name for the component, just enter the following syntax directly in the CSS editor:

  CSS

  /* apply Microsoft JhengHei first, if fail then fall back to Noto Sans */
  * {
    font-family: "Microsoft JhengHei", "Noto Sans" !important; 
  }

➤ All hyperlink text: Adjust default link text color & remove underline effect

• No need to specify a Class name for the component, just enter the following syntax directly in the CSS editor:

  CSS

  /* remove underline from hyperlink text and change hyperlink default color */
  a {
    color: red;
    text-decoration: none;
  }

• Preview: