Head to the Account area in your admin.
Click Design.
Select the Code tab.
Under the Advanced theme code section, choose the page you want to edit.
When you’re finished, click Done.
If you’re ready to commit, click Publish. To undo changes, click Discard. If you’re not quite ready to publish, click Exit and your changes will be auto saved but not published.
Advanced Theme Code
- Updated on 2 November 2023
- 2 min read
- Premium feature
The Advanced Theme Code section is for people who are very comfortable using HTML/CSS and want to make more in-depth changes to their shop’s design. This area is for the kinds of design changes that can’t be made using the basic Design tools or by switching to another one of our built-in themes.
For example, this is where you would edit your theme code to translate your shop into another language, add videos to your Home page, or change the navigation style.
If you need to add a script or tag from a third-party service, like Mailchimp or Pinterest, paste those in the Integration Code section instead. Scripts added to the Integration Code will remain saved in your theme unless you manually remove them or downgrade to our free Gold plan.
All shops on paid plans have full access to their theme code (HTML/CSS). Shops on the free Gold plan only have access to their CSS for simple changes to style elements.
Edits made to the Advanced Theme Code will be removed if you change or update your theme. You can Download your theme code to save a copy of your custom code to add back to the Advanced Theme Code section if you do update or switch themes.
We recommend that only people comfortable editing and maintaining custom code work in the Advanced Theme Code section. If you aren’t familiar with HTML/CSS and you need to customize your theme code, we recommend hiring a designer to assist you.
Additional Information about Advanced Customizations
While most pages in your shop are accessible for advanced customizations, the checkout page is not editable at this time.
When editing your CSS, we recommend you place any custom code at the bottom of the CSS page instead of editing the code directly. This will allow you to easily adjust or remove any custom elements without having to reset your CSS to the default code.
Big Cartel themes use Liquid markup as the theme’s language. Check out our Developer page for more information about advanced tools available for developers.
You can include custom Javascript, stylesheets, or font files in the Integration Code and Advanced Theme Code sections. However, all files must be hosted externally—we don’t offer file hosting.
Have a specific coding question? Try posting on Stack Overflow or search their resources using a Big Cartel tag to find coding advice.