Articles in this section

See more

Customizing the Store Donation on Purchase Widget

ShoppingGives
  • Updated

In order to customize the widget for different stylings, follow the steps provided in this document.

Instructions

With the Change Commerce app, you can customize the style of the Store Donation on Purchase widget by using the theme section option within the Widget Settings.

To navigate to these settings:

  • Go into the Impact Portal and click on Campaigns from the left side menu, then select Store Donations:

    mceclip1.png

    Next, select the Widget Settings tab, then select the Theme Section option within the Widget Placement section:

    mceclip2.png

For a step-by-step guide on how to customize the various elements of the Store Donation on Purchase widget, we recommend that you review this article.

If you would prefer to use the CSS editor to customize the appearance of our widget with any style sheet, you can follow the steps below. It is better to make the customization on the theme’s main style sheet.

To edit the container to add padding, target main-element

Style Fields for the Compact Widget Style:

  1. To modify the eligibility tag main text, target class id sg-main-text to provide the stylings (don't forget to use !important)
  2. If you have to fix the logo size, target class id powered-by-logo

Style Fields for the Contained Widget Style:

  1. To modify the eligibility tag description, target class id sg-text-wrap to provide the stylings (don't forget to use !important)
  2. To modify the main title, target the id cc-shop-give to provide the stylings (don't forget to use !important)
  3. If you have to fix the logo size, target class id powered-by-logo

Style Fields for the Full Widget Style:

  1. To modify the main title, target the id sg-title to provide the stylings (don't forget to use !important)
  2. To modify the eligibility tag description, target class id sg-text-wrap to provide the stylings (don't forget to use !important)
  3. If you have to fix the logo size, use class id sg-powered-by-wrap.

Update Widget Width, Border, Background, and Spacing:

.sg-widget .shoppinggives-tag {
  width: 300px !important;
  border: 1px solid #000 !important;
  border-radius: 0px !important;
  background: transparent !important;
  margin: 0px !important;
}

Compact/Contained/Full - Hide Cart/Checkout Widget When Ineligible Items in Cart:

.sg-widget .main-element.sg-excluded {
  display: none !important;
}

The widget that gets appended on the cart and/or checkout page will populate a class name of “sg-excluded” when only ineligible items are within the cart.  Once an eligible item is added into the cart, this class is removed and the widget should appear as expected.

Related articles