Product With Text Widget | Page Builder (New)


When using the new page builder to add or edit an advanced page, you can use a "Product with text" widget to add an attractive promotional copy for your product and attract traffic and customer browsing. 

⚠️ 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 Product With Text 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 the Product with text widget under "Product". 


Step 4

You can add a product and edit related text by clicking the Product and Text widgets to edit the content.


Click the left PWT_CN_4-0.png icon to drag the image or text for order rearrangement.



Step 5

Click Product and click the + Product button. A window will pop up to show products.


You can find the product you want to add by name and tag in the search bar, or directly scroll down to find it. Once the product is selected, click the Confirm button.




  • If you add the product as a hidden product, please make sure to enable the "Hidden Product" toggle, or the system will not be able to display the image or price of the hidden product. ok.png
  • If the product you add is unpublished, the system will not be able to display the product image and price (as shown in the image above). Please go to [Product & Categories] > [Product] in the store Admin to publish the product and resume editing on the page builder. 


Step 6

Click Text and enter the product text and adjust the related setup. The following fields can be adjusted:

  • Title: Enter the product description title.
  • Subtitle: Enter the product description subtitle.
  • Content: Enter according to the product content. You can enter a promotional copy, product variation or brand story, and so on.
  • Display button: You can select whether to let customers see the button on the page. The display button default link will be your store’s homepage.
    • Button text: Enter the text you want to display on the button.
    • Link: Adjust the display button link, you can insert a product link instead.
    • Open link method: Select to open in the current window or a new window.



Step 7

Continue to adjust other related settings.

  • Padding: You can adjust the padding between the page and the Image and text. 
  • Image proportions: Currently only supports adjusting image proportions for the web version.
  • Text Alignment: Adjust the text alignment. (Left/ Middle/ Right).



Step 8

When setting up, you can click the Save button at the bottom, and a preview screen of the added video widget will display on the right.


Step 9

Once the above is completed, click the Publish button, and customers will be able to see the added content of this page at the storefront.


Read more




Have more questions? Submit a request