Make Merchi compatible with your favourite Woocommerce themes! The Merchi plugin will import all of your Merchi products into Woocommerce. Note: This plugin will deactivate some of the Woocommerce core functionality. It is not compatible with the Woocommerce shopping cart or checkout. I.e., you cannot sell Merchi products in combination with traditional Woocommerce products.
There are a few settings that will need to be configured in your Wordpress site, Woocommerce plugin and Merchi account in order for this plugin to operate as expected. Please use this guide to get started and as a reference for troubleshooing any errors.
The Merchi plugin requires Woocommerce. Get started by ensuring you have the Woocommerce plugin installed and activated in your Wordpress site. For information on how to install and activate Woocommerce, visit: Woocommerce.
To get your API key, follow the screeshots below. Note: Merchi and Woocommerce are configured in a way that requires you have a valid SSL certificate installed on your host. This API only works with Merchi over HTTPS.
Since we are importing the Merchi shopping cart component (more on this later), we do not need the Woocommerce "Cart", "Checkout", and "My Account" pages. Let's go ahead and delete these. Follow the screenshot below.
To install and activate the Merchi plugin, follow the screenshots below.
Let's configure the settings for the Merchi plugin. Follow the screenshots below. Note: Remember the API keys you saved from Woocommerce? You'd better have them handy because they're needed now.
Now let's get your Merchi domain ID. Go to Merchi.co and login to your account.
Head back over to your Wordpress site and paste your ID.
It's time to add a "mount point class". This can be a bit tricky if you are totally unfamiliar with web development, however I'm confident this guide can help overcome most knowledge gaps.
The mount point class is used to intialise a Merchi shopping cart to your page. The Merchi plugin takes the string you provide and looks for an element on the page with that class name to bind to. Eg., div class="shopping-dropdown" or span class="shopping-cart"; here the Merchi cart would bind to an element with the class shopping-dorpdown or shopping-cart, respectiely.
The goal here is to identify a fairly universal element in your Woocommerce theme that renders something like a shopping cart, or a shopping cart dropdown, and hijack it. An element of this sort can usually be found in the navigation. If not, we can modify the theme to add an element with a class to mount our Merchi cart to. However, let's not worry about modifying themes yet. For the purposes of this guide let's identify an element in the Storefront theme built by the guys over at Automatic (the authors of Woocommerce), and hijack it to mount the Merchi cart.
Go ahead and download and activate the Storefront theme on your Wordpress site. More information about installing themes can be found here.
Once your theme is set up, we will head over to the home page and "inspect element" on what looks to be a good candidate for our universal shopping cart element. Follow the screenshot below.
This will open up your "dom and style inspector". I'm using Firefox here, other browsers will look slightly different. Here we can identify the class associated with this element. Let's copy it and paste it into Merchi to see if it works. Follow the screenshots below.
Now head back over to your home page and let's see if the Merchi cart initialises. See screenshot below; in the right hand corner, where the Woocommerce shopping cart used to be, the Merchi cart has taken its place!
documentation tbc...
- install merchi plugin
- configure or check configurations of merchi account/products
- fetch merchi products
- add custom css
- change permalink stuff
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent