[Coming Soon] Image with Text Widget | Page Builder (New)

Plan_EC%2BSC.png

When using the new page builder to add or edit advanced pages, you can add the "Image with Text" widget to make your online store more aesthetically pleasing. 

⚠️ Before you begin:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm themes.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other themes, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

 

1. Adding an "Image with 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.

EN1.png

 

Step 2

Click the Widget button. 

EN2.png

 

Step 3

Click the "Image with Text" widget. 

EN3.png

 

Step 4

A set of Image with Text widget is set by default. Click the Image and Video widget to edit content.  

EN4.png

Click the icon on the left to drag and adjust the image or video order. 

EN5.png

 

Step 5

Click the image widget to upload for mobile and desktop versions respectively individually. 

*Note: It is recommended that the desktop version image width be greater than 2000 px, and the mobile version image width should be greater than 1080 px. 

EN6.png

 

Click the language drop-down menu, and a list of supported languages will be listed. You can individually upload the images for each separate language interface. 

EN7.png


Step 6

Click the Image/Text widget to edit image and text-related settings. 

1. Image

  • Image cropping: Select which part of the image to crop and display (Top left/Top middle/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom middle/ Bottom right). 
  • Image Alt Text: Enter the image alt text. Use a sentence to describe the image's content to help the search engine better understand the image's content. To learn more about image ALT descriptions, please refer to this article
  • Title: Enter the image title. 
  • Link to: Add a URL to the image so that when customers click on it, they will be redirected to a new page. 
    You can select the method to open the link with: 
    • Current window: Open the URL with the current window. 
    • New window: Open the URL in a new window. 

EN8.png

 

2. Text

  • Title: Enter the image title. 
  • Subtitle: Enter a subtitle describing the product. 
  • Content: Write according to the product information. 
  • Show button: You can select whether or not to let customers see this button in the storefront
  • Button text: You can customize the text of the button the customer sees
  • Link to: Add a URL to the image so that when customers click on it, they will be redirected to a new page. 
    You can select the method to open the link with: 
    • Current window: Open the URL with the current window. 
    • New window: Open the URL in a new window. 

EN9.png

 

Step 7

Other settings are supported. 

A. Padding

Adjust the padding of the image and text.

EN10.png

 

B. Image proportions

You can set the image proportions for the desktop and mobile view respectively. 

EN11.png

 

C. Text alignment

EN12.png

 

Step 8 

You can click the Save button below to view the newly added image and text widget during the setting process.
*Note: You can select whether to preview the desktop or mobile versions.

EN13.png

EN14.png

 

Or click the Preview button on the top right to preview it at the storefront.  

EN15.png

 

Step 9

Once the settings above are confirmed, click Publish to let the customers view the newly updated content.

EN16.png

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments