# TikTok Video

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F9Lnjb8TnTWlRRnlEhE2M%2Fimage.png?alt=media&#x26;token=3447e34f-db26-4055-865f-2d0653c55b85" alt=""><figcaption></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**TikTok video**".

## Section settings

### General

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td><p>Choose the maximum width of the section on the Desktop. The options are:</p><p></p><p><mark style="color:orange;"><strong>Default (width of the body content set in the Theme settings)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1170px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1770px)</strong></mark></p><p><mark style="color:orange;"><strong>Full width (the width of the browser).</strong></mark><br></p><p><em><mark style="color:orange;">Note: To fit more videos in a row, a wider layout is more appropriate</mark></em></p></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the custom left &#x26; right spacing for Full width layout.</td></tr><tr><td>Background color</td><td>Apply the color to the background of the section.</td></tr><tr><td>Background gradient</td><td>Apply the gradient to the background of the section. <br><br><em><mark style="color:orange;">Note: Background gradient will replace Background color if any.</mark></em></td></tr><tr><td>Alignment</td><td>Select the alignment of the text to be either to the Left, Center, or Right of the section.</td></tr><tr><td>Columns per row</td><td>The number of TikTok video columns per row.</td></tr><tr><td>Video top margin</td><td>Determine the spacing of the video from the top.</td></tr><tr><td>Mobile layout</td><td>Select the layout for the section render on mobile device. The options are: <br><br><mark style="color:orange;"><strong>List</strong></mark><br><mark style="color:orange;"><strong>Scroll</strong></mark><br><mark style="color:orange;"><strong>Slider</strong></mark></td></tr></tbody></table>

### Section header

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Title</td><td>Enter the text for the heading of the section.</td></tr><tr><td>Title font size</td><td>Determine the text font size of the heading ranging from 10 to 80px.</td></tr><tr><td>Title font size on mobile</td><td>Determine the text font size of the heading on mobile device ranging from 10 to 80px.</td></tr><tr><td>Title font weight</td><td>Select a font weight for the heading. Options are: Normal, Medium, Semi Bold, Bold, Bolder, Black.</td></tr><tr><td>Title color</td><td>Apply a color to the heading of the section.</td></tr><tr><td>Title top margin</td><td>Determine the spacing of the heading from the top.</td></tr><tr><td>Title font style</td><td>Select the style for the heading text. Options are: Normal, Italic and Oblique.</td></tr><tr><td>Show title underline</td><td>Toggle the border of the heading.</td></tr><tr><td>Title underline style</td><td><p>Select the style for the underline/border of the heading.</p><p><br><mark style="color:orange;"><strong>Thin underline</strong></mark><br><mark style="color:orange;"><strong>A half-height underline</strong></mark></p></td></tr><tr><td>Title underline color</td><td>Paint the color on the heading underline/border.</td></tr><tr><td>Description</td><td>Enter the text the section description.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description ranging from 10 to 80px.</td></tr><tr><td>Description font size on mobile</td><td>Determine the font size of the description on mobile device ranging from 10 to 80px.</td></tr><tr><td>Description font weight</td><td>Select the font weight for the section description. Options are: Normal, Medium, Semi Bold, Bold, Bolder, Black.</td></tr><tr><td>Description color</td><td>Paint color onto the section description.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from the top (heading), ranging from 0 to 100px.</td></tr><tr><td>Maximum content width</td><td>Determine the maximum width of the description text, ranging from 100 to 1000px.</td></tr><tr><td>Button type</td><td>Select the type of the section button. The styles are:<br><br><mark style="color:orange;"><strong>Button</strong></mark><br><mark style="color:orange;"><strong>Link</strong></mark></td></tr><tr><td>Button label</td><td>Enter the text for the button/link.</td></tr><tr><td>Button link</td><td>Determine the link for the button to redirect to.</td></tr><tr><td>Button label style</td><td>Select the transform style for the button text. The options are: None, Capitalize, Uppercase, Lowercase.</td></tr><tr><td>Button font weight</td><td>Select the font weight for the button text. The options are: Normal, Medium, Semi bold, Bold, bolder, Black.</td></tr><tr><td>Button font size</td><td>Determine the font size for the button text.</td></tr><tr><td>Button width</td><td>Determine the width of the button.</td></tr><tr><td>Button top margin</td><td>Determine the spacing of the button from the top.</td></tr><tr><td>Button label color, Button border color, Button background color, Button background gradient, Button label hover color, Button border hover color, Button background hover color, Button background hover gradient.</td><td>Paint the color to the button text, background, and border for both normal and hover/active states.</td></tr></tbody></table>

### Section footer

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Text</td><td>The text for the link. </td></tr><tr><td>Link</td><td>Enter the link to navigate to.</td></tr><tr><td>Text font size</td><td>Determine the font size for the link text.</td></tr><tr><td>Text font size on mobile</td><td>Determine the font size for the link text on Mobile device.</td></tr><tr><td>Text font weight</td><td>Select the font weight for the link text. The options are: Normal, Medium, Semi Bold, Bold, Bolder, Black.</td></tr><tr><td>Text font style</td><td>Select the style for the text of the link. The options are: Normal, Italic, Oblique.</td></tr><tr><td>Text color</td><td>Paint the color onto the link text.</td></tr><tr><td>Text hover color</td><td>Paint the color onto the link text when hovered/clicked.</td></tr><tr><td>Image</td><td>Upload an image for the link at the end of the section.</td></tr><tr><td>Image width</td><td>Determine the logo width.</td></tr><tr><td>Top margin</td><td>Determine the spacing of the link from the above content.</td></tr></tbody></table>

### Slider layout

*Only applicable when the 'mobile layout' setting is set to slider.*

<table><thead><tr><th width="337">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Arrows color</td><td>Paint the color for the arrow icon of the slider layout.</td></tr><tr><td>Arrow background color</td><td>Paint the color for the arrow background of the slider layout.</td></tr><tr><td>Arrows border color</td><td>Paint the color for the arrow border of the slider layout.</td></tr><tr><td>Navigation arrows size</td><td>Determine the size of the arrow button.</td></tr><tr><td>Slide counter color</td><td>Paint the color for the slider count text.</td></tr><tr><td>Slide counter font size</td><td>Determine the font size of the slider count text.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block settings

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Video ID</td><td>Enter the video Tiktok ID.<br><br><em><mark style="color:orange;">Note:</mark></em> <a href="https://help.agencyanalytics.com/en/articles/4771078-embed-tiktok-videos"><em><mark style="color:blue;">Instructions to get tiktok video ID?</mark></em></a></td></tr></tbody></table>