Content block templates

The content on your StoreConnect site is managed via blocks and containers, and there are templates available for each content type.

This is how you control the width of images, site columns, banner widths, etc. When used inside a container, content blocks can be assigned a maximum width along with padding and margins.

Content blocks and the theme builder

You can change or extend what content blocks do using the theme builder. Styling blocks this way needs familiarity with Liquid. See theme templates.

Available content block templates

Container block

A Container block holds one or more child content blocks of any type, and controls how they are laid out on the page. See content block containers.

No added styling block

This block adds no styling of its own. Use it for your site’s head and body content, or to display content styled entirely by you. Displaying content this way needs some skill with CSS and HTML.

Field	Usage	Input
Content	The text content	Plain Text, Markdown, HTML

Text block

Text blocks can be used for much more than just displaying text. You can add HTML and CSS to the content to produce web-to-lead and web-to-case forms along with tables and a whole lot more using Markdown or HTML.

Field	Usage	Input
Title	H1 heading for block	Plain Text
Subtitle	Medium sized subtitle for block	Plain Text
Content	The main text content	Plain Text, Markdown, HTML

Single image block

This block displays a single image using an HTML <img> tag.

Field	Usage	Input
Image	The image for the block	Lookup to Media records with the file type of Image
Link Target	If provided, the image becomes a clickable link	URL
Link Label	If the image is a clickable link, sets the link’s tooltip	Plain Text

Image with text overlay block

The purpose of this block is to provide a large, full-width background image with some simple content and a call to action button. The background image is given a CSS filter to reduce its brightness so to allow the text and button to show better against it. The image is all aligned to the left and is cropped or stretched to the full width of the block. The default position of the text and button is the center of the block but can be moved to the left or right edge. The text and button remain justified to the left regardless of alignment.

Field	Usage	Input	Available options
Alignment	Defines how the text and button are aligned in the block	Picklist	Center, Center Text, Top, Bottom, Left, Right
Image	The background image for the block	Lookup to Media records with the file type of Image
Link Label	If provided, displays as a call to action button	Plain Text
Link Target	If provided, gives the button a target URL	URL
Title	H2 heading for block	Plain Text
Subtitle	Medium sized subtitle for block	Plain Text
Content	Main text content	Plain Text, Markdown, HTML

:::tip Use a suitable background image to allow for cropping. Images wider than the block will be centered and cropped, and smaller images will be stretched to fit the width of the page. The block will be narrower on smaller screens so your image will be cropped further. :::

Image beside text block

This block allows you to easily provide some text to the left or right of an image. The default is for the image to display on the left, but you can use the Left and Right Alignment values to move it to either side. Despite the Alignment setting, the image will always appear on top of the text when on a small screen.

Field	Usage	Input	Available Options
Alignment	Defines how the content is aligned in the block	Picklist	Left, Right (the field offers the full alignment list, but this block uses only these two)
Image	The image for the block	Lookup to Media records with the file type of Image
Link Label	If provided, displays as a call to action link	Plain Text
Link Target	If provided, gives the link a target URL	URL
Title	H2 heading for the block	Plain Text
Subtitle	Medium sized subtitle for block	Plain Text
Content	Main text content	Plain Text, Markdown, HTML

:::tip Keep your image width around 640px or less. If it is too wide, there is no room for the text content. :::

Slideshow block

A slideshow is a series of content blocks shown as a carousel. The links on each slide can direct customers to different pages and products in your store. Avoid small images: they are stretched to the full width of the block.

To create a slideshow:

1. Create a content block with Content Template set to Slideshow.
2. Create the content blocks you want as slides.
3. Add the slides to the slideshow block as Child Content Blocks.
4. Set Position on each slide to order them.
5. Place the slideshow block in a container on your page.

Media reference block

This block is used to present a link to a document or file with the option of text content displaying below it. The link text comes from the name of the media record you are referencing. When the link is clicked, the document or file will either show on your browser or download depending on your browser’s default behavior for that file type.

Field	Usage	Input
Document	The document to link to	Lookup to Media records with the file type of Document
File	The file to link to	Lookup to Media records with the file type of File
Content	Main text content	Plain Text, Markdown, HTML

For instructions on how to upload your files and Documents to StoreConnect, see Upload images, media, and other files.

Video block

This block plays a self-hosted video using an HTML <video> tag with playback controls. The video fills the width of the block.

Field	Usage	Input
Video	The video for the block	Lookup to Media records with the file type of Video

:::note The Content Template field has no Video option out of the box, so you need to add the picklist value before you can select this template. Use the API name video. See Adding your own custom content block templates. :::

Featured articles block

This block displays articles in two columns on small screens and four columns on larger screens and wraps to the next row as needed. The article’s hero image is used as the image, and the article’s title as the label below it. When adding related articles to this block, set Usage Type to Featured Article.

Field	Usage	Input
Title	H1 heading for the block	Plain Text

Featured pages block

This block lists all associated pages as links. The page’s Title field is used as the link text. When adding related pages to this block, set Usage Type to Featured Page.

Field	Usage	Input
Title	H1 heading for the block	Plain Text

Featured products block

This block displays product cards in two columns on small screens and four columns on larger screens and wraps to the next row as needed. The cards are like those on a product category page. When adding related products to this block, set Usage Type to Featured Product.

Field	Usage	Input
Title	H1 heading for the block	Plain Text

Featured categories block

This block displays categories in a row with featured cards and a scrollable horizontal bar at the bottom. On handheld devices, two cards will be displayed (the second card will be partly seen) so users can scroll over the items horizontally.

The category’s media is used as the image, and the category’s title as the label on top of it. When adding related categories to this block, set Usage Type to Featured Category.

Field	Usage	Input
Title	H1 heading for the block	Plain Text

Featured category products block

This block displays a paginated grid of every product in the categories you associate with it, rather than products you pick one at a time. Duplicates are removed, so a product in two of the associated categories appears once. A call to action button below the grid uses the Link Label and Link Target fields. When adding related categories to this block, set Usage Type to Featured Category.

Field	Usage	Input	Available Options
Title	H2 heading for the block	Plain Text
Subtitle	Medium sized subtitle for block	Plain Text
Alignment	Defines how the heading and subtitle are aligned	Picklist	Center, Left, Right
Link Label	If provided, displays as a call to action button	Plain Text
Link Target	If provided, gives the button a target URL	URL

:::note The Content Template field has no Featured Category Products option out of the box, so you need to add the picklist value before you can select this template. Use the API name featured_category_products. See Adding your own custom content block templates. :::