Buy Button Premium (Blog and SEO)

The Buy Button Premium module allows you to sell your products from your blog posts or external pages using a call-to-action or buy button. Find below all the necessary information to understand and use 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 of all, start with the format of the purchase button: do you want to integrate a single button or a card with the photo, name and price of your product on your different sites?

Step 1: Configuration

Please select the product for which you want to create the purchase button by entering the first letters of its name in the search field.

Do you want to display the product price on the buy button?

Then, you will have the option to choose the page on which the purchase button will be displayed, it could be a CMS page on your site, a page of your blog, etc. Choose "External Page" to retrieve, after its creation, the code of the button to copy and paste on your external page to make it appear on a page that is not on your store.

You can also select the action associated with this button. 3 options are offered to you:

• Go to product page: redirects to the page of the selected product from your store
• Order: redirects directly to the basket of your shop with the selected product already added
• Add to cart: add this product to a temporary cart on your page, and open a pop-up with each addition. Allows you to add multiple products to this temporary cart before proceeding to the order. Useful if you want 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 adaptation to your visual identity.

Please indicate first the size of your button, so its width and height.

You will then have the option to customize the text of your button. You are recommended to fill in this text in all available languages of your store, as well as to change the font, size and color of it. Tip: Evitez a text that is too long, a short text will have more impact and encourage clicks.

You can also change the color of the button and its color when hovering over the mouse.

At any time in 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 purchase button or card on the page of your choice.

IF you chose an integration on one of your CMS pages in step 1, two location choices are offered: at the top or 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, consult the first part of this documentation.

Finally, a permalink will be available so you can easily retrieve and share it on your networks.

Overview tab

In this tab, you will find all the buttons or cards already created, in two tabs: buttons and cards. By default, these buttons are sorted by creation date, the first being the most recent. You can browse the pages if many buttons have been created.

For the consistency of this tab, the color, size and text configurations 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:

• Preview 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 remember to change its location),
• to enable/disable a button (if a visitor clicks on a disabled button or card, they will be redirected to the home page of your store)
• to remove a button (be sure to remove the code of the button from its current location, otherwise the visitor will be redirected to your home page)

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 made by visitors who have interacted with these buttons

Compatibilities

Warning: This module is compatible on the following external pages, according to the following configurations.

Wordpress.com: Caution: Note that if you want to add buttons and cards on Wordpress.org this is not possible. This feature is only unlocked with the Business offer from 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 of the Buy Button Premium module.

Wix.com Attention: Note that if you want to add buttons and cards on Wix, you need to make sure that your PrestaShop store is in https. The http protocol is not compatible with Wix sites. If you want to add your cards and buttons inside a content, follow the instructions below.

• Choose to modify the content of your Wix site using the Edit button at the bottom left (you will be redirected to editor.wix.com: the Wix editing tool directly on your front office)
• Once on the editor, choose the page where you want to add your map or button using the Site Structure on your left.
• Let's take the example of an article from your blog. Click on Blog in your Site Structure, choose 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 card or button inside your item and press +.
• Then, click on the tool that allows you to add an HTML code.
• Insert your HTML code using the first tool pre-selected for you and copy/paste the code generated by the Buy Button Premium module to this location.
• Finally, you can place your card or button wherever you want using the available layout tools

If on the contrary, you want to add your buttons or cards anywhere on your Wix, and not in an 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 host JavaScript. You must set this up to make the following adjustments.

• First, go to the main menu at the top of your screen and click on System at the top left and select Global Configuration.
• You will be redirected to Site Settings. Then choose, in Default Editor > Editor None.

Once these configurations are done, you can now add your Buy Button Premium wherever you want in your texts.

• For example, to add your cards 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 and then simply copy and paste the HTML code generated by the Buy Button module

Premium and insert it in the place of your choice in the content of your text (example below at the end of the article). You will be able to see your button or card appear on your store once you have clicked on Save.

After adding your button or card, remember to go back to System > Global Configuration > Site Settings > Default Editor > Editor TinyMCE to reset your initial configurations. You simply need to make these changes whenever you want to add a button or card.

Themecloud.com: Note: For Themecloud, you do not need to change your site's configurations.

• Go to your Dashboard > Posts and you will be redirected directly to Edit Post where you can choose to edit your text with the Edit with Elementor tool.
• Once redirected to the Elementor editing interface. You can choose to insert an HTML code on your left. Drag and drop the HTML tool where you want to insert your map 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 map or button will be visible on your site.

Squarespace.com: Caution: Note that if you want to add buttons and cards on Squarespace.com, you need to make sure that your PrestaShop store is in https. The http protocol is not compatible with Wix sites.

• Click on the drop or + at the top left of your selected page content 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 dedicated location. Remember to save and you will see your button or card appear on your front office in the chosen location.