Customize the appearence of product lists

The design of the product lists that are added to your shop can be customized to better match the style of your theme and your preferences.

To do this you need to go to the settings page by clicking on the  icon in the top-right corner of the menu and scroll to the Theme settings section.

Here you can find various design customizations that apply to all your product lists:

 

  • Background color: this controls the background color of the container in which the products are shown (can be either a HEX value or the English name of the color),
  • Heading CSS class: this applies already defined style that you have on your shop to the title of the product list (eg. a class name used on sub-headings),
  • Heading text alignment: determines how the heading of the product list will be aligned (left, right or centered),
  • Product title alignment: determines how the titles of the products will be aligned relative to the product box (left, right or centered),
  • Price alignment: determines how the price text will be aligned relative to the product box (left, right or centered),
  • Call to action button CSS class: this is similar to the Heading CSS class setting, but it refers to the style of your Call to action button,
  • Call to action button alignment: this determines the positioning of your Call to action button relative to the product list container (left, right or centered)

 

If you need help customizing the look of your product lists, one of our experts is always available to help you. Just contact us at hello@3-products.com.

 

If you found this helpful, sign up to our newsletter to be the first to know when we publish more articles like this.