BigCommerce App 1.0

Look and feel

Learn how to customize Drop-in.
Using the Cornerstone theme, you can style the look and feel of the elements within the Drop-in component using Page Builder.
You can change the following body text and link attributes:
  • Body text font family
  • Link font family
  • Link color
  • Link hover color
Form Checklist
  • Form Background
  • Form header text color
  • Form border color

Styling the Pay button

To style the Pay button within the Digital River drop-in component:
  1. 1.
    Click Store Setup in the app menu on the left and then click Themes.
  2. 2.
    Under Current Theme, click Advanced. and select Make a Copy from the dropdown list.
  3. 3.
    Enter a name for the theme in the Theme Name field and click Save a Copy.
  4. 4.
    Under Themes, click more options on the theme you just created and select Edit Theme Files.
  5. 5.
    Click the Do not show me again check box and click Edit theme files.
  6. 6.
    From the Stencil File Editor tab on your browser, click assets, click scss, and then click optimized-checkout.scss.
  7. 7.
    Copy the following text and paste it at the bottom of the optimized-checkout.scss file. .DR-pay-button{ background-color: BLACK !important; } .DR-button-text{ color: RED !important; } Important: You must add the !important rule to the CSS line.
  8. 8.
    Click Save File. The results will look like this: