Button templates

Meaning and use of buttons, selection of different button templates, Code

Updated over a week ago

Button templates are important for a sales page because they highlight the call-to-action and increase the conversion rate. They provide a clear and appealing visual representation that encourages visitors to click and take the desired action.

The use of button templates is instrumental in improving user experience. Intuitive design allows visitors to immediately see the steps they can take on the page to purchase the desired product or service. The visual prominence and clear direction of the call to action make for a seamless and pleasant user experience, increasing the likelihood that interested parties will become actual buyers.

An example of a button template could be an eye-catching “Buy Now” button with an appealing design and contrasting colors.

For each Button Color, you will find the following templates:

  • 4 different button text variants

  • each in rounded or square form

  • each with or without tagline (credit card icons etc.)

In addition, you will find under each button the corresponding embed code as a template to insert it on your website.

Embed code

  1. Copy the code below the button you want to use.

  2. Paste it on your sales page (if you use a page builder, use an "HTML Code" element for this).

  3. By default, the buttons have a width of 320px. That's why you'll find in the embed text: style = "max-width: 320px;" If you need a wider version of the button, then just here the width! "The maximum possible width at optimal quality is 812px."

  4. Important. Replace the word "PRODUCT ID" with the product ID of your product (this is the 8-digit letter/number combination in the checkout URL of your product).

  5. If you center the button, "<center>" will appear before and "</center>" after the embed code (no spaces). Example: <center><a href="https://www.copecart.com/products/PRODUKT-ID/checkout"><img"><img src="https://s3.eu-central-1.amazonaws.com/copecart-static/button/checkout+mit+copecart/rund+blau.png"></a></center>

  6. If you want your CopeCart Checkout page to open in a new tab, set target = "_blank" directly after the link in your embed code. Example: <a href="https://www.copecart.com/products/PRODUKT-ID/checkoutcheckout" target="_blank"> .... </a>.

Of course you can download the buttons at any time (right mouse button + "Save as"), and use them according to your needs.


To get to the button on the left, please select the German article.

For further questions, please feel free to contact our support team.

Best regards

Your CopeCart Team

Did this answer your question?