Tip:
Highlight text to annotate it
X
Hello, and welcome to a new CS-Cart video tutorial.
In this video, I will explain to you the Widget Mode, introduced in CS-Cart 4.
With the introduction of the Widget Mode, CS-Cart can work both as a standalone shop
and as a widget.
The widget mode allows you to embed a CS-Cart store into your website or blog.
The widget works as an embedded Java Script: you just pick up the code, insert it, and you're ready
to go.
You can embed a store into any popular CMS, like WordPress, Joomla, Bitrix, and many others.
So, to demonstrate how the Widget Mode works, I've made 2 demo websites on different platforms,
into which I'm going to embed a CS-Cart store now.
First of all, log in to the CS-Cart admin panel and go to Design→Layouts.
On the left, you will see your Widget Code straight away.
You can use it as is. However, it's better to create a separate layout for a certain
website.
This way, you can tweak each layout to fit with certain websites and your own needs.
Let's create a layout for my WordPress-powered website.
Click the 'Add Layout' button, name it 'WordPress Store, copy data from the
main layout, select 'Fluid' to fit the store into the page properly without scrollbars,
press 'Create', and make some changes to it.
For instance, let's remove the top panel and a footer, and leave the main content only.
Here we go.
Now, I'm going to log in to my WordPress admin panel, go to 'Pages', and create a new page
for a CS-Cart store.
Now, I need to copy the Widget Code from the Layouts page
And just paste it into the page source code.
That's it. Let's save the changes and test the page by adding /pagename to the address
Here it is! I'm ready to sell right off the bat.
Now, let's do the same thing for my other website.
I've chosen Wix to build it.
Here you can see Wix HTML Editor and the website itself.
I'm going to create a separate blank page for a widget.
Now, I click Add → Apps → HTML.
I have created a separate layout for a website, in which I just moved some blocks around and
deleted the top panel.
So, I need to copy the widget code and insert it into the HTML window.
Ta da, here's the store! Let's preview it as well.
By the way, we are currently developing a Facebook app which will enable you to sell
directly on Facebook, by simply entering your store's URL.
Well, that's it for today.
We'll be happy to answer any questions you might have in the comments section below,
on Facebook, and Twitter.
thanks for watching.