> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # πŸ“ How to Place Upsell & Cross Sell in a Custom Position Want your Upsell & Cross Sell widget to appear exactly where *you* want it β€” not just in the default spots? 🎯 That’s exactly what the **Custom Position** option in Hoppy Upsell & Cross Sell is designed for. Instead of relying on the app’s automatic placement, Custom Position lets you decide the precise location of your widget using: * 🧩 A theme **App Block** (no coding needed) * πŸ“ A **code snippet** you can paste into a Custom Liquid section or your theme files This is perfect when you want the widget to sit between specific sections β€” for example, right under your product description, inside a tab, or above the cart totals β€” so it blends naturally into your store’s design ✨ --- # **πŸ—ΊοΈ Where Custom Position Works** Custom Position can be used on the following pages: * **Product Page** β†’ anywhere inside your product template * **Cart Page** β†’ anywhere inside your cart template ℹ️ Custom Position is only supported on the **Product Page** and **Cart Page**. The **Cart Drawer** is rendered dynamically by your theme, so app blocks can’t be placed inside it β€” for the cart drawer, use the dedicated **Cart Drawer** placement type instead. --- # **βœ… Before You Begin** Make sure the following are in place before setting up a custom position: * The **Upsell Cross-Sell Slider app embed** is enabled in your theme β†’ **Shopify Admin β†’ Online Store β†’ Themes β†’ Edit theme β†’ App Embeds β†’ Upsell Cross-Sell Slider β†’ ON β†’ Save** ⚠️ Without the app embed, the widget script never loads β€” so nothing will appear, even if the block is placed correctly. * You have your **Upsell ID** handy. Not sure where to find it? See πŸ”Ž How to Find Upsell ID?. --- # **πŸ› οΈ Step 1 β€” Enable Custom Position in the App** There are two ways to turn on Custom Position β€” pick whichever matches your situation. ## **Option A β€” Create a New Custom Position Upsell** Open the **Hoppy Upsell & Cross Sell** app, then: β†’ Click **Create new upsell** β†’ On the placement type screen, select **Custom Position** This creates a new upsell whose placement is already set to **Custom position** β€” you’ll configure its content and design as usual, then place it on your theme in the next steps. ## **Option B β€” Switch an Existing Upsell to Custom Position** Already have a **Product Page** or **Cart Page** upsell? You can convert it: β†’ Open the upsell from your dashboard β†’ Go to the **Placement** tab β†’ Under **Display On (Include)**, open the placement dropdown and select **Custom position** πŸ’‘ Switching to **Custom position** clears the automatic placement, so the widget will only appear where you place it yourself in the theme. --- # **πŸ’Ύ Step 2 β€” Save to Get Your Upsell ID & Code Snippet** Custom Position works by matching your theme placement to a specific upsell using its **Upsell ID**. After selecting **Custom position**: β†’ Click **Save** Once saved, the **Placement** tab reveals two ready-to-copy items: * **Upsell ID** β†’ the unique ID of this upsell (with a copy button πŸ“‹) * **Upsell code snippet** β†’ a ready-made HTML snippet (also with a copy button) ℹ️ These only appear **after saving**. If you see β€œSave to see Upsell ID and code snippet”, just hit Save first. --- # **🧩 Step 3 β€” Place the Widget on Your Theme** Now choose how you want to place the widget. Both methods work on the **product template** and the **cart template**. ## **Method 1 β€” Using the Theme App Block (Recommended)** This is the easiest, no-code way πŸŽ‰ β†’ Go to **Shopify Admin β†’ Online Store β†’ Themes β†’ Edit theme** β†’ From the top dropdown, open the template where you want the widget: * **Products β†’ Default product** (for product pages) * **Cart** (for the cart page) β†’ In the left panel, click **Add block** (or **Add section**) β†’ Under **Apps**, select **Upsell Cross-Sell Block** β†’ In the block settings, paste your **Upsell ID** into the **Upsell ID** field β†’ Drag the block to your preferred position ⬆️⬇️ β†’ Click **Save** πŸ’‘ Right after publishing an upsell, the app also shows an **Add App Block** shortcut button in the confirmation banner β€” it opens your theme editor directly with the block ready to add. ⚠️ If the **Upsell ID** field is left empty, the block displays a β€œPlease configure the Upsell ID to use App Block.” placeholder instead of your widget β€” so always paste the ID. ## **Method 2 β€” Using a Custom Liquid Block / Code Snippet** Prefer more control, or want the widget somewhere app blocks aren’t available? Use the code snippet instead. β†’ In the theme editor, add a **Custom Liquid** block or section where you want the widget β†’ Paste the **Upsell code snippet** you copied from the app. It looks like this: \
\ β†’ Click **Save** The app automatically finds this placeholder on the page and renders the matching upsell widget inside it β€” even if your theme re-renders the section later πŸ”„ πŸ’‘ You can also paste the snippet directly into your theme’s Liquid files (e.g. inside a custom product section) if you’re comfortable editing code. --- # **πŸ“Œ Important Notes & Warnings** * ⚠️ **App embed must stay ON** β€” both methods depend on the **Upsell Cross-Sell Slider** app embed being enabled. * ⚠️ **Designed for Product & Cart pages** β€” Custom Position is built and supported for product pages and the cart page. The widget renders wherever it finds the block/snippet placeholder on the page, so only place it on those templates β€” placing it elsewhere (like the home page or collections) isn’t supported and may produce unexpected results. * πŸ’‘ **One ID \= one upsell** β€” the Upsell ID inside the block or snippet decides which upsell shows. To display a different upsell, swap in its ID. * πŸ’‘ **Multiple placements** β€” you can add the same block or snippet in more than one spot (e.g. product page *and* cart page) using the same Upsell ID. * ⚠️ **Publish your upsell** β€” the upsell must be **published** in the app, otherwise nothing renders on the storefront. * ℹ️ Display conditions still apply β€” targeting rules like customer login status, geolocation, cart value, or scheduling are still respected in custom positions. See 🎯 Advanced Targeting Options for Upsell & Cross Sell for details. --- # **πŸŽ‰ Final Result** Once everything is set up: βœ… Your upsell widget appears exactly where you placed the block or snippet βœ… It updates automatically with your content, design, and targeting settings from the app βœ… You can freely move, remove, or re-add the placement anytime from the theme editor β€” no need to touch the app again Here’s what it looks like on a product page: --- # **πŸ›Ÿ Troubleshooting** If your widget isn’t showing up after placement: * πŸ”Ž Double-check the **app embed** is enabled and saved * πŸ”Ž Confirm the **Upsell ID** in the block matches the upsell you published * πŸ”Ž Make sure you placed the block on a **product** or **cart** template * πŸ”Ž Verify the upsell is **published** and not scheduled outside the current date Still stuck? Check Upsell & Cross Sell is Not Showing on My Store \[Fixed\] for a complete checklist. --- # **πŸ“š Related Guides** * πŸ”Ž How to Find Upsell ID? * 🎨 Upsell & Cross Sell – Design & Styling * 🎯 Advanced Targeting Options for Upsell & Cross Sell * Upsell & Cross Sell is Not Showing on My Store \[Fixed\]