Product References Widget

Overview

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

The Product References Widget is a flexible content area that allows you to configure several products that will be displayed in a grid 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 Product References Widget.

Content Entry Form

While entering content, you can select the product by name, override the product title, and add a brief description using the default widget setup.

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

• Product
  • This is the product you'll be referencing and linking to. The title, pricing, image and other product attributes will be pulled from the product that is set here.
• Override Title
  • This allows you to change the title of the product for display purposes within the Widget.
• Optional Description
  • This field is ideal for a few words to better describe the product.

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 Product Reference options:

• Grid Size
  • Select how many items to show per row. 
• Hide Price
  • Remove the product price from display
• Hide "Sold Out" Message
  • Remove the text "Sold Out" when a referenced product has no inventory.
• Custom link text to view the product
  • Creates an additional link at the bottom of the Widget with the text entered here.

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. 

Widget Display Settings

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.