Product page widgets like Frequently bought together, Product add-ons and Shop the collection normally appear only on the product page. With the Custom Page Widget block, you can show these widgets on other pages of your store too, such as the home page, landing pages, collection pages or any custom page.
This feature is available only on the Pro and Max plans.
1. Before you begin
Make sure the following are in place:
- A campaign already exists for the product you want to show. The Custom Page Widget block only displays campaigns you have created. It does not create a new one.
- The campaign is active and its offer products are active and in stock.
- The Selleasy app embed is enabled in your theme editor.
2. Enable custom widget placement option in Selleasy
- Open the Selleasy app and go to "Customize".
- Click "Edit settings" under "Common settings and customizations".
- Under "General settings", check the box "Show product page widgets on other pages" and click “Save”.
If this option is not enabled, the Custom Page Widget block will not show any widget on the storefront, even if it is added in the theme.
3. Add the Custom Page Widget block in your theme
- From your Shopify admin, go to Online Store → Themes → Customize.
- From the page selector at the top, choose the page where you want to show the widget. For example, Home page.
- Find the section where you want the widget to appear. For example, a Featured product section.
- Click "Add block" inside that section, go to Apps, and select "Custom Page Widget". You can also do this via “Add section”.
4. Configure the Custom Page Widget block
Click on the Custom Page Widget block to open its settings on the right side.
- Trigger Product - Select the product whose campaign you want to display. This product acts as the trigger product.
- Widget Type - Select the widget type you want to show. For example, Add-ons List. Make sure this matches the campaign type you created for the selected product in the app.
- Add to cart button selector (Optional) - Enter the CSS selector of the "Add to cart" button that belongs to the selected product. See the next section for when you need this.
Once done, click "Save" in the theme editor.
5. When to use the Add to cart button selector
For widgets such as Product add-ons, the selected add-ons are added to the cart when the customer clicks the theme's "Add to cart" button. On a product page, Selleasy finds this button automatically.
The Add to Cart button selector can be used in the following cases:
- Multiple Add to Cart buttons: Some pages, such as the home page, may contain multiple featured products with separate Add to Cart buttons. In this case, you can specify the selector for the button associated with the selected product. This helps Selleasy to add the product add-ons to the cart along with the correct trigger product.
- Add to Cart button does not add the add-on: Some pages may have only one Add to Cart button, but clicking it may not add the selected product add-ons to the cart. In this case, you can manually specify the Add to Cart button selector so Selleasy can link the widget to the button and add the selected product add-ons to the cart.
Example
section[data-url="/products/frostedge-sweatshirt"] button[name="add"]This selector points to the "Add to cart" button inside the section that displays the "Stride Sketch T-shirt".
To find the selector for your theme:
- Open the page in your storefront, right-click on the "Add to cart" button and click "Inspect".
- Note the button's class or attribute, along with the section identifier it belongs to.
- Enter the selector in the "Add to cart button selector" field of the Custom widget block.
Finding the right selector can be quite technical. You can always contact our customer support team for free setup assistance.
6. Test the widget in your store
- Open the page where you added the Custom widget block in your online store.
- Check that the widget appears in the position you set.
- Select an offer product and click "Add to cart" or if it is Frequently bought together/Shop the collection widget, directly click the respective “Add” button.
- Make sure the products are added to the cart and the discount, if set up, is applied.
FAQs
- Can I add more than one Custom Page Widget block on the same page? Yes. You can add multiple blocks, each with a different product or widget type. For example, you can show add-ons for two different featured products on the home page.
- Do I need to create a new campaign for the Custom Page Widget block? No. The block displays the campaign you have already created for the selected product. Any changes you make to the campaign will reflect in the block too.
- Will the widget still appear on the product page? Yes. The Custom Page Widget block is an additional placement. Your existing product page widgets continue to work as before.
- Why is the widget not showing on my page? Check the following:
- "Show product page widgets on other pages" is enabled in Common settings in the app.
- The selected product has an active campaign of the same widget type.
- The offer products are active and in stock.
- The Selleasy app embed is enabled in your theme.
- Why are add-ons not getting added to the cart? The widget may be linked to the wrong "Add to cart" button, or Selleasy may not be able to detect it. Add the correct selector in the "Add to cart button selector" field, as shown in section 5.
If you need any assistance while setting up the Custom Page Widget block, please feel free to contact our customer support team.