Content Blocks Detailed
This article will explain the Content Blocks in detail. It will explain what they do and how to set them up.
- Editing Content Blocks
- Blog Posts
- Category Grid
- Category Menu
- Guided Search
- HTML Rotator
- Image Rotator Ver 1, 2 & 3
- Last Product Viewed
- Mailing List Signup
- Manufacturer Search
- Mega Menu
- Product Grid
- Product Rotator
- Search Box
- Search Within Page
- Share This
- Side Menu
- Sign In Sign Out
- Top Menu
- Top Products
- Website Site Logo
While each content block has their own editor (detailed in steps below), all of them have "Publish Settings" and "Advanced Options".
- Publish at: Is the earliest date that this block will become visible in the content area. If left blank, it will be visible immediately.
- Remove at: Is the last date that this block will remain visible in the content area. If left blank, it will be visible forever.
- Display Mode: Allows you to determine if the block should be visible to All Users, Logged in Users Only or Logged-out Users Only.
- Render Mode: Allows you to determine if the block should be visible when the theme is in Desktop, Mobile or both. Note: Mobile Theme needs to be enabled for this option to show under: Config > General > Mobile Theme Configuration.
- Restrictions: This option will allow you to make the content block only available to the groups that you select to view it. In the example above, only members of the "Wholesale Customers" will be able to view the content block. If the Member of field is left blank, then every user on your site will be able to view it. For more on groups, click here.
- Save Publish Settings: Please ensure that you click this option to save your changes.
These two elements allow you to easily Copy or Move this block to another content area.
- Display Type: Depending on which option you select here (Recent/Per Month/Category), this window may expand/shrink to display additional options. For illustration purposes, we have selected the Recent Posts option.
- Title: This will be the title that will be displayed on the storefront.
- Selected Blog: Here is where you will select the the Blog you want it to pull the post from.
- Blog Category: You can categorize your Blogs for better organization.
- Number of Posts: How many posts should be displayed at once.
- Number of Days: This setting is typically not used if you aren't posting entries on a daily basis.
- Display Type: The layout of the posts that will be displayed.
Not a commonly used Content Block, the Category Grid will allow you to add a link to any of your categories. You'll simply select the categories you want on the right hand side and "Set Selected Categories" to add them. You can use the Number of Columns to set how you want them displayed. Play with them to see what you think looks best. (if being used in a sidebar, use 1 column)
Very similar to Category Grid, you will be able to display your categories for easier navigation for your customers.
Give the menu a title in the Menu Title field. Typically you'll want to set Display Mode to Show All Categories and set the Max Tree Depth to 1. This setup will only show the main root categories. If you want to display all of the sub-categories as well, you'll set the Max Tree Depth to 2. This however will create a long menu list, so it only looks nice if you have a lot of content in your site since this menu will extend far below.
This comes standard with sites, but this Content Block will help customers filter down their searches while viewing category pages that have various product attributes. They can filter what they are seeing by what information is most prevalent and available, ie Price, Manufacturer and Category.
Keep in mind that this is driven by the information the products contain. It is dynamically driven, so you can only set a few parameters as far as what it will pull and display as seen above.
This is used to easily add text and images to a page. Align text, make it bold or italic or create links without coding using the built in functionality of the icons you see in the header. Hover over icons for tooltips as to what they do if you're unsure.
The HTML Rotator is primarily used by more experienced users to add code like HTML/CSS, java script, etc.
Just add content or code to the box and hit New.
All three Image Rotators behave the same way, the only difference is that the newer versions have different transition effects.
All three consist of the same elements. On the right side under Modify/Create Image is where you will upload and or select your image that you want to be in your site. If you want the image to link to somewhere on your site, you'll add the link into the Link To field.
The animation settings are on the left. You can set the seconds in between changes and what transition effect you want. It's always best to set the Image Width and Height to the exact dimensions of the image(s) you're uploading.
The Pre-Html and Post-Html fields are for more advanced users looking to apply HTML/CSS classes to the area.
This is a dynamically driven Content Block, meaning it displays the last bit of products the customer has viewed based on the settings you setup. If a customer comes to the site for the first time, they will not see anything here because they have yet to view a product.
You can set the max number of previous items that are displayed in the Number of Items field.
The Grid Columns will determine how many products will display in a row. Tip: if you're putting this in a sidemenu, set the Grid Columns to 1.
This is used to capture customers email address for Mailing List.
- Watermark Text - Text that appears behind the field where users will enter their information. A document's contents.
- The other four fields are just content fields such as Title, Instructions and an Success/Error message that you can configure.
There is no interface for Manufacturer Search, this simply adds a drop down menu full of the Manufacturers listed on your site.
The Mega Menu Content Block will give your main menu on the home page more flexibility. Instead of the traditional single column drop down menu, you can now have multiple rows of columns that extend across 100% of your main menu, showcasing all of the sub-categories. You can added images/content to either side of the Mega Menu as well to highlight manufactures or even banners for sales etc.
For more info on the Mega Menu, see Admin Documentation - Mega Menu
The Product Grid will allow you to manually add products to a page. The Grid Columns field must be set first, this will determine how many items will be in one row. If you are putting this in a sidemenu, it's recommend that you set the Grid Columns to 1. Typically 3 products per row is set, but you can configure this however you want.
Select the skus you want in the grid via the check box's on the right hand side. You can search or filter down the results using the Advanced Filter.
Once you add items, you will be able to sort them by dragging and dropping each line item with the small icon to the left of each item. To remove an item, click and drag it to the Remove Item icon at the bottom of the list.
The Product Rotator will allow you to show a single product at a time to a page. Typically used in the sidebar to showcase a handful of items, the image displayed will change every time the page is visited and or the page is refreshed.
Select the skus you want to add via the check box's on the right and hit the Ok button on the left when done.
The Search Box is rarely added anywhere else on the site as it comes standard in your header. There aren't many settings that go along with this Content Block as you can see above.
Note that if you add this to another area of the site, it will most likely not look the same as the Search Box in your header. This is due to CSS styling that's specific to the Search Bar located in the header.
Much like the Search Box Content Block, this allows users to narrow down and search from within the page they're on.
ShareThis allows you to add social media icons to your site easily.
If you have an account with ShareThis, you can enter your Publisher ID to sync your account to your site.
Add icons by selecting from the list on the right and clicking the Left Arrow to add them to the Selected Box. Once you've compiled your list, hit Save Display Settings.
You can compose your own side menu by adding the name of the link in Link Text Field and defining the link in the Link Url. Hit New and it will add the newly created link to the left.
Add as many as you need or want and rearrange the order if needed.
Note, if adding a link that goes to within your website, be sure to only include everything after the ".com". For example if you want to create a link that goes to your About Us page, and the url is www.mywebsite.com/aboutus, you would only put "/aboutus" in the Link Url.
Another Content Block that is not used or added often as it comes standard in the header of your website. This Content Block inserts a sign in link that will automatically display the users username while logged in and allow them to log out after they are done.
Use this to create a bullet list. Much like the other Content Blocks, you'll input the text you want displayed using the Link Text field and define the link (if you want one) in the Link Url field and hit "New".
Remember to only include everything after the ".com" portion of your url if you're linking to somewhere on your site. If going to an external site, you would include the full url and would recommend setting it to "Open In New Window".
This dynamically pulls your sites top selling products and displays them where you insert the Content Block.
You can select how many products you want to display in a row using the Number of Columns field. It's recommend that if you're using this in a sidebar to set it to 1 since there will only be room for that.
You can can also define how many of the Top Products you want displayed via the Number of Items field. The Number of Days field defines the time frame, meaning "display the top products from the last 30 days". If you wanted to make it the Top Products of the Week, you'd obviously set it to 7 days.
Remember to hit Save Display Settings.