Text With Background Widget

Overview

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

The Text with Background Widget is a flexible content area that allows you to enter content that will be displayed over a background image 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 a  Text with Background Widget.

Content Entry Form

While entering content, you can select the alignment of the text, the background image placement, and include a title, a body and a link using the default widget setup.

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

  • Background Image File
    • This is the image file that the text will be overlaid on top of.
  • Background Image Height
    • This allows you to select a general setting for how the image should be treated, i.e. taller or shorter images. This will trigger some additional CSS for styling purposes.
  • Fixed Position
    • When selected, this setting will imply motion on the image as the user scrolls down the page. This is sometimes referred to as a parallax effect. When the visitor is at the top of the image, the top of the image is shown but not all of the bottom. As the user scrolls, the bottom of the image is revealed.
  • Left Align Text
    • Text will be centered by default. Choosing this option overrides the default to left align the text instead.
  • Use Light Text
    • Text will be dark by default. If your image is also dark, when selected, the text will appear in a lighter color.
  • Title
    • This content will appear in a larger font. Usually this is used for a few words as an introduction.
  • Body
    • This content will appear in a normal font size. This text might be a sentence or two in length.
  • Label
    • This is the label for a link. Text entered here will be clickable and wrapped with the link. Your theme may also support links as buttons, in which case, this text would be the button's text.
  • URL
    • This is the address for whatever you'd like to link to. As a best practice, if you'd like to link to products or other very specific item types in your store with this widget, we recommend using a Reference field rather than a URL field here.
  • CSS Classes
    • Any additional CSS classes you'd like included with the link can be entered here.
  • Open in new window
    • This setting will add an attribute to the link for target="_blank". When the link is clicked, it will open the link in a new window for the user as opposed to leaving the page they are on.

Theme Settings

Many customization options are built into Shopify's theme editor for this widget such as margins, fonts, line heights, overlay colors, link styling, borders and more.

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

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.

Widget Settings

This widget type does not have any specific customization options.