Using shopp('storefront.product') to load a product wherever you want is a really great tool in the Shopp toolbox, but it always uses the product.php content template to “show” the product. Here’s how to change that and use a custom layout.

How to Load a Product with a Custom Layout

How to Load a Product with a Custom Layout

Loading a product and displaying it wherever you want in your theme templates (or Shopp content templates) is as easy as calling shopp('storefront.product') and telling it which product you want to load. Shopp will grab the product from the database and use the product.php content template to display the product information.

So what if you don’t want to use the product.php content template? There are a couple ways to do it depending on what you need.

If all you need is a special look for a specific product, use the dynamic product template file naming. The recommended approach for this is to copy your current product.php content template file and rename the copy to use the format product-{slug}.php. Replace the {slug} part of the name with the URL slug for the product. The slug is the unique URL-friendly version of the product name.

The other approach is used when you are loading a product in a specific part of your website and need to show different information. An example is loading the product into a sidebar, or header of your website. You don’t want the full gamut of product information, maybe just an image, the product name and prices.

To display a product wiht a custom layout, you just add the load option to the shopp('storefront.product') Theme API tag. This loads the product information from the database and sets the Theme API “context” to that product. That’s really a fast and easy way of saying it sets the loaded product as the current product that all of the shopp('product') tags will use.

<!-- Load the product, but don't display the default product template -->
<!--  Change the id to change the product you want loaded -->
<?php shopp('storefront.product','id=1&load=true'); ?>

<!-- Preload some product details (prices and images are loaded by default) -->
<?php if(shopp('product.found','load=prices,images')): ?>

    <!-- Show the product name -->

<h3><?php shopp(''); ?></h3>

    <!-- Show the price(s) for the product -->
    <?php shopp('product.price'); ?>

    <!-- Dispaly the product image gallery -->
    <?php shopp(''); ?>

    <!-- Use any other Product Tags you need -->

<form action="<?php shopp('cart.url'); ?>" method="post" class="shopp product">
    <p><?php shopp('product.quantity','class=selectall&input=menu'); ?>
    <?php shopp('product.addtocart'); ?></p>

<?php endif; ?>

This technique can be used in a number of places and is not limited to your Shopp content template files. It can be applied to a specific WordPress theme template like header.php or sidebar.php. Your imagination is the only limit.


Jonathan was born at an early age and began designing and developing shortly after. He is the founder of Ingenesis Limited and Project Lead on the Shopp e-commerce plugin for WordPress. He lives and works in the heart of the midwest US with his family. He fancies himself a designer of code, and is only slightly addicted to coffee.

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.