Product Settings is where you can modify the layouts of products, as well as configure the settings for product ribbons.

You can locate Product Settings by logging into Juniper Web Admin, on the left hand side you will notice "Settings".

Product Layout

There are 2 product areas that are editable using HTML, CSS and mustaches (logic less templates).

⚠️ This area is sensitive, ensure your HTML tags and mustaches are closed and accurate ⚠️

Requirements:
- Entry level knowledge of HTML + CSS ...Learn More
- Entry level knowledge of mustaches (logic less templates) ... Learn More

Product Grid

The product grid is what appears on the screen when you are looking at a grid of products or what we call Category view.You can configure what is displayed for authenticated and non-authenticated users.

Once inside of Product Settings > Product Layouts > Product Grid, use the dropdown arrow to showcase code.

Notice, how elements are organized via HTML + CSS. Pulling in product fields is easy using mustaches {{YourProductFieldExample }}. The corresponding product fields are generated on the frontend.

Sample Code For Product Grid Settings:

<h6>{{ItemName}}</h6> 
<p>Item ID: {{ItemId}}</p>
<p class="item-qty">Qty Available: {{OnHandQuantity}}</p>

Product Details

The product details page is what appears on the screen once you have clicked on a product.You can configure what is displayed for authenticated and non-authenticated users.

Once inside of Product Settings > Product Layouts > Product Details, use the dropdown arrow to showcase code.

Notice, how elements are organized via HTML + CSS. Pulling in product fields is easy using mustaches {{YourProductFieldExample }}. The corresponding product fields are generated on the frontend.

Sample Code For Product Grid Settings:

<p>{{ItemID}}</p>
<p>{{{Description}}}</p>
{{#Dimensions}}
<p><strong>Dimensions: </strong>{{Dimensions}}</p>
{{/Dimensions}}

{{#Notes}}
<p><strong>Notes:</strong><br/>{{{Notes}}}</p>
{{/Notes}}

<p><strong>Minimum Order Quantity: </strong> {{OrderMinimumQuantity}} </p>
 <p><strong>Qty Available: </strong>{{OnHandQuantity}}</p>

Product Ribbons

Ribbons are the best way to quickly inform your visitors of new, sale and special products.

Click here to see our in-depth tutorial on how to configure product ribbons