Kalles 4.0
Search…
Product Social
In Theme Customize > Go to Product page > Choose Product Main option > Click Add block button to add the Product Social block to the Product information next to the product image.
Add the Product Social block to the Product main option, then drag it to any position that you wanna show it. Example: Show the Product Social below the Delivery Time:
Click on the Product Social block, the settings sidebar will open and you guys can configure some options below:
  • Social align: Configure the alignment for the Product Social icons here. You can choose to align the Product Social Left, Right or Center.
Product Social: Align Center
Product Social: Align Left
  • Socials mode: This option allows you to choose the mode for the Social icons. You can choose Follow or Share. So the social icon will show as your settings. Example: Instagram only allows to Follow, does not support share, so if you choose Social mode: Share, the Instagram social icon will not show in the Social icons list.
  • Social Style: Choose a style for the Social icons here, We have total of 4 styles for you to choose, watch the video below to view some styles of Product Social icons.
  • Social size: Choose a size for the Social icon here. We have a total of 4 sizes for you to choose: Extra Small, Small, Medium and Large.
Social size: Extra Small
  • Border radius: With Social style that has border around the Social icons, you can configure the border radius for the Social icon here.
  • Use color settings checkbox: Tick on this checkbox to enable the use color settings option for the Social icon. So you can configure the background color and border color for the Social icons.
  • Primary color: Configure the background color for the Social icons here. This option also supports configuring Metafield, so you can change the background color of Social icon for every single product.
  • Secondary color: Configure the border color (with Social style that has border) for the Social icons here.
  • Space horizontal/ vertical items: You can configure the space horizontal/ vertical of the Social icons here.
  • Space horizontal/ vertical items (Mobile): Configure the space horizontal/ vertical of the Social icons on Mobile devices here.
  • Margin bottom (unit:px) on Desktop/ Mobile: Configure margin bottom of the Social icons with other elements on both Desktop and Mobile here.
Copy link