Show your product anywhere in your website
PreviousCreating Custom Fields for a product and displaying them in YOOtheme Page Builder on a product pageNextProduct image gallery add to builder
Last updated
Last updated
CommerceLab Shop uses dynamic content to display product details you can do this on a product page or anywhere on a website using dynamic content "custom sources".
In this tutorial you will need one or more products in your shop. To follow along you might want to have at least two categories with two products in them. I you need help adding products here is a link.
Custom dynamic content sources allows you in a page builder element to select a specific category or categories to show joomla articles or in this case shop activated product articles. You can also select dynamic modifers to show product articles that have specific tags or not, and even go as far as show prodcut articles if they contain a specific word in them.
There are teo types of element groups that YOOtheme page builder comes standard. "Basic" elements which show one item and "Multi item source" elements which can show multiple items from a shop category. We will demonstrate how to add a product, to a basic single item element & how to add multiple items to a multi-source item element any where on your site below.
Basic single item elements
Multiple item elements
In this tutorial we will show you how to make a panel, display your products information, intro image & link the product to your products page. Assuming you have a YOOtheme enabled website page created where you want to dispaly a specific product on that is NOT that products details page and know how to get to it let's continue.
If you don't know how to create an article and activate it with YOOtheme or get to it, here's a tutorial.
Go to the builder page where you'd like your product information to be displayed.
Add a new element to the page from the basic elements section in the elements area popup window called "Panel"
Open the panel content area and select the "advanced" text from the top menu on the left column
Select The Dynamic Content source "Custom Product" then head back to your the panel content section
A new selection area will appear right below dynaminc conent that will say "Select Manually
Click where is says "select article" and select the product article you'd like to link to this panels content area.
Head back to your panel elements content area
Above each content area in the panel you will see the word "dynamic" This is where you can now assign your products details that you select to show in the pane.
Add your products title in "title"
In Meta add your products price with curreny symbol in the "Meta" area
Add your products price with curreny symbol in the "Meta" area
We want to put the word "price" in front of the price
Where the dynamic content was added in the meta content area click the pencial icon
Add the word before the price to the "before" field. Add a space after the word as well.
Add your products intro image in the images dynamic content
Then scroll down and add your link
Lastly Name your link
If you've follwed these steps you will see your Panel on the page has been loaded with the content from your product!
There are many style settings for your panel from title size to image, panel color, meta styles and more and play around with these to get your style just right.
In thie section we're going to make a basic YOOtheme multiple item "Grid" element. This will allow you to show a group of products you choose in a category in a grid and link the products with product details.
Go to the builder page where you'd like your product information to be displayed.
Add a new element to the page from the "multiple item" elements section in the elements area popup window called "Grid"
Head back to your Grid Content area and select "add new item"
Click into your new item then go the the "Advanced" tab below the save button
This time when seleting the items dynamic content source in the dropdown we're going to choose "Custom Products" from the CommerceLab Shop Section.
You will see after you make the selection an area will appear below it for you to select which categories you'd like show products from. You can select as little or as many as you'd like.
Scroll down further and let's make sure if you're displaying more than 10 products you see them all set the item number to the total to 100 this will make sure you see all products from the categories you've selected.
in this section there are many other settings to set which products to plsplay, featured only, by tags or match or don't match
You can also change the order by selecting article order and change the direction of the aritlces here.
Head back to your Grid's Content section and you'll see the word "Dynamic Content" Above every content area for the grid item.Let's add your products details.
Set your dynamic content source "Title" in the title section to display your products titles
Set the dynamic source for Meta to "Base price" to show the base price of all your products
We want to put the word "price" in front of the price
Where the dynamic content was added in the meta content area click the pencial icon
Add the word before the price to the "before" field. Add a space after the word as well.
Add your short description to the dynamic content tab to show all short descriptions of your products to the grid.
Let's add your products intro images to your grid
Let's dynamically link all products in the grid to theire product details pages by selecing link
Let's rename all the links in your products grid to "product details"
Contratulations you've just made a product display grid that shows multiple products, that you can add anywhere on your website!
You can create as amny of these as your site desires
There are many style settings to choose from that weill allow you to style this grid of products and it can be placed anywhere on your website.
