Let's look at how to create functional merchandising zones for your SuiteCommerce Site!
Getting Started with Merchandising Zones
1. The updated Core Content Type Extension should be activated.
2. The 'Best Sellers' bundle should be installed if you want to use sales data as sort criteria.
3. You should logically think through the rules that will be used in that zone. For example, "This zone should display only items that have > 2 stock level, and it should be sorted by best sellers over the last 365 days."
4. Any necessary 'Filter' criteria should be added as Facets in Website Setup. These Facet(s) need not be configured to actually display in the webstore.
Need a refresher on facets? Check out this tutorial on setting up SuiteCommerce Facet Fields!
5. Similarly, you should add your Sort Criteria in Website Setup.
Need a refresher on how to configure sort fields? Check out this tutorial on Sorting Items in SuiteCommerce!
6. You must ensure that the above fields are included in the Fieldset you intend to use for the merchandising zone.
7. Then, you should try to create your Merchandising Rule. In the end, it will look something like this:
8. Finally, you will add the Merchandising Zone through SMT, pick the display option (Grid vs. Slider), and select the Merchandising Rule.
A Few Common Merchandizing Zone Issues
1. Your newly added Filter/Sort options might be inexplicably missing from the list (this could also happen with your Fieldset selector)
If you run into this problem, do the following:
- Click the dropdown selector on the merchandising rule a few times
- Navigate to Customization > Lists, Records, and Fields > Record Types, find Website Fieldsets, Website Filters, and/or Website Sorts in the record list, and click List.
- Find the Fieldset/Filter/Sort you are looking for and click Edit
- Ensure that the Site Name field matches the Internal Name of the site you are trying to do this setup for on your Website Setup Record. If it doesn't, update the site name on the Fieldset/Filter/Sort record in question.
After completing that step, the Fieldset/Filter/Sort should be available on the Merchandising Rule.
2. After getting your Fieldset/Filter/Sort issues figured out, you might get a few results/errors in your console
Suppose you get a console error about the item.image.url and get no/few results in your Merchandising Zone. In that case, it is because the Merchandising Zone is trying to display an item that does not have an Associated Image. In some cases, this will totally prevent any items from displaying; in others, it may display a few—but much less than it ought to. You have two options to resolve this problem:
- Add associated images for all items (best). (Check out our associated images SuiteCommerce bundle for easier image management!)
- Add a checkbox on the item record called 'Eligible for Merchandising Zone' (or something like that), identify which items have images that should be eligible for display in the zone based on the filter rules, check that checkbox on the corresponding item records, and apply that checkbox as a filter. This will exclude all non-imaged items from breaking the zone.
3. After getting your errors fixed, you might get a view like this
This is because your template/CSS files need to be updated. Hurrah! To do this, you will need to find the appropriate files at SuiteScripts: extensions : CXExtensibility: [email protected]
Related Article: What is SuiteScript?
While it might look like the template and CSS files are set up appropriately, they likely are not. In Chrome, you should begin to inspect elements and mess with the CSS to get the view you are looking for. Alternatively, consider using my CSS below:
/* Need to copy into File Cabinet at: SuiteScripts > extensions > CXExtensibility > [email protected] > Modules > CMSMerchzoneCCT */ // Issue 650946: Fixes Sass Compilier Failure during Extension Activation $sc-h3-text-transform: none !default; $sc-button-small-padding-v: 5px !default; $sc-button-small-padding-h: 10px !default; /* group({ "id": "merchzone-cct", "label": "CMS Merchzone+", "description": "Styles for new CMS Merchzone", "children": [ "merchzone-heading-styles", "merchzone-image-styles", "merchzone-button-styles" ] }) */ /* group({ "id": "merchzone-heading-styles", "label": "Section Heading", "description": "Styles for the optional heading above the merchandising zone", "children": [ "$heading-color", "$heading-font-family", "$heading-font-size", "$heading-desktop-font-size", "$heading-margin-top", "$heading-margin-bottom", "$heading-text-transform" ] }) */ /* group({ "id": "merchzone-image-styles", "label": "Images", "description": "Styles for merchandising zone product images", "children": [ "$image-padding" ] }) */ /* group({ "id": "merchzone-button-styles", "label": "Buttons", "description": "Styles for the buttons that appear below each product item", "children": [ "$button-text-color", "$button-background-color", "$button-border-color", "$button-border-radius", "$button-text-transform", "$button-hover-background-color", "$button-hover-text-color", "$button-hover-border-color", "$button-active-background-color", "$button-active-text-color", "$button-active-border-color", "$button-padding-v", "$button-padding-h", "$button-font-size", "$button-line-height", "$button-letter-spacing", "$button-mobile-width", "$button-desktop-width" ] }) */ $heading-color: $sc-color-h3; /* editable({"type": "color", "label": "Text"}) */ $heading-font-family: $sc-h3-font-family; /* editable({"type": "string", "label": "Font family"}) */ $heading-font-size: $sc-h4-font-size; /* editable({"type": "string", "label": "Mobile size"}) */ $heading-desktop-font-size: $sc-h4-desktop-font-size; /* editable({"type": "string", "label": "Desktop size"}) */ $heading-font-style: $sc-h3-font-style; $heading-text-decoration: $sc-h3-text-decoration; $heading-margin-top: $sc-h3-margin-top; /* editable({"type": "string", "label": "Margin top"}) */ $heading-margin-bottom: 5px; /* editable({"type": "string", "label": "Margin bottom"}) */ $heading-text-transform: $sc-h3-text-transform; /* editable({ "type": "string", "label": "Text transform", "options": [ {"value": "none", "text": "none"}, {"value": "uppercase", "text": "uppercase"}, {"value": "lowercase", "text": "lowercase"}, {"value": "capitalize", "text": "capitalize"} ] }) */ $image-padding: 10px; /* editable({"type": "string", "label": "Padding"}) */ $button-text-color: $sc-button-primary-text-color; /* editable({"type": "color", "label": "Text"}) */ $button-background-color: $sc-button-primary-background-color; /* editable({"type": "color", "label": "Background"}) */ $button-border-color: $sc-button-primary-border-color; /* editable({"type": "color", "label": "Border"}) */ $button-border-radius: $sc-button-primary-border-radius; /* editable({"type": "string", "label": "Border radius"}) */ $button-text-transform: $sc-button-primary-text-transform; /* editable({ "type": "string", "label": "Text transform", "options": [ {"value": "none", "text": "none"}, {"value": "uppercase", "text": "uppercase"}, {"value": "lowercase", "text": "lowercase"}, {"value": "capitalize", "text": "capitalize"} ] }) */ $button-hover-background-color: $sc-button-primary-hover-background-color; /* editable({"type": "color", "label": "Hover background"}) */ $button-hover-text-color: $sc-button-primary-hover-text-color; /* editable({"type": "color", "label": "Hover text"}) */ $button-hover-border-color: $sc-button-primary-hover-border-color; /* editable({"type": "color", "label": "Hover border"}) */ $button-active-background-color: $sc-button-primary-active-background-color; /* editable({"type": "color", "label": "Active background"}) */ $button-active-text-color: $sc-button-primary-active-text-color; /* editable({"type": "color", "label": "Active text"}) */ $button-active-border-color: $sc-button-primary-active-border-color; /* editable({"type": "color", "label": "Active border"}) */ $button-padding-v: $sc-button-small-padding-v; /* editable({"type": "string", "label": "Vertical padding"}) */ $button-padding-h: $sc-button-small-padding-h; /* editable({"type": "string", "label": "Horizontal padding"}) */ $button-font-size: $sc-button-small-font-size; /* editable({"type": "string", "label": "Font size"}) */ $button-line-height: $sc-button-small-line-height; /* editable({"type": "string", "label": "Line height"}) */ $button-letter-spacing: $sc-button-small-letter-spacing; /* editable({"type": "string", "label": "Letter spacing"}) */ $button-mobile-width: $sc-button-small-mobile-width; /* editable({"type": "string", "label": "Mobile width"}) */ $button-desktop-width: $sc-button-small-desktop-width; /* editable({"type": "string", "label": "Desktop width"}) */ .vertical-control { -webkit-transform: rotate(90deg) translateX(-50%); transform: rotate(90deg) translateX(-50%); right: initial; left: 50%; } #cms_merchzonetwo .cms-merchzone { position: relative; padding-bottom: 25px; .cms-merchzone-heading { color: $heading-color; font-family: $heading-font-family; font-size: 2rem; font-style: $heading-font-style; text-decoration: $heading-text-decoration; margin-top: $heading-margin-top; margin-bottom: $heading-margin-bottom; text-transform: $heading-text-transform; //padding-bottom: 40px; @media (min-width: $screen-md-min) { font-size: $heading-desktop-font-size; } } .cms-merchzone-item { text-align: center; cursor: pointer; max-width: 25%; display: inline-block; border: 1px lightgray solid; padding: 10px; margin: 10px; .item-image-wrapper { padding: $image-padding; display: flex; flex-direction: column; justify-content: center; } .item-name { font-weight: 600; } } .cms-merchzone-grid { margin-left: 0; display: flex; align-items: center; flex-wrap: wrap; & > li { list-style: none; display: inline-block; width: 300px !important; height: 325px !important; margin: 5px !important; .item-image { display: block; max-width: 200px !important; max-height: 200px !important; width: auto; height: auto; } } } .cms-merchzone .cms-merchzone-item .item-image-wrapper { padding: 10px; display: flex; flex-direction: inherit; justify-content: center; } .cms-merchzone-item { width: 100% !important; height: 100% !important; } .cms-merchzone-slider { margin-left: 0; &-next { font-size: 30px; position: absolute; right: 0; top: 40%; &.cms-merchzone-vertical-control { @extend .vertical-control; top: initial; bottom: -10px; left: 48.5%; } } &-prev { font-size: 30px; position: absolute; top: 40%; left: 0; &.cms-merchzone-vertical-control { @extend .vertical-control; top: 22px; bottom: initial; left: 48.5%; } } } &-see-more { display: inline-block; color: $button-text-color; background-color: $button-background-color; border-radius: $button-border-radius; border: 1px solid $button-border-color; text-transform: $button-text-transform; padding: $button-padding-v $button-padding-h; font-size: $button-font-size; line-height: $button-line-height; letter-spacing: $button-letter-spacing; width: $button-mobile-width; @media (min-width: $screen-sm-min) { width: $button-desktop-width; } &:hover { color: $button-hover-text-color; background-color: $button-hover-background-color; border-color: $button-hover-border-color; } &:active { color: $button-active-text-color; background-color: $button-active-background-color; border-color: $button-active-border-color; } } }
This will produce a Merchandising Zone that looks like this:
Similarly, if you need to expose another field in the merchandising zone (SKU, for example), you can do this by editing the JS file and tpl files directly. You will need to edit the CMSMerchzoneCCT.View.js file and add something like this:
Then, you will need to call out this new class in your tpl file like this:
After making these changes, you will need to re-activate your Core Content Extension and run a cache invalidation to see if they worked.
4. After fixing your CSS, tpl, and JS files, your styling might STILL be off
If styling for your merchandising zone is still not what you are hoping for, identify which piece of CSS did not 'take' from the CSS file change and add it as an override in SMT.
After you have solved all of the issues listed above, you should have a working merchandising zone that looks great!
Got Stuck on a Step in this Article?
Our team loves to hear feedback on how we can improve our instructions or add enhancements to our solutions. Please reach out to our team through our contact page with any suggestions on how we can improve our documentation!
Oracle NetSuite Alliance Partner & Commerce Partner
If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!
We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.
Get a Free Copy of Our SuiteCommerce Book
If you haven't yet, make sure to snag a free copy of our SuiteCommerce book, which we will ship for free to any address in the United States mainland.
