Here are the technical details and options for putting your custom marketplace into your website.
At a minimum, only one statement is required to plug your marketplace into a web page.
("mymarket" is replaced with your marketplace short name which is generated when you create your marketplace)
That's it! Just place this line of HTML into your web page, and your marketplace will appear. The marketplace will use the layout you define in the YouStak marketplace manager. It will inherit styles from your current web site.
If you want to position your Marketplace in a seperate page location from the script line above, you just add this positioning <div>.
Just place this additional line of HTML into your web page where you want the marketplace to appear.
Instead of using the YouStak bundle statement, you can position the YouStak menu and body areas directly onto your page. This gives you more control on exactly where they are placed on your webpage.
Positions are added to the page in a <div> statement that contains the data-YouStakPosition element
For the menu ; <div data-YouStakPosition="M" ></div>
For the body ; <div data-YouStakPosition="F" ></div>
The YouStak statements are simply HTML tags that will be replaced at load time by the appropriate YouStak element. That means that you can use your usual web framework to section the web page ... e.g. bootstrap or foundation classes... and put the YouStak html statements where you want your views to appear.
Here is an example of a simple page layout using Bootstrap.
<div class="col-md-12" data-YouStakPosition="M"></div>
<div class="container" data-YouStakPosition="F"></div>
You can show a set of items from your marketplace on other pages in your website, such as a home or landing page.
Using your website layout, create a <div> the size you want for each item. Add an id of ysRepeatItem to this div. e.g. in Bootstrap is might look like
<div class="col-md-3" id=ysRepeatItem>
("col-md-4" is the bootstrap class that says this element is 1/4 width, replace this with the appropriate class for your website)
Now add the YouStak script statement, to activate the ysRepeatItem
(Replace "mymarket" with your marketplace short name and "R8" with your desired items code. "R8" will return 8 most recent items. "T8" will return 8 random items.)
That's it! YouStak will return your selected number of items and repeat your ysRepeatItem div, filling out your items grid.
Most settings for your marketplace can be set in the YouStak Configuration Utility. To allow you to customise your look for different sites, some settings can be adjusted as you embed. Here are some of the codes you can add to your script statement;
For example, <div data-YouStakBundle="youstak" data-textsize="160"></div> will enlarge the text size by 60%.
You can enhance the integration between your website and your marketplace with codes that embed YouStak into your other pages, telling YouStak how you want the marketplace to connect to your page.
To enable these advanced features each additional page needs the YouStak script statement:
(Replace "mymarket" with your marketplace short name and "marketplace" with the link for your marketplace page on your website.)
You can now use the advanced integration features like:
Here are some link examples:
This link will appear only when the visitor is logged out. It will take them to the marketplace and ask them to Register. This is a great link for a "Join" button or menu item.
This link will take them to the marketplace and ask them to Register using the membership plan code "P2". This is a great link for a "Join Now" button on your own plans page.
In Wordpress we suggest using our Widget. Download youstak.zip here.
In SquareSpace we suggest using a "Code block". Check their video here.
In Weebly we suggest using the "Embed Code" widget. Check their article here.
In Wix we suggest using the "HTML Code" widget. Check their article here.
Some builders will leave a border around your YouStak site. For best results, match your site background to your YouStak background color!