Embed Checkout
Last updated
Last updated
Embed checkout is a feature of Commerce for Standard, Premium and Ultimate account users only.
The embed code for products can be used for you to insert an embedded form for the product you want into your sales/landing page content. To obtain the embed code for your products/bundles, you can go to the section:
Login to your Shoppegram account -> Click on Products -> Click on the product for which you want to obtain the embed code.
If you want to obtain the embed code for a product bundle, you can click on Bundles first.
Next, you can click on the Embed product/Embed checkout tab
You can save the embed code for the product that is displayed in the available box to be inserted into your sales/landing page content later. To copy the embed code, you can click on the highlighted icon button as shown in the display below.
To insert the embed code for the product into your sales/landing page, you can drag an HTML element block into your sales/landing page content page builder. Then, you can click on the HTML content that has been inserted and you can directly paste the product embed code in the available space on the left side of your display.
This is an example display that you will see on your sales/landing page later.
If you want to change the layout/design of your checkout embed, for now we only allow a few changes and you need to enter custom coding in your embed code itself to do it.
Here we include a code that you can insert into your embed code.
Make sure you enter this code in the <embed-product "code"> field itself. For example, here we include a sample code for us to display the order summary box above, display the order notes column, change the color of the "Pay now" button to black, and change the text of the "Pay now" button to the text "Beli Sekarang":
| Description | Code |
|---|---|
Change the position of the Order summary box. For now, only top positions are allowed.
order-summary-position="top"
Order notes display. "true" for you to display. Whereas, "false" is for you to hide.
input-custom-note="true"
The "Pay now" purchase button color changes. You can enter the hex code of the color you want to use.
button-buy-color="#00FF00"
The "Pay now" purchase button text changes. You can enter the text you want to display.
button-buy-text="BELI SEKARANG"
