Trying to add classes to product attributes via the default.layout file in cms-assets

Hello,

I’m working on implementing my first eCommerce client on Treepl CMS. The site has been on Treepl for about a year, but they are just now adding eCommerce to the site. I’m trying to add a class to (along with other customizations) to the attributes drop-down menu. I can access (via FTP) the cms-assets > item_attributes > default.layout file. I’m able to download it locally, make changes, and save the file. However, I’m unable to upload the file back into that same directory. Has anyone done any customizations to those different cms-assets or have any insight/direction they can give me to help with customizations of some of the eCommerce fields such as attributes (drop-down, checklist, radio buttons, etc.), quantity input field, buy now button, etc.? I have the markup for eCommerce already ready to go from when we developed the markup a year or so ago (I created a product list/detail page), so the code is ready to go - I just need to be able to add some classes to certain elements in the cms-assets layouts.

Thank you in advance if you can help in any way!

  • Ryan

Lol - it never fails. I try to figure something out for hours and then finally wave the white flag and ask for help. 2 minutes later, I found the solution. If anyone else runs into this, I found that you can just add a layout to the liquid tag and then copy the default ‘default.layout’, make your changes, upload it to the server, and then add the liquid ‘layout’ tag to the layout you’re working on.

So, for example, I took the default.layout file from

cms-assets > item_attributes > default.layout

Using FTP. I made the changes and then saved the document as ‘attributes.layout’. I then uploaded that file to the /includes directory on the root of the server and then added the following attribute code to the product detail layout (with the change from the ‘default’ liquid tag in bold):

{% component source: “Products”, itemId: “{{this.Id}}”, type: “item_attributes”, layout: “/includes/attributes.layout” %}

I hope this helps someone if they run into the same question so I wanted to post the solution here. Now, on to customize some of the other eCommerce layouts!

Stay healthy!

  • Ryan
4 Likes