Selling on Joomla with Ecwid
If you consider using Joomla as your site platform or already have a website created on this content management system, you can easily add an e-commerce store to your site and start selling online. All you need to do is create an Ecwid store and follow the below instructions to add it to your site. The store will embed seamlessly and will look like an integral part of your Joomla site.
Joomla offers two solutions to create your own website: you can use the downloadable version of Joomla CMS and host it yourself or use the hosted version of Joomla. Each option has its own advantages. To decide which solution suits you best, see a more detailed comparison of the two options.
Adding Ecwid store to a Joomla site
You can add your Ecwid store to a website created both with the help of the downloadable version of Joomla CMS and with the hosted version of Joomla.
To add your Ecwid store to a site created on Joomla, follow the instructions:
To add your Ecwid store to a site created on the hosted version of Joomla, you will need to paste the store code to your site page. Sometimes the store code might get corrupted by the built-in Joomla editors and prevent your store from the correct display. To provide the store shows up on the site as it should disable the default Joomla editor before adding your store code.
To disable Joomla default editor:
- Go to System → Global Configuration → Default Editor.
- Set the Default Editor to None:
- Save the changes.
Now you are ready to add the store to your site.
To add Ecwid store to your Joomla site:
- From your Ecwid admin, go to Sales Channels.
- Scroll down to the "Sell on your website" section and click Other platforms and sitebuilders. Click Copy Code to Clipboard to get the integration code for your store:
- Create a new article on your website in Content → Articles → Add a new article. Then paste your Ecwid integration code into the article content. This article page will be your Ecwid store page:
- Save the changes.
To add your Ecwid store to a Joomla site:
- Download the Ecwid extension file.
If you're using Joomla 1.x or Joomla 2.x, you need to download a special version of the extension that supports them. - In your Joomla backend go to Extensions → Manage.
- Upload and install the extension using the Upload Package File section.
- Go to Components → Ecwid.
- Enter your Ecwid Store ID.
- Save the changes.
- Go to Menus → Main Menu to add the store page to your site menu.
- Click Add New Menu Item.
- Press the Select button next to the Menu Item Type option and Choose Ecwid → Product browser.
- Name your page and save the changes.
This is it — your store is added to the Joomla site. You can manage the store from your Ecwid admin: create products, run promotions, track sales, and more.
Adding a shopping bag, a category menu, and a search box to the Joomla site
Apart from the store, you can enrich your site with additional functionality, like a store search, a category menu, or a shopping bag.
To add a shopping bag, a category menu, or a search box to the site, follow the steps below:
- From your Ecwid admin, go to Website.
- Scroll down to the "Add your store to one more website" section and click Pick Platform → Other platforms and sitebuilders.
- Scroll down to the Store extensions and choose what you would like to add a Category Navigation Menu, a Shopping Bag or a Product Search Box and click Add under the corresponding section:
- The integration code will be automatically copied to clipboard.
- In your Joomla administrator panel, go to Modules and add a new module.
- Choose Custom from the Select a Module Type list.
- On the opened page, paste the code you have copied.
- Specify the position of your module on the page, and save the changes. In the Menu Assignment tab, you can choose on what pages this module will appear.
Save the changes and it’s done. Check out how your updated website looks.
When you install the Ecwid extension in your Joomla administrator panel, the following related modules are added automatically to the list of available extensions. They represent the corresponding Ecwid widgets:
- Ecwid Categories Module: horizontal categories widget
- Ecwid Minicart Module: shopping bag widget
- Ecwid Search Module: search widget
Each of these modules is a pattern for creating your own modules which can be used for displaying Ecwid widgets on your site.
To add categories, a shopping bag, or a search box to your site:
- Go to Extensions → Modules in your Joomla administrator interface and click the New button.
- You will see the list of module types you can use.
- Choose the type you want (Ecwid Minicart Module, Ecwid Categories Module, Ecwid Search Module).
- After you select a type, the module settings page appears.
- Select pages and a position for the widgets in your site template. If you're configuring the Ecwid categories module, it will also let you choose the desired view (horizontal/vertical).
- Click Save.
That's it, the new module is published, which means you will see a category menu, a shopping bag, or a search box on your site.
In case the widget doesn't appear, check the following module settings:
- the status: it should be set as Published;
- the access: it should be set as Public;
- the position: you should select an area where the module will be displayed on your site;
- the menu assignment: if “No pages” is selected, the module will not be displayed.
Adding a single product to Joomla
If your site or blog is created on a hosted version of Joomla, you can turn your regular blog post or page into a selling channel by adding a Buy Button. Ecwid Buy Button looks like a product card with the checkout option and can be added to any website page. A Buy Button is also a great tool if you don't need to add the whole catalog to your site and only want to feature one product.
To add a Buy Button to your Joomla site:
- From your Ecwid admin, go to Sales channels.
- Scroll down to the Buy buttons card and click Get Started.
- Click Pick Product and use the search bar to pick a product you’d like to embed.
- Pick a layout and choose what product details to show.
- Click Generate Code, then click Copy Code.
- Open your Joomla admin, then go to System → Global Configuration.
- In the right column, find the Default Editor and set it to Editor - None.
- Save the changes.
- From your left-hand side menu, navigate to Content → Articles.
- Create a new article, or choose one where you want your Buy Button to appear.
- Paste the Buy Button code from your Ecwid admin into the article content.
- Save the changes.
That’s it! Now you have a product card embedded into your webpage. When a customer clicks the Buy Now or Add to Bag button, the product will be added to cart, and they can finalize their order without leaving your site: