Product Summary & Description

4. EC + SC (EN).png

Merchants can provide details of the products such as photos, size charts, and videos in the product description and highlight the important info in the product summary. Here we will guide you through:

 

1. Product summary 

Through the product summary, customers are able to quickly spot the product info without going over the product description, giving them a clearer and simpler way to know the product and make the purchase. 

p3.png

*Note: 

  1. The word limitation is 300 characters.
  2. Fields are optional.
  3. Customers can search products by entering the wordings in the product summary.  
  4. If the SEO description of the product is left blank, the system will use the product summary instead as the content for the SEO description. 

 

The product summary will display in the storefront on the product detail page.

p4.png

 

 

2. Product Description

Format feature introduction

The "Product Description" block provides basic text format elements, as shown in the picture below. 

Screenshot_2023-05-30_at_3.53.01_PM.png

Supported features: Text style (Bold, Italic, Underline), [Coming Soon] Heading Tag, Font Size, Font Color, Highlight Color, Remove Formatting, Paragraph, Justify Text, Line Break, Link, Image, and Video.

 

Here are a few commonly used text features:

A. Font Color Screenshot_2023-05-30_at_3.56.42_PM.png

There are multiple color codes available for you to change the font color.

B. Highlight Color Screenshot_2023-05-30_at_3.58.38_PM.png

Using the Highlight Color feature can make the text look more prominent.

[Coming Soon] C. Heading Tag Screenshot_2023-05-30_at_3.47.26_PM.png___2023-05-30___1.20.51.png

Mark your text content with H2 to H6 tags.

*Note: As the system automatically uses the H1 tag for product names by default, the H1 tag option is unavailable.

D. Remove Formatting Screenshot_2023-05-30_at_4.04.26_PM.png

If you copy and paste text content directly from Word or other websites, it may carry its original formatting and syntax over, resulting in inconsistent presentation between the front-end and back-end. Therefore, it is strongly recommended to use the "Remove Formatting" feature after pasting the copied text. This will remove any other syntax, allowing you to utilize the text element above to continue your editing and designing.

E. Link Screenshot_2023-05-30_at_4.10.32_PM.png

Highlight and select the text you want to turn into a hyperlink and click Link. Paste the link URL and click OK to complete the process.

Screenshot_2023-05-30_at_4.16.48_PM.png

 

Insert photos in the product description 

To insert a picture in the product description, you can choose to Add Photo, From Gallery or Upload URL. Go to [Products & Categories] > [Products] > Edit and select the Info tab. Scroll down to Product Description and click on the "Image" TC_2-1.png icon.

Screen_Shot_2021-09-10_at_3.36.17_PM.png

 

A. Add Photo

Upload image directly from the computer. 

B. From Gallery

If you want to upload a picture from the image gallery, please upload the image to the SHOPLINE image gallery first. For more details using the Image Gallery, please refer to this FAQ.

C. Upload URL

After you get the image link, paste the link into the field and click "OK" to successfully insert the picture.imgur4.png

*Notes:

  1. SHOPLINE has fully upgraded to SSL encrypted environment. Please make sure you paste the link that begins with "https://" to avoid failed display in some browsers.
  2. When placing the image URL, pay extra attention to the image file format because not all image formats can be displayed. For example, Safari does not support reading the web format.

[Coming Soon] Upon uploading the images, you can switch on the "Edit Image Alt Tag" toggle to set up the alt attributes for your Product Description images and enter text describing the content of the images.

For more details about image alt attribute, please refer to this article.

Screenshot_2023-05-30_at_10.59.44_AM.png

 

Insert videos in the product description

Inserting Videos 

Step 1. Get the link

Upload your video(s) to YouTube first, or find the video clip that you need on YouTube.

 

Step 2. Get the embed code

Go to the page of your YouTube video, then click SHARE

embedvidEN1.png


Click Embed in the pop-up window.

embedvidEN2.png


And copy the code. After that, resume to the product edit page in SHOPLINE Admin.
image.png

​​​

Step 3. Add the code in the product description

Go back to Product Description, click the Toggle HTML button on the toolbox and paste the code you copied from YouTube.

Note: After clicking the Toggle HTML button, the content of this field will change into HTML syntax. Please refer to this link for more details: View HTML from Text Editor.

youtube_3.png

Remember to click Update when you finish.

 

Insert Youtube Shorts

Step 1. Get the Youtube Shorts link

Get an Youtube Shorts from Youtube or from other search engines, and copy the URL of the shorts video.

mceclip0.png

Step 2. Change the link format

The format of the Youtube Shorts video URL will start with "https://www.youtube.com/shorts/", please change "short/" to "watch?v=" and reload the page.

mceclip2.png

Step 3. Get the embed code

Click the SHARE button underneath the video.

embedvidEN1.png

Click Embed in the pop-up window.

embedvidEN2.png

and copy the code. After that, resume to the product edit page in SHOPLINE Admin.

image.png

Step 4. Add the code in the product description

Go back to Product Description, click the Toggle HTML button on the toolbox and paste the code you just copied from YouTube.

Note: After clicking the Toggle HTML button, the content of this field will change into HTML syntax. Please refer to this link for more details: View HTML from Text Editor.

vid2.png

Remember to click Update when you finish.

 

3. Multiple language settings

If merchants are selling products to various market regions, SHOPLINE offers multi-language content settings. You can edit the corresponding content for different languages. When the consumer selects the corresponding language at the shopfront, the system will automatically show the content in the corresponding language. 

Screen_Shot_2021-09-10_at_4.04.25_PM.png

Note: If only one language is edited while the other language is yet to be set, despite the language change at the shopfront, the system will automatically apply the edited language.

For example, if the store only has the product content in Traditional Chinese, when consumers switch the storefront language to English, the product description will still show the content in Traditional Chinese.

 

 

 

 

 

Have more questions? Submit a request

Comments