Shop Page Template Examples

Your shop is built as part of your website and the product pages are constructed with modules just as the pages on your website. The only difference is that the shop modules retrieve content from the shop database. Look below to find a few examples on how you can create different pages in your shop. See some examples on shop modules below and find examples on different page templates in the submenus of this section.

Shop Homepage

Below is an example of a shop homepage where the introduction is placed in a Jumbotron module (replaced in the mobile view with a headline module). Below are three teasers to product category pages and at the bottom is a row of images that link into products (product list module without text). 

Click on Enlarge below the image to see the modules explained.

Shop Category Page

Shop category pages are great for bigger shops where there is a need to create an overview of different categories of products. This example shows a page with four different category links. Note that all the category pages are listed in the left-hand menu.

Click on Enlarge below the image to see the modules explained.

Product Page with a Side Menu

For all product pages with a left-hand menu we recommend you use page layout nr. 8 as seen in the example below. At the top of the page is a Jumbotron module with a category title followed by a product category module. In the mobile view the Jumbotron is hidden and a simple headline is visible. 

Click on Enlarge below the image to see the modules explained.

Full width product page

If you have a few similar products or products where visual needs to be in focus you can create amazing, visual product pages using Full-width modules including the Full-Width Product Catalog.  In the example below the page starts with a Jumbotron module which is not shown in the mobile verison. Under this we have placed the introduction text in the two content placeholder columns (page layout type nr. 3). Note that the text in the right column is not shown in the mobile view in order to make the product images sit higher up on the page in the mobile view. Under the introduction is the Full Width Product Catalog. In the desktop version three images are shown with the option to flip through images with the arrows. It might be better in the mobile view to use a different shop module (shown in mobile view example below) where only one image is featured at a time. 

Click on Enlarge below the image to see the modules explained.