Collapse Paragraph | SHOP Builder – SHOPLINE Help Center

4. EC + SC (EN).png

When adding or editing advanced pages through SHOP 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:

SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
After creating a page using SHOP 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.

Step 2

Click the Widget button.

Step 3

Click Collapse Paragraph under the "Content" widgets.

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.

*Note:

A Collapse Paragraph widget supports up to 16 collapse paragraphs.
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.

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.

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.

A. Link to

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

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.

C. Bullet list

You can add a list of items in the text.

D. Numbered list

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

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 SHOP Builder.

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).

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.

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.

Or click Preview Page to preview the storefront.

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.

Collapse Paragraph | SHOP Builder