Code Overrides / Custom CSS

How to Add Custom CSS in AppSections

The "Code Overrides" setting in blocks and groups, or the "Custom CSS" setting in sections, allows you to add custom CSS to your Shopify store. This flexibility enables you to further customize the appearance and behavior of your elements beyond the standard settings. Here is how you can add custom CSS:

Adding Custom CSS

Purpose: This setting allows you to apply custom CSS styles to blocks, groups, and sections, enhancing the flexibility and control over your store's design.

Usage: Use CSS syntax to define custom styles.

Steps to Add Custom CSS

1. Select the Block/Group/Section:

   • Open your Shopify theme editor.

   • Navigate to the specific block, group, or section where you want to add custom CSS.

2. Locate the Code Overrides or Custom CSS Setting:

   • For blocks and groups, find the Code Overrides option.

   • For sections, find the Custom CSS option.

3. Enter Custom CSS:

   • Click on the Code Overrides or Custom CSS field to open the CSS editor.

   • Enter your custom CSS code using the following syntax:

     .class-name {
       property: value;
     }

Example of Adding Custom CSS

Suppose you want to change the background color of a specific block. Here's how you can do it:

1. Identify the Block's Class:

   • Each block or group will have a unique class or ID. You can find this by inspecting the element using your browser's developer tools.

2. Write the CSS Code:

   • Let's say the class of the block is .custom-block. You can add the following CSS to change its background color:

     .custom-block {
       background-color: #ff5733;
     }

3. Enter the CSS Code:

   • In the Code Overrides or Custom CSS field, enter the above CSS code.

Ensuring the Right Application of Custom CSS

1. Preview Changes:

   • After adding the custom CSS, preview your store to see how the changes look.

   • Check the block, group, or section to ensure the custom CSS is applied correctly and enhances the design.

2. Check Consistency:

   • Ensure that the custom CSS aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices.

3. Test Across Devices:

   • Verify the custom CSS on different devices to ensure it looks good and maintains functionality on all screen sizes.

Summary

By using the "Code Overrides" or "Custom CSS" setting in AppSections, you can apply custom CSS styles to your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the appearance and behavior of your elements, ensuring a dynamic and engaging user experience across all devices. Adding custom CSS helps create a unique and tailored design that aligns with your brand's vision.

If you have any questions or need further assistance, please contact our customer support team.