Image Next to Text Widget

Overview

This article covers specific setup and content entry for the Image Next to Text Widget. If you've never set up a Widget, check the Setup Guides Section for a step by step guide for getting started.

The  Image Next to Text Widget is a flexible content area that allows you to configure an image and and text area that will be displayed on the front end of your store. 

Widgets in Custom Fields do not require custom development. They come with all fields configured, as well as basic styling including CSS, Javascript and all metafield code needed. Widgets are also easily customized to suit your theme style or content entry requirements.   

The image below shows an un-styled version of an Image Next to Text Widget.

Content Entry Form

While entering content, you can upload an image, select the image placement (right or left), enter a title, add some copy and enter a link using the default widget setup.

By default, the Widget's content entry form will include the following:

  • Image
    • Upload an image of your choosing. By default, this image will be resized to fit the styling of the widget. Resizing changes can be made in the template code for the widget.
  • Image on Right
    • By default, the widget will be styled with the image on the left and the text one the right. Checking this box will style the widget with the image on the right and the text on the left. This is useful when stacking more than one of these widgets to add visual interest. 
  • Title
    • Enter a brief introduction here. Usually a few words is ideal.
  • Body
    • Enter a longer description here. Usually a sentence or two. HTML can also be added here.
  • Link 
    • Enter a link here, it will be displayed at the bottom of the widget, after the title and body.
      • Label
        • The clickable link text shown to the visitor.
      • URL
        • The URL the link should go to. 
      • CSS Classes
        • Additional CSS classes to add to the link. These will be specific to your theme, such as styling as a button.
      • Open in new window
        • Controls if the link opens in a new window or the current window when clicked.

Theme Settings

Many customization options are built into Shopify's theme editor for this widget. In addition to basic design settings that apply to all widgets, such as margins, fonts, line heights, and more, this widget also includes Image Next to Text options:

  • Widget Layout
    • Left Alternating
      • First instance is image on the left and text on the right, then image on right, text on left.
    • Right Alternating
      • First instance is image on the right and text on the right, then image on left, text on right.
    • Left Aligned
      • All instances have the image on the left and text on the right.
    • Right Aligned
      • All instances have the image on the right and text on the left.

Customization

To edit configuration for this Widget, head into the Configure section in the sidebar under your item type, for example, under Products, choose Configure. Hover on the Widget to see options. 

Adding New Fields

From the Configure screen, select the plus to add more fields to this widget. 

Code

Select the code symbol to edit the basic HTML and liquid code for this widget.

HTML and liquid in our templates may be edited in the app or directly in your theme. 

CSS can only be edited in your theme. The code page links to the correct theme file to edit the CSS. 

Customizing Content Entry Fields

Some fields may have additional configuration options. For example, you might want to add some help text for your administrator on a particular field.