Text Widget | SHOP Builder

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.

 

Step 2

Click the Widget button.

 

Step 3

Select the "Text" widget.

 

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.

If you add multiple sets of text, click the icon on the left to drag and adjust the order. 

 

Step 5

Select the text to edit the text settings.

• Title: Insert the product title. You can also customize the following style settings. The display order of the style settings is: Widget's style settings > Store Settings. 
  • Heading tags:  There are 6 options from H1 to H6. The system defaults to H3.
  • Text color: Click open the palette to choose the text color, or enter a color code.
  • Font size: You can choose from 16/20/24/28/32. The actual font size will scale proportionally based on the font size you set in Store Settings.
    
• Sub title: Insert the product subtitle. You can also customize the following style settings. The display order of the style settings is: Widget's style settings > Store Settings. 
  • Heading tags: There are 6 options from H1 to H6. The system defaults to H4.
  • Text color: Click open the palette to choose the text color, or enter a color code.
  • Font size: You can choose from 14/16/18/20/22. The actual font size will scale proportionally based on the font size you set in Store Settings.
    
• Content: Insert the description for the product. You can also customize the following style settings.
  • Font size: You can choose from 12/14/16/18/20. The actual font size will scale proportionally based on the font size you set in Store Settings. 
  • Text color: Click open the palette to choose the text color, or enter a color code.
  • Lists: You can add bulleted lists or numbered lists.
  • Full-screen editing: You can enter the full-screen editing mode to create your content more easily.
    
• Button text: Insert the button text.
• Link to: Insert a 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.
    

*Notes:

• The display order of the style settings is: Widget's style settings > Store Settings.  
• If you have adjusted your page layout using the custom liquid, you will need to edit the rules for the custom liquid after adjusting the widgets style settings.
• Currently, Shopper App does NOT support customization of the widget's text color and font size.

 

Step 6

Supports other settings.

A. Text alignment

 

B. Padding

Adjust the spacing between text and the website margin.

 

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.

Or you can click Preview Page at the top right to preview the layout at the storefront.

 

Step 8

Once you're done with the setup, click Publish to allow your customers to view the newly updated content.

 

 

 

Read more

• Announcement Bar / Header Settings |SHOP Builder
• Gallery Widget | SHOP Builder
• Image with Text Widget | SHOP Builder
• Slider Widget | SHOP Builder
• Product List Widget | SHOP Builder
• Product Slider Widget | SHOP Builder
• SEO Settings | SHOP Builder
• Footer Setting | SHOP Builder