[Coming Soon] Collapse Paragraph | Page Builder (New)

ECSC.png

When adding or editing advanced pages through the new page builder, you can add a Collapse Paragraph widget to store information and present a neater page layout. It is an ideal widget for product and service Q&A, shipping and returning processes, event discounts, etc. You can also upload images and use them together to create a concise question-and-answer section.

 

⚠️ Before you begin:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm theme templates.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

 

1. Add Collapse Paragraph Widget 

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click Advanced Page/Edit to open up the Advanced Page settings page.
EN1.png

 

Step 2

Click the Widget button.

EN2.png

 

Step 3

Click Collapse Paragraph under the "Content" widgets.
EN3.png

 

The content and settings of the collapse paragraph can be edited in the column on the left. Click + Collapse paragraph to add a paragraph. Preview the page on the right to check the effect of the widget. Click the + button next to the paragraph title to expand/ collapse the paragraph.

EN4.png
*Note:

  • A Collapse Paragraph widget supports up to 16 collapse paragraphs. EN4.png
  • Different themes have different button designs. Currently, only the button color of the Varm theme template will change according to the color set in [Store Settings] > [Colors] > [Primary Button]. The background color is the color of the paragraph button, and the text color is the color of the "+" sign.EN5.png

Step 4

Click the Collapse Paragraph button on the left to edit the title and expanded content of each collapse paragraph.
*Note: The content has a 5000-character limit. EN6.png

Besides setting basic text formats such as bold, italic, and underline, you can also insert hyperlinks, images, bulleted lists, numbered lists, and full-screen editing in the text.
EN7.png

A. Link to

You can insert hyperlinks in the text and select the way to open the link.EN8.png

B. Insert image

You can insert images in the text. You can insert the URL path of the image, or upload the image from your computer (the system will automatically generate the image URL). You can also edit the image ALT, and customize the image's width and height.

EN9.png

C. Bullet list

You can add a list of items in the text.
EN10.png

D. Numbered list

You can add a list of numbered items in the paragraph.
EN11.png

E. Full screen editing

Click the "Full Screen Editing" button to enlarge the editing area of the content. After editing, click the button again to return to the page editor.EN12.png

Step 5

Scroll down the edit column on the left and you can edit the widget title (i.e., the main title of the collapse paragraphs).

EN13.png                                  

Step 6

You can make edit the formats for the widget titles, paragraph titles, and paragraph text.

  • Title alignment: Select the alignment of the widget title (Left/ Center/ Right).
  • Text alignment: Select the alignment (Left/ Center/ Right) for paragraph headings and paragraph text.
  • Widget padding: Adjust the padding (0 to 80 px) between the Collapse Paragraph widget and other widgets.
  • Custom widget color: The on/off toggle switch can set whether to customize the color of the widget. If the switch is turned on, you can customize the color of the following parts: background, text, hyperlink, button background, and button text.

EN14.png

Step 7

During the setup process, you can click the Save button below to view the newly added collapse paragraph widget on the preview area on the right.

*Note: You can preview the page in the desktop version or the mobile version.

EN15.png


EN16.png

Or click Preview Page to preview the storefront.EN17.png

Step 8

After confirming the setup above, please click the Publish button at the top right so that customers can view all the new page content at the storefront.EN18.png

 

Read more



 

 

 

Have more questions? Submit a request

Comments