|
⚠️ This module is currently unavailable. |
The Buy Button Premium module allows you to sell your products from your blog posts or external pages using a call-to-action or purchase button. Below you will find all the necessary information for understanding and using this module.
Creation tab
In this tab, you will have the opportunity to create your purchase buttons or cards, customize their display, and choose how to integrate them on your pages.
First, start with the format of the purchase button: do you wish to integrate a single button or a card with the photo, name, and price of your product on your various sites?
Step 1: Configuration
Please select the product for which you wish to create the purchase button by entering the first letters of its name in the search field.
Would you like to display the price of the product on the purchase button?
Next, you will have the option to choose the page on which the purchase button will be displayed; this could be a CMS page on your site, a page from your blog, etc. Select "External Page" to retrieve, after its creation, the code for the button to copy and paste onto your external page to make it appear on a page that is not on your store.
You also have the option to select the action associated with this button. 3 options are offered to you:
- Go to the product page: redirects to the page of the selected product in your store.
- Order: redirects directly to your store's cart with the selected product already added.
- Add to cart: adds this product to a temporary cart on your page and opens a pop-up with each addition. Allows you to add multiple products to this provisional cart before proceeding to the order. Useful if you wish to add multiple buttons or cards to the same page.
Step 2: Design
This step will allow you to customize the design of your purchase button or card for better alignment with your visual identity.
Please first indicate the size of your button, specifically its width and height.
You will then have the opportunity to customize the text of your button. It is recommended that you fill in this text in all the available languages of your store, as well as change the font, size, and color of it. Tip: Avoid overly long text; a short text will have more impact and encourage clicking.
You can also change the color of the button and its color on mouse hover.
At any time during this step, you can preview your configurations in real time on the right.
Step 3: Position
In this step, you will find 3 different ways to integrate the button or the purchase card on the page of your choice.
If you have chosen an integration on one of your CMS pages in step 1, two location options are offered to you: at the top or at the bottom of the chosen page.
If, on the contrary, you have chosen an integration on an external page, you can copy the generated HTML code and insert it into the HTML code of the desired page of your blog, WordPress, or CMS page. Note: To find out how and where to add this code to your external pages, please refer to the first part of this documentation.
Finally, a permalink will be available for you to retrieve and easily share on your networks.
Tab overview
In this tab, you will find all the buttons or cards that have already been created, in two sections: buttons and cards. By default, these buttons are sorted by creation date, with the most recent one appearing first. You can navigate through the pages if many buttons have been created.
For the coherence of this tab, the configurations of colors, sizes, and texts of the buttons and cards are not visible in this tab; only the associated product is highlighted to recognize your buttons and cards.
For each button or card, you will have the opportunity by clicking on the pencil:
- to preview the button (quick access to copy/paste your HTML code and the visual rendering)
- to edit the button (all configurations)
- to duplicate the button (to start from configurations that you like, but be sure to modify its location),
- to activate/deactivate a button (if a visitor clicks on a disabled button or card, they will be redirected to your store's homepage)
- to delete a button (be sure to remove the button's code from its current location, otherwise the visitor will be redirected to your homepage)
In order to estimate the impact of your buttons and cards, you will find statistics related to each button or card.
- The number of views of your buttons.
- The total number of clicks on these buttons.
- The number of orders placed by visitors who interacted with these buttons.
Compatibilities.
Attention: this module is compatible on the following external pages, according to the configurations that follow.
Wordpress.com: Attention: please note that if you wish to add buttons and cards on Wordpress.org, this is not possible. This feature is only unlocked with the Business offer of Wordpress.com. However, if you have a WordPress blog that you host yourself or through a host other than Wordpress.com, you can use the buttons and cards from the Buy Button Premium module.
Wix.com Attention: please note that if you wish to add buttons and cards on Wix, you must ensure that your PrestaShop store is in https. The http protocol is not compatible with wix sites. If you wish to add your cards and buttons within content, please follow the instructions below.
- Choose to modify the content of your Wix site using the Modify button at the bottom left (you will be redirected to editor.wix.com: the editing tool for your Wix directly on your front office).
- Once in the editor, select the page where you wish to add your card or button using the Site Structure on your left.
- Let us take the example of an article from your blog. Click on Blog in your Site Structure, select the article in question, click on it, and modify its content using the Manage Posts tool, select the article, and click on Edit.
- Then, choose the location of your map or button within your article and press +.
- Next, click on the tool that allows you to add HTML code.
- Insert your HTML code using the first pre-selected tool for you and copy/paste the code generated by the Buy Button Premium module at this location.
- Finally, you will be able to place your card or button wherever you wish using the available layout tools.
If, on the other hand, you wish to add your buttons or cards anywhere on your Wix, and not in existing content, click on + in the quick edit tool on editor.wix.com, then More > Integrations > HTML Code.
Joomla.com Note: Joomla.com is not pre-configured to accommodate JavaScript. You must configure this to make the following adjustments.
- First, begin by going to the main menu located at the top of your screen, and click on System in the top left corner, then select Global Configuration.
- You will be redirected to Site Settings. Then, choose Editor None from Default Editor.
Once these configurations are done, you can now add your Buy Button Premium wherever you want in your texts.
- For example, to add your maps or buttons to one of your articles: Click on Content in your main menu. Choose to edit an existing article in the Articles submenu or create a new article in the Featured Articles submenu, then simply copy and paste the HTML code generated by the Buy Button module.
Premium and insert it wherever you want in the content of your text (example below at the end of the article). You will be able to see your button or card displayed in your store once you have clicked on Save.
After adding your button or card, be sure to return to System > Global Configuration > Site Settings > Default Editor > Editor TinyMCE to restore your initial configurations. You simply need to make these changes whenever you wish to add a button or a card.
Themecloud.com: Note: For Themecloud, you do not need to change your site configurations.
- Go to your Dashboard > Posts and you will be redirected directly to Edit Post where you can choose to edit your text using the Edit with Elementor tool.
- Once redirected to the Elementor editing interface. You will be able to choose to insert an HTML code on your left. Drag and drop the HTML tool where you wish to insert your card or button, and then add the HTML code generated by the Buy Button Premium module.
- Click on Update at the top left of Elementor and your card or button will be visible on your site.
Squarespace.com: Attention: please note that if you wish to add buttons and cards on Squarespace.com, you must ensure that your PrestaShop store is on https. The http protocol is not compatible with wix sites.
- Click on the drop or on + at the top left of the content of your selected page to access the available tool palette.
- Select the Code tool in the More category.
- Add your HTML code generated by your Buy Button Premium module in the designated location. Remember to save, and you will see your button or card appear on your front office at the chosen location.