With the help of our E-commerce widget, you can sell products directly from your Readymag project. The widget is based on the Stripe API and allows payments from credit cards. It is available on all of our paid plans.
We don’t charge any additional fees for using E-commerce—however, Stripe regulations do apply. You can find pricing details for Stripe here: https://stripe.com/pricing. If you have any questions regarding Stripe functionality or experience any issues with payments, customer orders, etc., please refer to the official documentation of Stripe or contact the Stripe support team.
Stripe is currently supported in 34 countries. Check if you can accept payments in your country here: https://stripe.com/global.
Note: The E-commerce widget only works in projects with an SSL certificate. You can enable SSL in the Domain tab of your project settings.
Before you start
As the E-commerce widget is based on the Stripe API, you need to have an account with Stripe to get started: https://dashboard.stripe.com/register. If you haven’t already registered, you’ll be prompted to sign up after clicking ‘Connect to Stripe’. Stripe will require your business details to activate an account.
Note: Collaborators cannot enable 'connect to Stripe' to activate e-commerce.
Now it’s time to add your products to Stripe. Log in to your account, then select Orders → Products → Add new. Specify your product name, add a description, an image, and select attributes like size and color. Click ‘Save product,’ and you’re all set.
Note: The E-commerce widget cannot be used if Checkout is enabled in Stripe. To check it, open the settings of your account in Stripe, scroll down to the Stripe apps and click ‘Checkout settings.’
Add products to your project
Click E-commerce in the widget panel to create a new widget. You’ll see a Cart button and a pop-up prompting you to connect to your Stripe account. Turn the switch on to be redirected to Stripe. Now Stripe is connected and you can keep building your Readymag project.
Click + in the widget controls to add a new product. You’ll see a new ‘Add to cart’ button in your layout and a drop-down menu where you can select one of your products added to Stripe. To add another product, click on the Cart again, and then click + in the widget controls. To add an image for your product, upload it via the Picture or Slideshow widget and position it above the Add to cart button. Prices can be added using the Text widget.
If your product has other attributes like size or color, they will be shown as drop-down menus above the Add to cart button.
When configuring attributes in Stripe, we recommend you set a specific value rather than a general title. For example, you are selling a shirt that can be purchased in two colors: blue and red. Don’t use ‘color’ as a title for this attribute, simply enter ‘red’ and ‘blue’ in its fields.
Customize the buttons
Click Settings in the widget controls to set the preferred color, borders, radius, and font for your ‘Cart’ and ‘Add to cart’ buttons. Both buttons can be customized individually. Click a button you need to edit and go to Settings after that: you’ll see dedicated options for that particular button.
If you want your buttons to change their appearance on hover, switch from Default to the Hover tab and select the preferred settings.
In the Icon section of the widget controls, you can select from thousands of icons to show it next to your text. Here you can also adjust the size of an icon and position it to the left or right border of your button.
How the widget works
The E-commerce widget consists of two parts: a product card and a cart. When your customer puts products into their cart, the number on the Cart button changes to match the number of added products. To view everything they’ve added, your customers can click directly on the Cart button. After that, the cart will open on the right side of your project.
To change the appearance of your cart, go to the Preview mode and click the gear icon at the bottom of it. Here you can select sidebar color and transparency, customize your font, and decide whether you want the cart to display with a shadow.
Customers can change the quantity of products or delete items they don’t want directly from the cart interface. The rest of the procedure is quite standard: your customer clicks ‘Check out’ and enters their address, email, and shipping notes if needed, and then proceeds with payment by entering their credit card information. After payment is made, Stripe sends a letter to the customer’s email with confirmation. The money will appear on your balance in Stripe; Readymag doesn’t charge any commissions.
Note: If you encounter any issues regarding managing products in Stripe, payments, etc., please contact the Stripe support team.
Other e-commerce services
If Stripe doesn’t suit you, you can still turn your project into an online store by embedding a third-party E-commerce service via our Embed & Code widget. Normally, full custom code functionality is available at the Professional plan, while Creator allows integration of the <iframe>-snippets only. However, there are several exceptions: Shopify, Gumroad, and Ecwid can be embedded with any paid plan. Click here for more information.