Coming Soon! Subscribe here for updates and more info to #BuildWithOmni
  • Important Update:      Shop legacy sales are closed but will support ytp 4.2+ and Joomla 5

Adding products anywhere on your website with YOOtheme page builder

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.

What are custom dynamic content sources in YOOtheme?

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.

Single item vs multiple Item YOOtheme elements

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

Calling a single products details to anywhere on your website

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.
  • 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.

Calling a multiple products details to anywhere on your website with the "grid" element

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.

Omni is powered by CommerceLab Corporation
© Omni all rights reserved. A CommerceLab Corporation Product.