Custom CSS

Store Design
, , ,

Topic summary

Goal: Set different background colors for each row in a Shopify multirow section and use a distinct heading color per row via custom CSS.

Key guidance:

  • Add unique selectors: Ensure each row and its heading have unique classes or IDs (e.g., .row-1, .row-2). Classes/IDs let CSS target elements specifically.
  • Where to edit: In Shopify Admin > Online Store > Themes > Actions > Edit code, add rules in Assets/base.css or theme.css.
  • Example approach: Define per-row background colors (e.g., .row-1 { background-color: … }) and per-row heading colors (e.g., .row-1 h2 { color: … }). Repeat for each row. Make sure the HTML for each row includes the corresponding classes.

Caveat/alternative view:

  • One reply notes custom CSS may not apply if elements/styles are changed by a JavaScript trigger, and requested the store URL and theme to advise precisely.

Status and next steps:

  • No confirmed resolution yet. Next steps include adding class-based CSS, ensuring the HTML uses those classes, and sharing the store URL/theme for tailored help if JavaScript-driven content is involved.

Note: The provided CSS code examples are central to implementing the solution.

Summarized with AI on December 22. AI used: gpt-5.
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