Please let us know how this article can be improved.
Choose all that apply.*
Report a bad link
Out of date (instructions or screenshots)
Missing detail
Other
Hiding the code field on product pages
Learn how to hide the item code or SKU field on your product pages.
Jun 20, 2024
Article ID: SLN18921
Note: The following help document applies only to Store Editor 3.0 templates designed using Design Wizard. The CSS edits noted below will hide the Code field on item pages only, but not on section pages.
While it is not possible to disable the Code field on item pages (see below) by changing a variable, you can make edits to your CSS files to hide the Code field from being displayed.
Item with Code displayed:
Item with Code not displayed:
In order to not display the field, you will need to add a few rules to the css-edits file that will instruct the browser not to display the code field.
Note: It is recommended that you make edits whenever possible to the css-edits file and not by editing the other CSS files directly. If you make a mistake, this will allow you to erase any rules added to the css-edits file and start over. If you make edits to the other CSS files and you make a mistake you are unable to correct, you can always run the Design Wizard again to start over.
In the Advanced Editor toolbar, click the Contents button.
Click the edit icon next to css-edits.
Copy and paste the following lines into the bottom of the Css-text field: Left-side navigation templates: #itemarea .code {font-style:normal; margin:10px 0; display:none;} #itemarea .code em {font-style:normal; margin:10px 0; display:none;}
Top navigation templates: #bodyContent .itemContainer .itemCode {display:none;}
Click Update. The code field should no longer appear on your item pages.