Image with Text Widget | SHOP Builder – SHOPLINE Help Center

Plan_EC%2BSC.png

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

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

Step 2

Click the Widget button.

Step 3

Click the "Image with Text" widget.

Step 4

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

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

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.

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.

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.

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.

Step 7

Other settings are supported.

A. Padding

Adjust the padding of the image and text.

B. Image proportions

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

C. Text alignment

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.

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

Step 9

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

Image with Text Widget | SHOP Builder