You can add your own HTML, Liquid and CSS in the theme editor instead of editing the theme's code files. Code you add this way is saved with your other editor changes, which Shopify copies to each new version of Checkmate when you update.
Inside a section that takes theme blocks, such as Section, Video or Popup, and inside a Group or Columns block
Custom liquid block in Product information
HTML and Liquid
Among the product details, in the Product information and Featured product sections
Custom CSS of a section
CSS
Styles one section only
Custom CSS in Theme settings
CSS
Styles every page
A Custom Liquid section or Custom liquid block with no code shows "Add custom Liquid to display content here." in the editor and nothing on your store. The Custom liquid block in Product information shows nothing until it has code.
At the top of the editor, select the page for your code, such as Home page.
In the editor sidebar, click Add section and select Custom Liquid.
In the section's Custom liquid field, enter your code.
Click Save.
To add a block instead, click Add block in a section from the table and select Custom liquid. The field takes up to 50 KB of code. Some Liquid tags and objects do not work in it, as Shopify's list of theme settings explains.
At the bottom of the section's settings, click Custom CSS.
Enter your CSS.
Click Save.
Section CSS can be up to 500 characters long and applies only to that section. For CSS that applies to every page, use Custom CSS at the bottom of Theme settings, which takes up to 1,500 characters. Blocks have no Custom CSS of their own. Shopify's guide to custom CSS lists what it does not support.
Keep your code when you update
When you update Checkmate, Shopify copies the changes you made in the theme editor to the new version, including section and block settings, so the code in Custom Liquid sections and blocks comes along. Edits to the theme's code files move over only when they do not conflict with the new version. Otherwise, you copy them across yourself. Update your theme to a new version explains the update.
CSS that targets the theme's own class names can stop working after an update, because a new version can change them. After each update, check the pages your CSS styles.
You can add your own HTML, Liquid and CSS in the theme editor instead of editing the theme's code files. Code you add this way is saved with your other editor changes, which Shopify copies to each new version of Checkmate when you update.
Choose where the code goes
Place
Takes
Where it shows
Custom Liquid section
HTML and Liquid
As its own section, on any page. Not in the header or the footer.
Custom liquid block
HTML and Liquid
Inside a section that takes theme blocks, such as Section, Video or Popup, and inside a Group or Columns block
Custom liquid block in Product information
HTML and Liquid
Among the product details, in the Product information and Featured product sections
Custom CSS of a section
CSS
Styles one section only
Custom CSS in Theme settings
CSS
Styles every page
A Custom Liquid section or Custom liquid block with no code shows "Add custom Liquid to display content here." in the editor and nothing on your store. The Custom liquid block in Product information shows nothing until it has code.
Add HTML or Liquid
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
At the top of the editor, select the page for your code, such as Home page.
In the editor sidebar, click Add section and select Custom Liquid.
In the section's Custom liquid field, enter your code.
Click Save.
To add a block instead, click Add block in a section from the table and select Custom liquid. The field takes up to 50 KB of code. Some Liquid tags and objects do not work in it, as Shopify's list of theme settings explains.
The Custom Liquid section also has the layout, background and motion settings other sections have, described in Section layout settings, Section background settings and Section motion settings.
Add CSS to one section
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, select the section.
At the bottom of the section's settings, click Custom CSS.
Enter your CSS.
Click Save.
Section CSS can be up to 500 characters long and applies only to that section. For CSS that applies to every page, use Custom CSS at the bottom of Theme settings, which takes up to 1,500 characters. Blocks have no Custom CSS of their own. Shopify's guide to custom CSS lists what it does not support.
Keep your code when you update
When you update Checkmate, Shopify copies the changes you made in the theme editor to the new version, including section and block settings, so the code in Custom Liquid sections and blocks comes along. Edits to the theme's code files move over only when they do not conflict with the new version. Otherwise, you copy them across yourself. Update your theme to a new version explains the update.
CSS that targets the theme's own class names can stop working after an update, because a new version can change them. After each update, check the pages your CSS styles.