Product page

By activating and customizing the elements, you can arrange different screen views. You can also change the color theme of page elements to make the screen more unique.

If you use only the Product page in the application, then all other functionality from this screen can be customized in the sectionDefault elements

Product card for the elementsNew products, Popular products andRelated products is additionally configured in the section Default elements -> Product card

If the item names are the same from another screen, then the customization options and functionality are the same.

The content of the product page is controlled by the element Selected product, you can create a product or change it inCMS -> Catalog -> Products

Elements

  • Selected product
  • New Products
  • Popular products
  • Product name
  • Product brand
  • Selecting the quantity of product
  • Product picture
  • Product price
  • Button on the product page
  • Product properties
  • Product category
  • Product abstract
  • Product Description

Selected product

This element controls the contents of the Product Page screen. After selecting the created product, the Product page screen is filled

Setting the item

  • Enter the name of the product - when you enter the name of the product, a list of created products will appear inCMS -> Catalog -> Products, select the desired product

New products

Change the display of new products. New products are generated according to the algorithm last added products in CMS -> Catalog -> Products

Setting the item

  • Active - display an item on the screen
  • Text - title for the element, leave it blank if you want to remove the title of the element
  • Product card layout - change the display of an item
    • Selecting the type of item card - the item card has 4 types of display * Horizontal card - image on the right , * Horizontal card - image on the left , * Vertical card * and * Large vertical card *
    • Image size - resize the image in the item card
    • Image scaling - change the image scaling, there are two options for scaling * Fit to center * and * Crop and center *
    • Scroll type - change the type of scrolling of the element to vertical or horizontal
    • Card background - change the background of the item card to a transparent or solid color, the color can be changed inTheme -> Color theme settings

Change the display of popular products. You can add or change the content of the element Popular products inCMS -> Catalog -> Products -> Asterisk.

Setting the item

  • Active - display an item on the screen
  • Text - title for the element, leave it blank if you want to remove the title of the element
  • Product card layout - change the display of an item
    • Selecting the type of item card - the item card has 4 types of display * Horizontal card - image on the right , * Horizontal card - image on the left , * Vertical card * and * Large vertical card *
    • Image size - resize the image in the item card
    • Image scaling - change the image scaling, there are two options for scaling * Fit to center * and * Crop and center *
    • Scroll type - change the type of scrolling of the element to vertical or horizontal
    • Card background - change the background of the item card to a transparent or solid color, the color can be changed inTheme -> Color theme settings

The product's name

Changing the display of the product name

Element settings

  • Active - display an item on the screen
  • Element size - change the size of the element
  • Positioning - changing the position of an element on the screen

Product brand

Change the display of a product brand

Element settings

  • Active - display an item on the screen
  • Element size - change the size of the element
  • Positioning - changing the position of an element on the screen

Selecting the quantity of product

Changing the display of the selection of the quantity of the product

Element settings

  • Active - display an item on the screen
  • Layout of quantity selection - change the display of the item
  • Element size - change the size of the element

Product Image

Change the display of the product image

Element settings

  • Active - display an item on the screen
  • Image size - resize the image
  • Element padding - change the padding of an element from the edges of the screen

Product price

Change the product price display

Element settings

  • Active - display an item on the screen
  • Element size - change the size of the element
  • Positioning - changing the position of an element on the screen

Button on product page

Change the display of buttons on the product page. For the button on the product page, you can choose two different actions: * Add to cart * or * Leave a request * using the Button action element

Element settings

  • Active - display an item on the screen
  • Text - change the text of the button
  • Image - change the image of the button
  • Button action - change the button action, you can choose one of two actions * Add to cart * or * Leave a request *
  • The first element in the card - changes sequentially images or text inside the element
  • Display image - change whether or not to display an image in the element

Product properties

Changing the display of product properties, the contents of the element can be added or edited in CMS -> Catalog -> Products -> Selected product -> Product properties

Element settings

  • Active - display an item on the screen
  • Property layout - change the display of an element

Product Category

Change the display of a product category

Element settings

  • Active - display an item on the screen
  • Element size - change the size of the element
  • Positioning - changing the position of an element on the screen

Product summary

Change the display of the product annotation

Element settings

  • Active - display an item on the screen
  • Element size - change the size of the element
  • Positioning - changing the position of an element on the screen

Product description

Change the display of the product description

Element settings

  • Active - display an item on the screen
  • Element size - change the size of the element
  • Positioning - changing the position of an element on the screen