Custom CSS

Store Design
, , ,
1

I would like to have different background colors in the same section. For example, In the multirow section, I have 5 rows. I want to have a different background color for each row. I would like also to have a heading color different than the body color in the row section. Is there a way to use custom CSS to reach to this result ?

2

Hi @Hassanzy , if you are dev you may know that the custom CSS won’t apply on the javascript trigger, and if you could share your store URL I can better accommodate you. and which theme you are using?

3

Identify Rows and Headings: First, make sure each row and heading in your multirow section has unique classes or IDs. This will help you target them specifically with CSS.

Add Custom CSS: Go to your Shopify Admin, click on “Online Store” > “Themes” > “Actions” > “Edit code.” Open the base.css or theme.css file in the “Assets” folder and add custom CSS like this:

.row-1 {
background-color: #f0f0f0; /* Light grey for row 1 */
}

.row-1 h2 {
color: #333; /* Dark grey for heading in row 1 */
}

.row-2 {
background-color: #e0e0e0; /* Slightly darker grey for row 2 */
}

.row-2 h2 {
color: #666; /* Medium grey for heading in row 2 */
}

/* Repeat for other rows */

Replace .row-1, .row-2, etc., with the actual classes or IDs used in your HTML.

Apply Classes to HTML: Ensure that your HTML for the rows includes the correct classes:


## Heading for Row 1

Body content for Row 1

## Heading for Row 2

Body content for Row 2

This approach allows you to set unique background colors for each row and different colors for the headings within those rows. Adjust the colors and class names as needed for your design.

1 Like