Product With Text Widget | SHOP Builder

When using SHOP 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:

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

 

*Notes: 

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

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

 

Step 6

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

• 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 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

• Category Widget | SHOP Builder
• Product Slider Widget | SHOP Builder
• Product List Widget | SHOP Builder