Articles in this section

See more

Customizing product category page

  • Updated
Follow
You can easily manage the way your product category pages look like by using one of several pre-designed presets in Configuration > Design section. Here's what you can change:
 

Product List images

You have several options on how to show products on the category pages. Large images help represent products in detail. Small images let you display more products in the Product List.
  • Large images are best for products where every detail is a part of the product's value.
  • Medium: A well-balanced option that works with the majority of products.
  • Small: Compact images reveal less detail, but allow you to fit in more products for your customers to see on the screen.

Screen_Shot_2019-06-10_at_17.18.56.png

You can also choose the image aspect ratio for your Product List. 
  • Landscape orientation is best for products with horizontal images.
  • Portrait orientation is more suitable for vertical images.
  • Square is for images of equal proportions, which is ideal for small merchandise.
     
    You can darken image backgrounds to help them stand out better in the Product List. To do this, choose Enable in the drop-down menu.

Screen_Shot_2019-06-10_at_17.16.27.png

Product details positioning

You can choose which product details to display on the Product List and how they are positioned in the Product Card of your Online Store. You have four options:

  • Center content: both product name and price are centered.
  • Align content to the left: product name and price are left-aligned.
  • Align content to the right:  name and price are right-aligned.
  • Justify content: product name is left-aligned and the price is right-aligned.

Tip: you can achieve a lot more combinations of image sizes and aspect ratios, for example, choosing Small and Square image settings.

Category name placement

You can customize where you want to locate the category name or to hide it completely.

1. Display category name on the image. This works best if you have professional-quality category images that follow the same style.

Screen_Shot_2019-06-10_at_17.21.22.png

2. Display category name below the image. This works best if all of your category images are styled differently or if you use graphical to represent categories.

3. Display category name on mouse hover. Use this option if your images clearly describe your categories and don't need a text caption.

Jun-10-2019_17-28-09.gif

4. Hide category names. Choose this option if category names are already embedded in category images.

Customizing product details

You can choose which product card details to show on the page. Here's what you can customize:
- Product Card frame: choose Enable to show a shadowed border around Product Cards.
Screen_Shot_2019-06-10_at_15.47.59.png
You can opt to show or hide the product name from the card:
- Choose Show to enable a product name under the photo
Screen_Shot_2019-06-10_at_15.53.17.png
- Choose Do Not Show to hide the product name.
- Choose Show on mouse over to show the product name and price on hover.
Screen_Shot_2019-06-10_at_15.57.17.png
Similarly, you can choose options to Show, Do not show, or Show on mouse over for the product price, SKU, and Buy It Now button. For example, you can enable all of these options to create fully shoppable product cards in the category's Product List:
Screen_Shot_2019-06-10_at_16.00.22.png

Showing an alternate product image

You can show an additional product image to your customers when they hover over a Product Card. When you choose Show, customers will see the first image from your product’s Gallery.
 
Jun-10-2019_16-08-16.gif
 
Tip: To provide an unobstructed view of the image, disable displaying of the second image on mouse hover.
 

Related articles

Comments

0 comments

Article is closed for comments.