Learn how to show a grid of product categories on your Shopp storefront page. This will be accomplished by editing the catalog.php content template file.

Display your Product Categories as a Grid on the Shopp Storefront Page

Screen Shot 2013-09-09 at 12.51.51 PM

Display your Product Categories as a Grid on the Shopp Storefront Page

The default Shopp storefront page (http://yourwebsite.com/shop/) shows your products in alphabetical order. In this tutorial, you’ll learn how to replace this with a grid of product categories.

Ensure Shopp Content Templates are Enabled

Begin by setting up Shopp templates. Login to your WordPress Admin and go to Shopp SetupPresentation. Then follow the directions. If you already have templates setup, then you’ll see a checkmark for templates and you can continue to the next section.

Learn more about Shopp templates

Notice: Templates are setup so that we can customize our Shopp without risk of our changes being lost during a future software update.

Locate our Catalog.php File

Now its time to modify the file that handles the content for the storefront page. This is the catalog.php file.

  1. Login to your site with an FTP client (Filezilla is a free option). Then browse to wp-content/themes/yourthemefolder/shopp/

  2. Open the catalog.php file and comment out or remove the existing API call.

  3. Then copy the code below and paste into your catalog.php file and save changes:

<?php if(shopp('catalog','has-categories')): ?>



<ul class="products">
        <li class="row">
            <ul>

            <?php while(shopp('catalog','categories')): ?>

                <li class="product">
                    <div class="frame">
                        <a href="<?php shopp('category','url'); ?>"><?php shopp('category','coverimage','setting=thumbnails'); ?></a>
                        <a href="<?php shopp('category','url'); ?>" class="category-link"><h3><?php shopp('category','name'); ?></h3></a>
                    </div>
                </li>
        
            <?php endwhile; ?>

            </ul>
        </li>
    </ul>



<?php endif; ?>

Now browse to your website’s storefront page. Again, that will be http://yourwebsite.com/shop/ or equivalent (if you have changed your page slugs). You should now see your product categories arranged in a grid on the page.

Notes

If you do not have any category images uploaded, then you’ll see a grid of your product categories as links. You can correct this by going to your WordPress Admin → Shopp CatalogCategories. Then select a category, upload an image, and save changes.

Repeat this process for all of your categories and then go to your Shopp storefront page to see your updated page.

Avatar of Lorenzo Orlando Caum

By

Lorenzo Orlando Caum is the founder of Enzo12 LLC, a consultancy in Tampa, FL. Lorenzo provides consulting services such as a Shopp upgrade service through Shopp 101. He also recommends using managed WordPress hosting with Shopp because a faster site means more sales. You can learn more about Lorenzo, you can follow @lorenzocaum on Twitter or check out his blog.

You must be logged in to post a comment.

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

Skip to toolbar