한국어 한국어   Englilsh English

.

Skip to end of metadata
Go to start of metadata

1. Using the Recommendation Widget Tool

With the Admin Dashboard Recommendation Widget Tool you can easily select the algorithm of choice and make changes to widget design

Menu description

  1. Add new widget  

A single widget is created upon service subscription. You may add additional widgets in a different style by clicking on the add widget style button.

 

2. Enter widget name, channel name 

  • Widget name: denote as insert location

ex) detail_top, detail_bottom, main, basket, order_result, mypage

  • Channel name: same as widget name

 

3. Set recommendation type

 

Prioritizing recommendation

Type of Recommendation: Recommendation algorithms are set here. Recommendation results are displayed on the widget in the order of priority. If the 1st algorithm yields a blank, the 2nd algorithm is used and if the 2nd algorithm yields a blank, the 3rd algorithm is used. If all 3 algorithms yield blank, the widget is not exposed.

Recommendation Configurations

1st order

2nd order

3rd order
Product details_topView Together

Personalized recommendation

Statistics-based recommendation

(Conversion rate TOP 100)

Product details_bottom

Buy Together

Personalized recommendation

Statistics-based recommendation

(Conversion rate TOP 100)

Main page

Personalized recommendation

Statistics-based recommendation

(Conversion rate TOP 100)

Do not use
My cartBuy TogetherPersonalized recommendation

Statistics-based recommendation

(Best-seller TOP 100)

Order completePersonalized recommendationBuy Together

Statistics-based recommendation

(Best-seller TOP 100)

My pagePersonalized recommendation

Statistics-based recommendation

(Conversion rate TOP 100)

Do not use
Other pagesPersonalized recommendation

Statistics-based recommendation

(Conversion rate TOP 100)

Do not use

*  Title settings : Click the change button, select a title image relevant to the type of recommendation. (You can select one from the title images provided by RecoPick.)   

*  Example of title design customization using custom CSS

Area to change Sample CSS code Details

When changing the alignment and spacing of image titles

body, th, td, h1 {margin-top:5px;padding:5px;}

* text-align: center; (center align)

* margin-top:5px; (upper spacing)

* padding:5px; ( margins )

* margin-bottom:5px; (lower spacing)

When using text titles

 

• Click on the change title icon and select use text
• Enter the text and select font size
PC Web

.title {font-family:Helvetica, AppleGothic, sans-serif,Verdana;font-weight:bold;color:#7c7c7c;padding:3px;}

 
Mobile

mobile-widget .title {font-family: Helvetica, AppleGothic, sans-serif,Verdana;font-weight:bold;padding:5px;letter-spacing: -1px;color:#fc5402;border:0px}

 

4. Widget style settings 

 

 

Borders : You can turn on/off widget borders and change colors. Use CSS for additional changes 

*  Example of border design customization using custom CSS

Area to change Sample CSS code Details

If you wish to delete both the title and line and show the thumbnail image only

PC Web

.title {display:none}

 
Mobile

.mobile-widget .title {display:none}

If you wish to show the title image only (delete the line only)

PC Web

.widget--h1.line .title {border:0px}

 

Mobile

.mobile-widget .title {border:0px}

If you wish to add background color in the title bar 

PC Web

.widget--h1.line .title {border:0px;background: #eeede8;}

* background: #eeede8 (set background color)

Mobile

.mobile-widget .title {border:0px;background: #eeede8;}


Item count : Number of items to be displayed on one page. (We number of items that we usually recommend exposing are 5~6 for PC web and 3 for mobile web)  

Page count : Number of pages of item lists. (An item count of 5 and page count of 3 will display a total of 15 items over 3 pages. However, if recommendation calculations yield 10 items only, the third page will not be displayed automatically.)

Text Alignment : Text alignment options for item name, price, etc.

Line count : Item lists can be displayed in multiple lines.

Include target item : The target item for item-to-item recommendation can be displayed on the widget alongside recommended items. This is a useful option when applying ‘items viewed together’ or ‘items bought together’ widgets to the my cart page.

Unlimited scroll : The first page is displayed after the last page allowing an unlimited scroll in one direction.

Random recommendation : Recommendation results are displayed in random.

4. Widget style settings

 

 

Item name : Set font size and color for item names. (Use CSS to set font, text abbreviation)

  • Item link: Set whether to display in a new window or the current window upon click.

Price : Set font size, color, display/hide options for price.

* Example of product name/price customization using custom CSS

Area to change Sample CSS code  Details

When changing product name (class= name) font type, text spacing, abbreviation

 

PC Web

.name {font-family:Helvetica, AppleGothic, sans-serif,Verdana;display: inline-block;font-weight:normal;letter-spacing: -1px;

width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

* font-family:Helvetica, AppleGothic, sans-serif,Verdana (Set font)

* letter-spacing: -1px (text spacing)

*  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

 (... text abbreviation)

Mobile

.widget .name {font-family:Helvetica, AppleGothic, sans-serif,Verdana;display: inline-block;font-weight:normal;letter-spacing: -1px;

width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

When changing product price (class= price) font type, text spacing, abbreviation

PC Web

.widget .price {font-family: Helvetica, AppleGothic, sans-serif,Verdana;font-weight;bold;}

font-family : Helvetica, AppleGothic, sans-serif,Verdana (Set font)

letter-spacing: -0px (text spacing: 0.1em)

 Mobile

.mobile-widget .price {font-family:Helvetica, AppleGothic, sans-serif,Verdana;letter-spacing:-1px;font-weight:bold;}

 

Author : Set font size, color, display/hide options for author. This section corresponds to the author tag value designated in the product details page.

Thumbnail : Display/hide options for thumbnail image. Thumbnail image size is automatically set in proportion to widget size.

Area to change Sample CSS code Details

Set thumbnail size

thumbnail {width:200px; margin-top:10px}

* width:200px height :50px(Set thumbnail size)

* margin-top:10px (Set line and thumbnail spacing)

* border:1px solid #B8B8B8 (Set thumbnail image border)

 

 




  • No labels