Custom HTML Block,

General Options

The CMS Blocks module allows you add any HTML content to you site very easily. You can add single blocks spanning the entire width of your site, or multiple blocks grouped together in a grid.


The CMS Blocks module can be added to any layout in all positions.


In addition to the standard module positions you can add custom blocks at the product page via the Product Tabs module, on the sides of your store via the Side Blocks, in the header and footer via HTML columns. All these features are custom HTML blocks like the CMS Blocks module.

To create a CMS Blocks module access it and click on the Create New button.

This is the page where you create the module. Additional styling for the CMS Blocks is done in Settings > Modules > CMS Blocks.


  • 1 Module Name – This is the module name that will appear on the Add to Layout page.
  • 2 Module Title – Adds title in the store front in the title bar atop your CMS blocks module. Leave empty if you don’t want a title.
  • 3 Items per Row - Indicate how many blocks you want visible per row for each resolution. Resize your browser down to see how the module adapts to each breakpoint. Adjust all sliders to achive your desired layout for each resolution.
  • 4 Disable on Mobile – Optionally disable the module on mobile devices.

Top / Bottom Settings
  • 1 Background – Background Settings for the Top or Bottom container holding the module.
  • 2 Fullwidth - Can make the module fullwidth to extend to 100% of the browser width, past the limits of the site container.
  • 3 Margin – Optionally add top and bottom margins to the module.

These options only apply if you add the module to the Top or Bottom positions.
Block
  • 1 Add Icon – Optional icon added on the left or top of the block content.
  • 2 Icon Position – Icons can pe positioned on the left or top. The Top position is centered horizontally. See example Left and Top.
  • 3 Icon – The icon.
  • 4 Icon Container Background – This is the element containing the icon. The icon itself is colored within the Icon Editor.
  • 5 Icon Container Border – Apply border settings to the icon container.
  • 6 Icon Container Dimensions -
  • 7 Status – Can turn the entire block on/off.
  • 8 Sort Order – Can reposition blocks before or after each other.
  • 9 Block Content Align – This will align all the content within a block. If you’re using an icon in the Top position here you can center the content.
  • 10 Content – This is the HTML editor where you can add your custom content.
  • 11 Source – To add embedded content such as videos (YouTube, Vimeo, etc) click on the Source button and paste your iframe code in there. To make your videos responsive wrap your code in a div with the class responsive-video like this.

    Responsive video code example:

<div class="responsive-video">

your video code

<div>