# Custom content A Custom Content section in a theme is used to provide flexibility in design and layout, allowing you to add unique content such as text, images, videos, or custom HTML code to the pages. This section enables customization beyond the standard templates provided by [Minimog theme](/minimog-theme/minimog-documentation), empowering you to create visually appealing and engaging web pages tailored to your specific needs and branding requirements. ## How to add Custom Content Steps 1. In the theme editor (**Customize**) > click **Add section** 2. Select **Custom content** 3. **Save** ## Section settings ### Section header and General Use the provided fields to add a suitable heading/ subheading/ description. * Leave them blank if you do not want to display them. You can also adjust the text alignment here as Left/Center. ![image](https://docs-assets.foxecom.app/minimog-theme/image_RRcdH15a.png) Select the container type, the background color scheme, and the content color scheme for this section. ![image](https://docs-assets.foxecom.app/minimog-theme/image_HberZqmQ.png) ### Background settings You can add a separate background image for the desktop/ laptop/ tablet view, and a separate one for the mobile view. Here, you can also **Enable parallax effect** with different **Parallax direction**s: * Vertical * Horizontal * Zoom ![image](https://docs-assets.foxecom.app/minimog-theme/image_r6yfBfgH.png) ### Gap You can adjust the column gap between each block on desktop and mobile views. ![image](https://docs-assets.foxecom.app/minimog-theme/image_npUdQjuE.png) ### Mobile settings You can enable/ disable horizontal scroll for mobile users, and the gap between each column in mobile view. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-18%20at%2020.42.57_qrMOV8SN.png) ## Block settings Several blocks can be added based on the requirements. Some blocks are similar as they have appeared in theme sections such as countdown timer, product form (featured product), image cards, etc. Each of them will have its settings. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-18%20at%2020.37.22_LWPElQ9j.png) ### Image and Text blocks ![image](https://docs-assets.foxecom.app/minimog-theme/image_oEQj0ZZA.png) Use the provided text fields to add a suitable heading/subheading/description. * Leave the fields blank if you do not want to display them. Control container width, text color/size, and alignment. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-17%20at%2023.06.48_AZTCkZXP.png) In this block, you can: * Add images * Change the container width * Change the vertical alignment ![](https://docs-assets.foxecom.app/minimog-theme/image%20(1)_q5Dwgd9M.png) ### Lookbook items and Product bundles blocks ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-17%20at%2023.01.51_Rtyct2sK.png) Use the provided text fields to add a suitable heading/subheading. * Leave the fields blank if you do not want to display them. Control container width and add the products that you want to include in the bundles. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.16.48_0QxLUueu.png) To tag products on the item image, select them here. They can be easily adjusted using the offset percentage. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.20.49_N0MwC5vO.png) ### Product and Product form blocks ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.25.51_xC6kBCsp.png) Add a product that merchants want to display for the block. Adjust the container width and alignment. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.27.18_VGIsUGQq.png) Steps: 1. Add a product that merchants want to display for the block. 2. Adjust the container width and alignment. 3. Enable/ disable elements such as product price, vendor, cart button, etc. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.27.27_E0Dd3pke.png) ### Article and Newsletter form blocks ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.33.58_AG8zZBML.png) Steps: 1. Add an article that you want to display for the block. 2. Adjust container width, alignment, and image size. 3. Enable/ disable showing published date and author. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.36.24_ytiNlSBT.png) Use the provided text fields to add a suitable heading/ description as well as the email placeholder and button label. * Leave them blank if you do not want to display them. Control form style and container width. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.36.13_2XjUwnjb.png) ### Video and Social profiles blocks ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.53.09_r8dCwVWz.png) Add a YouTube video link and adjust its ratio. * If you want to use the original video thumbnail, leave the video image cover blank. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-20%20at%2020.20.18_7b7kjOJy.png) Use the provided text field to add a suitable heading and change its color and size. * If you don't want to display it, leave the field blank. Modify the video button style, size, and video width. * Additionally, the video can be played in a loop and autoplay when customers visit the site. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-20%20at%2020.20.28_hChI89WO.png) Use the provided text fields to add a suitable heading/description. Leave any of the fields blank if you do not want to display them. Control the container width. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2021.00.19_YjgOAuDA.png) ### Image card and Countdown timer blocks ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2020.58.07_9PZKcBpt.png) Use the provided text fields to add a suitable heading/ subheading/ description. * Leave the fields blank if you do not want to display them. Adjust the container width, content position, etc. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2021.08.14_dQ5tQfNX.png) ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2021.08.46_y1nprFGa.png) Add a call-to-action button to direct customers to the product detail page. Add a **Label** then choose a **Button style** and adjust the **Button size.** ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-14%20at%2015.14.44_FFdF6fC9.png) Adjust the container width, alignment, and end time of the timer. ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-18%20at%2021.10.16_VLVG5aI7.png) Add a call-to-action button to direct customers to the product detail page. Add a **Label** then choose a **Button style** and adjust the **Button size.** ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-14%20at%2015.14.44_FFdF6fC9.png) ### Custom HTML block You can check the example below on how to display the HTML correctly. ![](https://docs-assets.foxecom.app/minimog-theme/image%20(2)_HOdn0toB.png) ### Icon box The **Icon box** block allows you to display an image or icon with a heading, description, and optional button. This block is commonly used for: * Store services * Feature highlights * Brand values * Promotional content * Support information ![image](https://docs-assets.foxecom.app/minimog-theme/image_d9UoDc6Q.png) #### General settings ![image](https://docs-assets.foxecom.app/minimog-theme/image_vDI2qd4X.png) Choose the **Container width** for the Icon box block. Choose the **Vertical alignment** for the content: * Top * Middle * Bottom Select the **Color scheme** for the block. Set up your Color schemes anytime in the Theme settings > [Colors](https://docs.foxecom.com/minimog-theme/theme-settings/colors-and-color-schemes). Choose the **Layout** for the Icon box: * Vertical * Horizontal ![image](https://docs-assets.foxecom.app/minimog-theme/image_FUVTCq19.png) ![image](https://docs-assets.foxecom.app/minimog-theme/image_My05UpJY.png) #### Image settings Upload an **Image** for the Icon box block. ![image](https://docs-assets.foxecom.app/minimog-theme/image_n5PdRSar.png) You can also use **Image from URL** to display an external image. ![image](https://docs-assets.foxecom.app/minimog-theme/image_cvjDpANo.png) Supported image formats: .svg, .png or .jpg *Example: [https://example.com/icon.svg](https://example.com/icon.svg)* Adjust the **Image width** in pixels. Leave the field blank to use the original image width. ![image](https://docs-assets.foxecom.app/minimog-theme/image_HXFuoxRw.png) Add an **Image link** to make the image clickable. ![image](https://docs-assets.foxecom.app/minimog-theme/image_MzQS9Dvq.png) Choose the **Hover effect** for the image: * None * Zoom in * Scaling up * Scaling down ![image](https://docs-assets.foxecom.app/minimog-theme/image_tTnBKAZ4.png) #### Content settings Choose the **Content alignment** for the block: * Left * Center * Right ![image](https://docs-assets.foxecom.app/minimog-theme/image_EW1jY0fc.png) Enter the **Heading** text for the Icon box. Choose the **Heading size** as: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl ![image](https://docs-assets.foxecom.app/minimog-theme/image_w5O3mibi.png) Add a **Description** using the rich text editor. Select the **Text size** for the description: * Small * Base size * Large ![image](https://docs-assets.foxecom.app/minimog-theme/image_wUkNJq5e.png) #### Button settings Display a call-to-action button to redirect customers to your desired pages. Add a **Label** and **Link** for one or both, then choose a **Button style:** * Primary button * Secondary button * Underline button * White button Leave the **Button label** field blank to hide the button. and adjust the **Button size:** * Button small * Button medium * Button large ![image](https://docs-assets.foxecom.app/minimog-theme/image_5zrWU6uD.png)