Ctrlk

Homepage Widget

The Homepage Widget lets you showcase products directly on your store’s homepage. It’s perfect for highlighting best sellers, new arrivals, promotions, or collections and guiding shoppers deeper into your store.

ℹ️ What is the Homepage Widget?

The Homepage Widget displays a product recommendation block on your home page, even when shoppers haven’t viewed a product yet.

Use it to:

  • Promote popular products

  • Highlight seasonal collections

  • Upsell featured items

  • Increase product discovery

Where does it appear?

  • Placement: Homepage

  • Page type: Homepage only

  • Visibility: Shown to all visitors

Unlike product page widgets, this widget does not depend on a specific product.

⚙️ How to set it up

Step 1: Create a Widget

  1. Open the app > go to the Widgets tab > click the Add widget button in the top right corner

  2. For Placement, choose Homepage.

  3. Select the layout: Homepage add on > click Next

  1. Fill in your widget details:

  • Title and Subtitle (optional)

  1. Choose Recommended Products

In the section Choose Recommended Products > select Specific tags → set tag Rings

⇒ This means: Only products that have the tag Rings will be shown in this widget.

  1. Click Save

Step 2: Configure widget style

  1. In the widget detail > click Customize > it directs to app Settings > Design

  1. Choose where it is shown: find Position

Choose one:

  • Use app block in theme editor (recommended) Use Shopify Theme Editor to drag & drop the widget.

  • Before / After a HTML element (manual placement) Use this if you’re adding the widget via shortcode and need full control.

  1. Configure the color and design of each widget you want

  2. Save settings

  3. Use the Preview panel on the right to see real-time changes.

Step 3: Display widget on Homepage

Copy shortcode of the widget

  1. Return to the Widgets list

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

Add widget block in theme editor

  1. Go to store backend > go to Online stores > Theme > Edit theme

  2. On Themes Editor page > go to Homepage template

  3. Click Add Block > select Apps > select Tipo Related Products

  1. Paste the widget’s shortcode into the block settings and save the theme editor

  1. Click Save

Step 4: Enable app embed

In theme editor, toggle on the app embed of Tipo Related Products. Learn more

Result

When customers land on your homepage, they immediately see your most popular products, helping them start shopping faster.

The widget automatically pulls all products with the Rings tag, so you don’t need to select products one by one.

❓FAQs

1) Why is my homepage widget not showing any products?

Usually one of these:

  • No products match your selection (for example, no product has the tag you entered)

  • The widget is not added to the theme (Theme Editor / app embed / app block)

  • The widget is disabled (not Active)

Quick check: open one product → confirm it has the tag you used (e.g. Rings).

2) I added a tag, but nothing shows. What should I check?

  • Make sure the tag spelling matches exactly (tags are case-sensitive in many setups)

  • Make sure products are available (not hidden/draft)

  • If your widget shows “best-selling”, products may need sales history to rank

Tip: try a tag you know is used on multiple published products.

3) What’s the difference between Specific tags and Specific collection?

  • Specific tags: you control products by adding/removing a tag on the product (fast and flexible).

  • Specific collection: you control products by editing a Shopify collection.

Use tags for quick grouping (e.g. men, gift, summer). Use collections when you already manage collections in Shopify.

4) How many tags can I add?

You can add multiple tags. The widget will show products that match your tag rules (depending on how your app handles it).

Best practice: start with 1 tag to keep it simple.

5) How long does it take for changes to update?

Usually updates are quick, but sometimes you may need to:

  • refresh the preview

  • reload the storefront

  • clear cache / test in an incognito window

PreviousProduct Page WidgetNextCollection Page Widget

Last updated