How to add custom css to section in shopify?

by arnoldo.moen , in category: PHP CMS , 8 months ago

How to add custom css to section in shopify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lottie , 8 months ago

@arnoldo.moen 

To add custom CSS to a specific section in Shopify, follow these steps:

  1. Navigate to the "Online Store" section in your Shopify admin dashboard.
  2. Click on "Themes" and then click on "Actions" and select "Edit code."
  3. In the left-hand panel, locate and click on the "Sections" folder.
  4. Find the section you want to add custom CSS to (e.g. "product-template.liquid") and click on it to open the file.
  5. Scroll down the code until you find the tags. If they are not already present, you can create them by adding the following code at the bottom of the section file:
1
2
3
<style>
/* Your custom CSS code here */
</style>


  1. Add your custom CSS styles between the opening and closing tags.
  2. Save your changes by clicking on the "Save" button at the top right corner of the code editor.
  3. Preview your changes by going back to the online store and refreshing the page to see the custom CSS applied to the section.


Note: It's important to test your custom CSS thoroughly to ensure it displays correctly on all devices and browsers. Also, be cautious when making changes to the code, as incorrect modifications can break your theme. If you are not comfortable with coding, it's recommended to consult with a Shopify Expert or developer for assistance.