Theme Documentation

Product Archive/Shop Page

A Product Archive/Shop page is a WooCommerce page used to display the products added. It displays according to the settings given in Bethlehem > Shop.

Available Layouts

In Bethlehem theme, the shop page can be displayed in 3 available layouts which are :

  1. Left Sidebar - This is the default layout of Shop page in our theme. It has a content section occupying 75% of the screen and a widgetized sidebar section to its left occupying 25% of the screen.
  2. Right Sidebar - This layout is same as the Left Sidebar layout except that the sidebar section is in the right side of the screen.
  3. Full-width - This layout does not contain any sidebars. The entire screen has the content section.

You can select the layout of the shop from Bethlehem > Shop Tab > Layout Settings > Shop Page Layout.

Content Section

The Content Section of the Shop Page displays either Products or Categories or both depending on the choice given in Shop Page Display option under WooCommerce > Settings > Products.

Displaying Product Categories

Product Categories/ Subcategories are displayed according to the layout in grids. It will display the Product Category image and Product Category Title. We recommend displaying only Products in Product Archive/Shop Pages.

General Setting of Shop Page

Choosing Author Attribute

Author Attributes are the pieces of data that can add more technical information to your product and help to refine your catalog while browsing/searching.

You can select the attributes from Bethlehem > Shop Tab > General > Author Attribute.

Choosing Header Background

If you want a particular background for your header on shop page, then set Header Background option as Default BG or Custom. Custom means pick your own style with multiple options.

You can pick this option from Bethlehem > Shop Tab > General > Header Background.

Number of product items displayed per page

Once we have chosen the shop layout, we'll have the number of product items displayed per row. The number of product items per page is recommended to be a multiple of the number of product items displayed per row.

You can set the number of items displayed from Bethlehem > Shop Tab > General > Number of Products Per Page

Animating the Product Items

Product items can be animated when the appear on viewport. More than 25+ CSS3 animation effects are available which includes :

  1. BounceIn
  2. FadeIn
  3. FlipIn
  4. LightSpeedIn
  5. RotateIn
  6. RoleIn
  7. ZoomIn

You can set whether you want to animate the product item from Bethlehem > Shop Tab > Product Item Settings > Product Item Animation

Lazy Loading

Lazy loading is a technique used to defer the loading of an image until the point at which it is needed i.e. when the image appears in the viewport. This will contribute to faster page loading since the images are not loaded until required.

You can enable/disable Lazy loading of Product Item images from Bethlehem > Shop Tab > Product Item Settings > Echo Lazy Loading

Shop Sidebar

This widgetized area contains widgets that generally go into shop's sidebar. In the default preview we have used :

  1. Woocommerce Product Search Widget : Search products.
  2. Woocommerce Cart Widget : Configured to display cart.
  3. Woocommerce Product Categories Widget : To display products by category
  4. Woocommerce Price Filter Widget: To display price filter.
  5. WooCommerce Featured Products Widget : Configured to display Featured Products.