Skip to content
Contact us
  • There are no suggestions because the search field is empty.

Building your Hero Product Section 

Use this guide to spotlight a single product and drive more conversions on your high-traffic screens.

What Is the Hero Product Section?

The Hero Product section lets you feature one product front and center so shoppers notice it first. Think of it as a dedicated upsell spot you can place on the screens where your customers spend the most time. It is perfect for highlighting a bestseller, a new launch, a limited-edition item, or anything else you want to give extra attention to.

When a shopper taps the product, they are taken straight to that product page where they can add it to their cart and check out.

Where You Can Add the Hero Product Section

On your mobile app

  • Home Screen
  • Product Page (PDP)
  • Cart
  • Landing Page

On Reactiv Clips

  • Home Screen
  • Product Page (PDP)
  • Landing Page

Note: Clips does not currently include a customizable Cart screen, so the Hero Product section is not available there.

How to Add the Hero Product Section

  1. Sign into your Shopify store admin.
  2. Open Reactiv Dashboard by going to Sales channels, then Reactiv - Mobile App Builder.
  3. In App Studio (or Clip Studio), use the screen dropdown to open the screen you want to edit. You can pick Home, Product Page, Cart, or Landing Page.
  4. In the sections panel, find the Hero Product section.
  5. Drag and drop the Hero Product section onto the preview area. You can place it anywhere on the screen and reorder it at any time.
  6. With the section selected, open the settings panel on the right.
  7. (Optional) Add a heading. This is the short title that appears above the product, such as “You might also like” or “Featured this week.”
  8. Click into the product picker and choose the product you want to spotlight. You can only select one product per section.
  9. Your changes save automatically and you will see them appear in the preview in real time.

Reactiv Tip: You can add more than one Hero Product section to the same screen. For example, you could feature one product near the top of your Home screen and another one further down.

Swapping Out the Product

Changing the featured product is quick:

  1. Select the Hero Product section in your screen preview.
  2. In the settings panel, click the product picker.
  3. Choose a new product from your catalog.
  4. The new product replaces the previous one right away.

How the Design Settings Work

The Hero Product section uses your existing screen-level design settings, so it stays on brand without any extra work. That includes:

  • Image aspect ratio and shape
  • Pricing display style
  • Minimum and maximum quantity rules
  • Wishlist icon (if enabled for your app)

If you want to adjust these, update them at the screen level and the Hero Product section will follow along.

Reactiv Tips for Using Hero Product

  1. Put it where eyes go first. The top of your Home screen is a great spot for a new launch or bestseller.
  2. Use Cart as a cross-sell. Adding a Hero Product to the Cart screen is an easy way to remind shoppers of something they might have missed.
  3. Write a clear heading. Short, benefit-driven headings work best. Try “Don’t miss this,” “You might also like,” or “Featured today.”
  4. Rotate your spotlight product. Swap the product often so repeat visitors always see something fresh.
  5. Pair it with your promo banners. Use a promo banner to set the mood and the Hero Product section to drive the action.

Frequently Asked Questions

Can I feature more than one product in a single Hero Product section?

Not right now. Each Hero Product section holds one product. If you want to feature more than one, you can add several Hero Product sections to the same screen.

Why am I seeing a red “No product selected” box in the preview?

This just means you have added the section but have not chosen a product yet. Open the section settings and use the product picker to select a product. The red box will disappear once a product is selected.

I added a product, but it is not showing in the preview. What happened?

Some products cannot display in the section due to catalog settings on your Shopify store. If this happens, try selecting a different product. If you think this is a mistake, please reach out to Reactiv support.

My product has more than one image. Which one will shoppers see?

The first image on the product will appear in the Hero Product section. If you want a different image to show, reorder the product images in your Shopify admin so your preferred image is first.

Can I pick a product variant, like a specific size or color?

At the moment, the Hero Product section links to the product as a whole. Shoppers will select their variant on the product page after they tap in.

Does the section work the same way in Reactiv Clips?

Yes, the shopper experience is identical. The only difference is that Clips does not include a customizable Cart screen, so the section is not available on Cart in Clips.

Where can I see how the Hero Product section is performing?

Taps on the Hero Product section are tracked so you can see how it contributes to conversions. Your analytics dashboard will show this engagement alongside the rest of your app metrics.

Still Have Questions?

If you run into anything while setting up your Hero Product section, our team is here to help. Reach out to Reactiv support and we will get you sorted.