How can I place credit card icons on product details pages

Last updated

It is a common practice for online shops to place credit card logos on the store pages. It lets the customers know they can pay by credit card in a store and, what is more important, gives them a sign of secure online shopping and increases their confidence.

In Ecwid, you can place credit card logos on the store pages as well. In order to display your custom logos under the add to bag button on the product page, add the following code to your custom CSS theme:

div.ecwid-productBrowser-details-rightPanel div.ecwid-productBrowser-backgroundedPanel {
  padding-bottom: 40px;
  background-image: url('http://www.credit-card-logos.com/images/multiple_credit-card-logos-2/credit_card_paypal_logos_1.gif');
  background-position: bottom center;
  background-repeat: no-repeat;
​​}
div.ecwid-productBrowser-nav div.ecwid-productBrowser-backgroundedPanel {
  background-image: none;
  padding-bottom: 10px; 
}

You can use your own image - just place the full URL of your image instead of the text in bold in the code above. The padding-bottom value ("padding-bottom: 40px;") should be modified in your custom CSS code according to the height of your image. Just make sure the value of padding-bottom is a bit greater than the image height.

Free credit card icons: http://www.smashingmagazine.com/2008/04/25/free-credit-card-icons-for-online-shops/

Was this article helpful?
0 out of 2 found this helpful
Questions?
Get help
  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7