How to design checkout upsells with custom CSS

When using the checkout.liquid checkout, you have the ability to control the design of your checkout upsell using our built in customizations and CSS.

WYSIWYG editor
In the app, you have a WYSIWYG editor to customize the look and feel of your checkout upsell. There are two tabs, 'Card' and 'Button'. These respectively control the card and the button.






You will see the live preview update according to your edits. You can toggle between mobile and desktop to make sure it looks right. This preview will reflect the position of the checkout upsell you've selected in the UpsellPlus Settings.



Custom CSS
You can adjust even more details with custom CSS. To do so, go to a checkout upsell offer you created, scroll down to the 'Customization' card > click the 'Advanced' tab. Click 'Custom CSS'.




You can control the following properties:

.upsellplus-app {
    padding-bottom: 4px;
  }
  .upsellplus-container {
    border-style: solid;
    color: #212b36;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
  }
  .upsellplus-image-container {
    box-sizing: border-box;
    display: inline-block;
    width: 74px;
    height: 74px;
    border-radius: 5px;
    border: 0px solid #aaa;
    margin-right: 6px;
    background: white;
    align-self: center;
  }
  .upsellplus-image {
    object-fit: contain;
    object-position: center;
    height: 72px;
    width: 72px;
    border-radius: 5px;
  }
  .upsellplus-title-container {
    box-sizing: border-box;
    display: flex;
    flex: 2;
    flex-direction: column;
    margin: auto;
    min-width: 100px;
    padding: 5px;
    text-align: left;
    padding-right: 12px;
  }
  .upsellplus-title {
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 18px;
    text-align: left;
  }
  .upsellplus-message {
    font-size: 10px;
  }
  .upsellplus-action-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
  }
  .upsellplus-selection {
    margin-top: 5px;
    padding: 0 3px;
    max-width: 130px;
    border: 1px solid #767676;
    border-radius: 3px;
  }
  .upsellplus-price-container {
    text-align: right;
  }
  .upsellplus-price {
    box-sizing: border-box;
    color: #212b36;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    text-align: right;
  }
  .upsellplus-original-price {
    text-decoration: line-through;
    margin-right: 5px;
    display:inline;
  }
  .upsellplus-compare-at-price {
    box-sizing: border-box;
    color: #212b36;
    font-size: 17px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    text-align: right;
  }
  .upsellplus-subtitle {
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }
  .upsellplus-button {
    align-items: center;
    box-shadow: rgba(22,29,37,.05) 0 1px 0 0;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 13.3333px;
    justify-content: center;
    line-height: 1;
    margin: 10px 0 0;
    padding: 5px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background, border, box-shadow;
    user-select: none; 
    border-style: solid;
    float: right;
    min-width: 100px;    
  }
  .upsellplus-button-content {
    font-weight: var(--p-button-font-weight, 400);
    line-height: 16px;
    text-transform: initial;
    letter-spacing: initial;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1px;
    min-height: 1px;  
  }
  .upsellplus-button-text {
    font-size: 14px;
    font-weight: 500;
  }

Updated on: 27/01/2023