What to Do Before Editing your Shopify CSS Code?
You must always make a copy of your Shopify theme before making any changes to it using the code editor. If something goes wrong with your CSS adjustments, you may utilize this to create a backup copy.
How to Clone Your Theme?
STEP 1
Select the theme you wish to duplicate by going to Online Store > Themes in your Shopify Admin Dashboard.
STEP 2
On the themes page, locate the theme you wish to change, then select Actions, and click Duplicate.
STEP 3
Make sure you rename the backup to reflect the version you wish to restore—for instance, the date if you require a precise timestamp.
How to Access CSS Files in the Shopify Code Editor?
STEP 1
From Your Shopify Admin Dashboard, navigate to your Online Store > Themes. Locate the theme you wish to change, then select Actions.
STEP 2
To access the code editor, select Edit code from the Actions dropdown menu.
STEP 3
When you are in the code editor, search for the file 'theme.css'.
How to Add Custom CSS Via Theme Editor?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Go to Theme Settings > Custom CSS.
STEP 3
Add custom CSS per your need.
STEP 4
Click Save to apply the changes.
How to Add Custom CSS to Specific Sections?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Go to Sections > Templates.
STEP 3
Some sections have a part called Custom CSS where you can add in your CSS.
Slideshow
Collections list
Rich text
Gallery, etc.
For example, the slideshow:
STEP 4
Complete the section using the CSS code.
STEP 5
Click Save to apply the changes.
How to Create a Custom HTML Section for Shopify Store?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Go to Sections, scroll down to Templates, then click Add section.
STEP 3
Search for “Custom HTML”, click it to add it to your sections.
STEP 4
To add HTML code, open the "Custom HTML" section that you have created.
STEP 5
Complete the section using the HTML code.
You can also adjust the column width for both desktop and mobile.
Choose the text alignment: left, right, center, or justify.
STEP 6
After completing it, move it to your desired location.
STEP 7
Click Save to apply the changes.
How to Create a Custom Liquid Section in Shopify?
STEP 1
From Your Shopify Admin Dashboard, navigate to your Online Store > Themes. Locate the theme you wish to change, then select Actions.
STEP 2
To access the code editor, select Edit code from the Actions dropdown menu.
STEP 3
Go to Sections, then click Add a new section and name it custom-liquid-section. Click Done.
STEP 4
Copy the code below, then add it to the "custom-liquid-section."
{{ section.settings.custom_liquid }}
{% schema %}
{
"name": "Custom Liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid",
"info": "Add app snippets or other liquid code to create advanced customizations."
}],
"presets": [
{
"name": "Custom Liquid"
}]
}
{% endschema %}How to Add a Custom Liquid Section on your Shopify Pages?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Go to Sections, scroll down to Templates, then click Add section.
STEP 3
Find “Custom liquid”, and see it’s available now on the section lists. Click it to add this custom liquid section.
STEP 4
Navigate to the newly formed Liquid section.
To specify the section's content and structure, add your Custom Liquid code. Liquid tags, HTML, and CSS are examples of this.
Make the section unique based on the content and design requirements you have.
STEP 5
Click Save to apply the changes.
What Are The Next Steps?