Image with Text Widget | SHOP Builder – SHOPLINE Help Center

4. EC + SC (EN).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: 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

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