Sell stuff directly on your landing page or website with the Payment content block. The Payment block syncs products from your Square account to Mailchimp. If you add a new product directly to a Payment block, it will automatically be added to your Square account.
In this article, you’ll learn how to use a Payment block on your landing pages or website.
Before you start
Here are some things to know before you begin this process.
- Payment blocks are only available for landing pages and websites.
- You can use one Payment block per page.
- To sell things on your landing page or website with the Payment block, you’ll need to connect your Square account to Mailchimp.
- Make sure the address in your account’s Billing Settings is set to a country that’s currency matches what you have set in Square.
How it works
The Payment block includes space for a product image, title, cost, description, and checkout button. When visitors click the checkout button, they’ll see a checkout form on your landing page or website.
After they complete the checkout form, Mailchimp will send them a receipt.
When you add the Payment block, you can browse and choose a product from your Square account, or add a new product directly into Mailchimp. Because you can only choose one product in the Payment block, it works best for products that do not have variants. For example, a product with variants might come in different colors, sizes, or versions.
Mailchimp syncs with your Square account whenever you access a Payment block. New products added to a Payment block will sync to your Square account immediately. You can make permanent edits to product details that sync to Square on your Integrations page.
- We recommend you include your preferred business contact information on your landing page or website in case buyers have a question or need help.
- Products must be at least $1 to be synced or added to Mailchimp.
About shipping and sales tax
Before you begin, make a note of the sales tax and shipping rates for the product you want to sell. Our Payment content block doesn’t add sales tax or shipping charges to your product unless you enter them in Mailchimp first.
After you add a Payment content block to your landing page and insert or add a product, you’ll need to enter the correct rates in the shipping and sales tax fields. We’ll apply these charges to the total cost of the product at checkout.
If your Square account lists the sales tax as part of the product price, you’ll still need to enter your sales tax rate in the Payment block in Mailchimp.
For more information about how to create and manage your tax settings in your Square account, check out Square’s article on the topic.
Add a product
To add products, you'll either add a product from your Square store or add a brand new product in Mailchimp.
Add a product from your store
When you click on a Payment block, Mailchimp syncs to your connected Square account. You can then choose from products you already have in Square.
To add a product that’s already in your Square store, follow these steps.
- Click and drag the Payment block into your layout.
This block will not be available to drag from the editing pane if it is already in your page design.
- On the Content tab, click Change Product.
- In the Select a Product modal, search for the product you want and click Insert.
Add a New Product
When you add a brand-new product directly to the Payment block, we'll sync it to your Square account so you can sell it through Mailchimp immediately. Title and Price are the only fields required to add a new product.
To add a new product, follow these steps.
- In your layout, click the Payment block.
- Click Change Product.
- Click Add.
- In the Title field, type your product’s name.
- Click Browse to open your file manager and choose an image. Or, drag and drop an image from your computer into the Select a product modal. If you do not have an image, you can skip this step.
- In the Description field, type a description of your product. This is optional.
- In the Price field, type the price of your product. Your new product must be at least $1.
- In the SKU field, type the SKU (stock-keeping unit) of your product. This information is not required.
- Click Save.
Nice! Your product will automatically be added to your Square store.
Customize the payment block
After you choose or add a product, you can customize the content that will appear on your page. These updates will only change the product details in the page you’re working with. To change the product details in Square, update the product on your Integrations page.
To customize the Payment block, follow these steps.
- In your layout, click the Payment block.
- Update the Title, Shipping, and Tax fields. Enter
0into any fields that do not apply.
- To add a short description to your product, toggle the Description slider and use the field provided.
- To update your product’s image, click Replace, Edit, or Remove.
- To add an image gallery to your page, toggle the Additional Images slider. Then, click the plus sign to choose images from the content studio.
- To edit your checkout button text, use the Button Text field.
- Click the Style tab to edit styles for the product title, product price, image, and button.
- Click the Settings tab to choose a layout and adjust the checkout button’s alignment and width.
- Click Save & Close.
Great job. Now that your Payment block is all set, continue building your page and publish it when ready.
Change and sync the price of a product
To change the price of a product in a Payment block, you’ll first update the product price through the Integrations page. After you make your changes, you'll visit the product block in your landing page or website to sync the updated price.
In this section, we'll go over how to change the price of your Square products in your website or landing page.
Change the price
To change the price of your existing Square product, follow these steps.
Click your profile name and choose Connect.
Click Manage Your Sites.
Click Manage Products.
Click Edit for the product you'd like to update.
In the pop-up modal, update the title, image, description, price or SKU number as needed.
When you're done, click Save.
To learn how to update the price in Square, check out Square’s item management guide. Next we'll go to your landing page or website and update the displayed price of your product.
Sync updated price
To update the price displayed in an existing Payment block, follow these steps.
In your layout, click the Payment block.
On the Content tab, check to make sure that the new price is listed. If it takes a few seconds to sync, you’ll see the syncing status.
When the price has synced, click Save & Close.
- Click Save & Publish.
You’re good to go! The new item price should be listed on your published landing page.