Knowledge Base

Search

  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

Nesting Blocks

In the illustration below, what looks like a single block is actually two blocks, with one nested inside the other. In the following illustration, the words “Spectacular Spring Shoe Sale!” is text that is placed in the outer block, but the image is actually located in a separate block.

Why would you want to separate the text from the image? If your store is available in multiple languages, you could update the text block separately. You could put a rotating banner in one block, but the leave the text unchanged. It also gives you the ability to change either the content of either block dynamically, according to a schedule.

In this example, the Block ID tag is used to reference one block from the other, and also to display the nested block in the content area of the home page.


Nested Blocks

Step 1: Create the Inner Block

In this example, the inner block looks like a simple image, but includes an anchor link to the product page, with markup tags for the media URL and store URL. The “bannermain” class is a custom.CSS style that was created to prevent the banner from extending beyond the width of the main area of the store. You can experiment by applying different classes from the style sheet of your theme, or create new ones.

Inner Block Code:

<div class="banner-main">
<a href="{{store url=’nine-west-women-s-lucero-pump.html’}}">
<img src="{{media url=’shoe-sale-med.png’}}” alt="” /></a>
</div>

Step 2: Create the Outer Block

The outer block contains the text, “Spectacular Spring Shoe Sale!” followed by the Block ID markup tag that references the block with the image.

Outer Block Code:

<p><span style="font-family: arial black,avant garde; font-size: xlarge;">
<strong>Spectacular Spring Shoe Sale!</strong></span></p>
<p>{{block id=’shoe-sale’}}</p>


Block with Text and Block ID Markup Tag

Step 3: Place the Outer Block on a CMS Page

The final step is to add the nested block to the content area of a CMS page.

  1. From the Admin menu, select CMS > Manage Pages.
  2. Click to open your Home page.
  3. In the panel on the left, select Content. Then type the Block ID tag into the content editor.
    {{block id=’nested-block-id’}}
    For better control, you can click the Show / Hide Editor button, and position the Block ID exactly where you want it to appear in the code. In the following example, the block is placed between an image and the New Products list.
  4. Click the Save Page button.


Home Page Content with Block ID Markup

Still have questions? Submit them below and they'll be answered by our expert support team.
Like what you read? Drop us a note with your feedback below.