📦 Product Page Widget

This guide walks you through creating a widget for related products and adding it to your Shopify product page using Shopify Online Store 2.0 themes.

Step 1: Create a Product Page Widget

  1. From your app admin, go to Widgets.

  2. Click Add Widget.

  3. In the Placement dropdown, choose Product Page.

  4. Under Layout, select one of the following options depending on your use case:

  • Frequently Bought Together Uses Shopify’s built-in logic to recommend products frequently bought with the current one. It pulls suggestions from the Search & Discovery app under the Recommendations tab. Search & Discovery App »

  • Related Shows products that are connected by tags, collections, vendor, or type. You can also manually select recommended items.

  • Add-on Displays complementary products that don’t necessarily share data with the main product. Choose items by tag, collection, vendor, or manually.

  • Recently Viewed Products Displays items the customer has recently looked at.

Once you've selected a layout, you’ll be redirected to the widget configuration page.

Step 2: Configure Your Widget

On the configuration page:

  1. Enter a title for the widget.

  2. Choose the target product(s) where this widget should appear.

  3. Set the conditions to define which products will be shown.

  4. Click Customize button to go to Design page

Step 3: Set Widget Display Position on the Product Page

You have two ways to set the widget’s position:

Option A: Use Default Positions

Choose a predefined location from the widget settings.

Option B: Use Shopify Theme Editor (Recommended for precise placement)

  1. On the widget configuration page, click the Customize button.

  2. In the Design section, under Position, select Use App Block in Theme Editor (2.0 themes).

Step 4: Copy Widget Shortcode

  1. Return to the Widgets list.

  2. Locate your widget and click Copy under the Shortcode column.

Step 5: Add Widget Block in Theme Editor

On Themes Customize page: Go to product page -> add block

Click Add Block > select Apps > select GLO Related Products, Upsell of G:Recommended Widget.

Paste the widget’s shortcode (copied in Step 4) into the block settings.

Step 6: Enable App Embed

To ensure the widget displays properly:

  1. Still in the theme editor, click App Embeds (bottom left corner).

  2. Find GLO Related Products, Upsell and toggle it on.

  3. Click Save.

Why Your Widget Might Not Be Showing

  • The product you check must match the target product condition configuration in the Settings, so the widget does appear.

  • Make sure that there are related products that meet the conditions you’ve set. For example, if you set the condition to "Same Tag" but no products share with that tag, nothing will display.

  • The related products have already been added to the cart. Once a product is in the cart, it will no longer be displayed in the widget.

If you encounter any technical difficulties or have any issue, please contact us, our support will help you solve the problem ~ with sincerity and care 🤗

PreviousWidget Types ExplainedNext🛒 Homepage Widget

Last updated