Editing and creating buttons and icons

Under "Products> Product types> ProductClass> <Attribute> tab", click on the "VM_Product-Buttons_Icons" attribute:

 

Editing and creating buttons and icons

 

Click on the "Value selection" tab

 

Editing and creating buttons and icons

 

The button and its properties are defined under Value.

The initial text corresponds to the text on the button. This is followed by the attributes

Example of a button with an icon from Googe Material:
Top Produkt Attr(Type=Button Background=#eb8111 Color=#fff BorderWidth=2 IconType=GoogleMat IconBorder=0 IconSymbol=phone ShowOnProductList=0 ShowOnProductDetails=1 ProductInquiry=1)

 

The following attributes can be used:

Attribute Function Values / Example
Type

Determines what is displayed. Icon or button

Determines what is displayed. Icon or button

Type=Icon
Icon on the product picture

Type=Button
Button under the product picture

Type= BasketButton
Changes the shopping cart button
BackgroundColor Background color of the button or icon. It also defines the border color BackgroundColor=#fff
Hexadecimal oder RGB
#fff oder rgb(255, 255, 255)
BackgroundImage Defines a background image. This is stored in the same folder as the icon image. This is defined during project implementation.  
Color Color of the button or icon Color=#000
Hexadecimal oder RGB
#000 oder rgb(0, 0, 0)
BorderWidth

Allows an additional border to create the button (2nd button)

BorderWidth

 BorderWidth=1
Number corresponds to the thickness in pixels 1px, 2px, etc.
IconType

Allows you to use a character on the keyboard (1st button) or a Google icon (2nd button)

IconType

IconType=Character
IconType=Image
An image is used which is stored in a folder. See parameter "IconImgSrc"

IconType=GoogleMat

More information on https://fonts.google.com/icons
IconImgSrc

The file name of the icon image on the file manager.
The folder on the file management in the shop is determined when the icon function is activated.

 IconImgSrc=File name of the icon
IconBorder

Allows to define the thickness of the border of the icon (0 = no border)

IconBorder

Icon without border:
IconBorder=0

Icon with border:
IconBorder=1
IconSymbol Allows an icon to be inserted

Icon example:
IconSymbol=%

Google Icon example:
IconSymbol=phone
IconPosition If an icon is defined as a "Type" that is placed above the product image and not as a "Button" below the image, the position of the icon can be defined. Top left, top right, bottom left and bottom right. IconPosition=TopLeft
IconPosition=TopRight
IconPosition=BottomLeft
IconPosition= BottomRight
ShowOnProductList Shows or hides a button or icon on the product list

Show
ShowOnProductList=0

Not show
ShowOnProductList=1
ShowOnProductDetails Shows or hides a button or icon on the detail page of the product

Show
ShowOnProductDetails=0

Not show
ShowOnProductDetails=1
ProductInquiry Allows a button to be linked to the “Ask a question about the product” page.

No link to the "Ask a question about the product" page ProductInquiry = 0

Link to the "Ask a question about the product" page ProductInquiry = 1
BasketButtonAction Defines an action for the button type "BasketButton"

BasketButtonAction=Add
Regular Button Funktion

BasketButtonAction=Inquiry
Creates a link to the “Question about the product” page
TextBox

Shows a text box via the attribute "VM_Product_TextBoxButton_NumN" on the product detail page above the buttons

N = number of the parameter

TextBox=0
Does not show a text box

TextBox=1
Shows the text box "VM_Product_TextBoxButton_Num1"