Text Widget | SHOP Builder

4. EC + SC (EN).png

With SHOP Builder, when adding/editing Advanced Pages, you can use the "Text" widget to enrich your tab with more descriptive texts and make it more aesthetically pleasing. 

⚠️ Before you begin:

  • Currently, SHOP Builder 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 a text widget

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.Screen_Shot_2022-06-30_at_11.06.19_AM.png


Step 2

Click the Widget button.Screen_Shot_2022-06-17_at_11.03.01_AM.png


Step 3

Select the "Text" widget.Screen_Shot_2022-06-30_at_6.41.04_PM.png


Step 4

The system is set to add 1 set of text by default. Click the Text button to add more text.
*Note: Currently supports up to 4 sets of text.Screen_Shot_2022-06-30_at_6.43.03_PM.png

If you add multiple sets of text, click the ___2022-06-30___10.34.59.png icon on the left to drag and adjust the order. Screen_Shot_2022-06-30_at_6.44.35_PM.png


Step 5

Select the text to edit the text settings.

  • Title: Insert the product title.
    Customize heading tags; there are 6 options from H1 to H6. The system defaults to H3.
  • Sub title: Insert the product subtitle.
    Customize heading tags; there are 6 options from H1 to H6. The system defaults to H4.
  • Content: Insert the description for the product.
  • Show Button: Turn on to show the button on the webpage.
  • Button text: Insert the button text.
  • Link to: Insert an URL to the text. There are two ways of opening the URL:
    • Current window: Open the page directly from the current window
    • New window: Open the page in a new window. 



Click the "Language" drop-down menu to show the list of supported languages. You can insert the texts for each language interface respectively.Screen_Shot_2022-06-30_at_6.47.02_PM.png


Step 6

Supports other settings.

A. Text alignmentScreenshot_2023-05-30_at_10.17.49_AM.png


B. Padding

Adjust the spacing between text and the website margin.Screenshot_2023-05-30_at_10.17.57_AM.png


Step 7

During the setup process, you can click the Save button below to preview the newly added Text widget on the right.
*Note: Preview via Desktop and Mobile are available.Screenshot_2023-05-30_at_2.58.52_PM.png


Or you can click Preview Page at the top right to preview the layout at the storefront.Screenshot_2023-05-30_at_10.29.43_AM.png


Step 8

Once you're done with the setup, click Publish to allow your customers to view the newly updated content.Screenshot_2023-05-30_at_10.29.56_AM.png




Read more






Have more questions? Submit a request