How do I use the Ecommerce Element?

In this article, we're going to walkthrough the steps to add products to your landing page. With AWeber landing pages, you can now accept payments through Stripe by utilizing the Ecommerce element. You can use the Ecommerce element to sell different types of products, including:

  • eBooks and PDFs
  • Access to your webinars
  • Memberships
  • "How to" guides for your audience
  • Illustrations and templates
  • Entry to a program or course you've developed
  • Access to an event
  • Tips and donations to fundraise for your passion project

You can easily create a landing page by using a pre-built template or designing the page from scratch. With the Ecommerce element, it takes a few clicks to add the product to your page and start generating sales--simply enter a product name and price. You can review your revenue with built-in reports from AWeber and, ultimately, reduce the stress of processing transactions. Stripe will handle the complexities of charging credit cards, chargebacks, refunds, etc.

In order to start selling, you must first connect your account to Stripe. Learn how to connect Stripe and AWeber with a step-by-step walkthrough.

Please note: because this application is set to single opt-in by default, new subscribers will be added immediately without receiving a confirmation email. Additionally, payments can only be processed for Stripe accounts with a bank account based in the US.

Fees

For each sale you make using Stripe and AWeber, there are fees for each transaction. Learn more about Stripe pricing. AWeber fees are as followed:

 

 

Step By Step Instructions

  1. Open the landing page editor, and click and drag the Ecommerce element to the desired spot of your landing page.

    Ecommerce element

  2. After you add the element to your page, the Ecommerce settings will appear on the right-hand side of the editor. If you haven't connected to Stripe yet, you can click "Connect to Stripe." to get started. Please note: you will need to connect before you can proceed.

    Connect to Stripe button

  3. Under the "Product" tab to enter information about the product. If you do not have any products yet, you can create and add products by clicking "Select a Product" dropdown and clicking "Add a Product."

    Add a Product from Select a Product dropdown menu

  4. Name your product.

    Add a Product Name

    Select the Payment Type.

    Select a Payment Type

    Then, enter the price and currency type for the product.

    Add a Price and select a Currency type

    You can also choose an existing product as well! If you have products set up in Stripe, you will see a dropdown menu instead. This will allow you to sell existing products with your landing page.

    Select a previously created product

  5. Next, you can add or remove tags to the payment form by clicking "Add Automation." Tags are keywords or phrases that you can use to group your subscribers together and send them specific messages. You can use this feature to trigger campaigns to automatically send them the content they purchased. You can also segment your list based on these tags and send broadcasts directly to those segments. There are a lot of use cases for tags.

    Click Add Automation

  6. You can customize the design of the button from the "Button" section under each tab.

    Button section

  7. First, you can choose whether to have the button auto size, meaning the buttons size will be determined by the content inside of the button.

    Auto Size Slider

    You can also choose how much padding you want, and if you would like to set the padding for each individual side.

    Padding Options

  8. In addition, you can edit the alignment of the button on your page.

    Alignment Options

    You can also customize the shape.

    Shape Options

    Lastly, you can edit the color of the button and the hover color by clicking on those boxes and selecting a color.

    Color and Hover Options

  9. You can also change the formatting of the font. Simply click on the button within the editor and you will see a toolbar appear. You can edit the font style, size, and color.

    Formatting of the font

  10. Under the "Order Form" and "Receipt" tab, to remove the "Powered by AWeber" icon from the bottom of the payment and receipt forms, click the "Branding" tab and disable the toggle. You can view the icon in step #9.

    AWeber Branding

    Please note: you cannot disable this toggle on the AWeber Free plan. Upgrade your account to unlock this feature and many more, or by contacting our Customer Solutions team. You can upgrade your account from within your account.

  11. Once you finish customizing the design and settings of the button, you can view the order form and receipt pages that your visitors will see. Click on the button and click the "Order Form" tab. This is where you will see the "Powered by AWeber" icon as discussed in step #7.

    Order Form page

  12. Click the "Receipt" tab to view the receipt page. In the section below Price you can edit the text your purchasers will see, you can give your subscribers more information on their next steps, direct them to your landing page, or call out any additional information you would like them to know.

    Receipt page editing

And that's it! In order to view and test your Ecommerce pop-up, your Landing Page must be published. When you visit your published landing page, you can see the Ecommerce element in action! Once you publish your landing page, you can start generating sales for your products. If you have any questions or concerns about the element, do not hesitate to contact our award-winning Customer Solutions team.

Have more questions? Submit a request