How To Override the Product Image

The app shows the main product image by default, and only switches to the variant image if it is selected using the variant dropdown.

In cases like the one this merchant describes (when they are upselling only a single variant), merchants sometimes expect that variant's image to show instead.

You can fix this by overriding the image for a specific offer like this:

  • First find the ID of the offer - this is in the URL of the edit offer page.  For this page:
    https://icuteam.myshopify.com/admin/apps/in-cart-upsell/offers/68969/builder
    offer ID is 68969
  • Then find the URL of the image the merchant wants to use
  • Then add this CSS to the shop's custom CSS field in settings:


#nudge-offer[data-offerid="YOUR_OFFER_ID"] .product-image-wrapper img{
  background-image: url(YOUR_DESIRED_IMAGE_URL);
  object-position: -99999px 99999px;
  height: auto !important;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0px;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us