Product other blocks

This guideline helps you configure other blocks on product page such as Product socials, Text, Custom HTML and Custom Liquid.

1. Product socials

Social align: Configure the alignment for the Product Social icons here. You can choose to align the Product Social Left, Right, or Center.

Socials mode: This option allows you to choose the mode for the Social icons. You can choose to Follow or Share. You can control the social network in Theme Settings -> Social Media.

Social Style: Choose a style for the Social icons here, We have a total of 4 styles for you to choose from.

Social size: Choose a size for the Social icon here. We have a total of 4 sizes for you to choose from: Extra Small, Small, Medium, and Large.
Border radius: With a Social style that has a border around the Social icons, you can configure the border radius for the Social icon here.
Use color settings checkbox: Tick 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 the Social icon for every single product.
Secondary color: Configure the border color (with Social style that has a border) for the Social icons here.

Space horizontal/ vertical items for each device: Configure the space horizontal/ vertical of the Social icons on Mobile devices here.
Margin bottom (unit: px) on Desktop/ Mobile: Configure the margin-bottom of the Social icons with other elements on both Desktop and Mobile here.

2. Text

This block helps you to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

Click on the Text block, the settings sidebar will open and you guys can configure the content for it:

Text box: This option will allow you to add static content for all products. You also can use Metafield to configure to show different text content for some separate products. Click connect dynamic source button to choose the metafield option to show in this block.

3. Custom HTML

This section allows you to add pages by normal way or Metafields.

First you need to edit your Page HTML content from Shopify Dashboard >> Online Store >> Pages

By normal way:

By Metafield (connect dynamic source):

You need to go to Settings >> Custom data and configure some options below first:

Name: You can add the name that you wanna show for the Metafield Tab Custom HTML – Page here. Example: I added the field Name is: Metafield Custom Page.
Namespace and key: You can add any keyword here. Example: You can add the key: theme.custom_page or any words you want.
Description: You can add the Description for the Metafield Tab Custom HTML – Page here. In addition, this is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is Reference > Page. This is a required option, if you do not choose the content type is Reference > Page here, the Metafield Tab Custom HTML cannot work correctly.