Change background color for each column in a multicolumn

Change background color for each column in a multicolumn

In the multicolumn section, add the following custom css:

Idea
li:nth-child(1) .multicolumn-card__info {
  background-color: red;
  color: white;
}

li:nth-child(2) .multicolumn-card__info {
  background-color: green;
  color: white;
}

li:nth-child(3) .multicolumn-card__info {
  background-color: blue;
  color: white;
}

li:nth-child(4) .multicolumn-card__info {
  background-color: magenta;
  color: white;
}

li:nth-child(5) .multicolumn-card__info {
  background-color: cyan;
  color: white;
}

a {color: white;}


    • Related Articles

    • Create a Video Background section

      Create the section snippet, create a new snippet named: video-background.liquid and copy the following liquid into it. {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} {%- assign img_url = block.settings.image | img_url: '1x1' | ...

    • Change theme star rating color on product grids

      In Edit Code, go to assets/component-rating.css Replace the following code: .rating-star::before { content: '★★★★★'; background: linear-gradient( 90deg, var(--color-rating-star) var(--percent), rgba(var(--color-foreground), 0.15) var(--percent) ); ...

    • Change displayed size images in Multicolumn section

      At the multicolumn section, paste the following: .multicolumn-card__image-wrapper--third-width { width: 20% !important; }

    • Change Sale Badge to % off

      In card-product.liquid {% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %} {%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%} Save {{ ...

    • Highlighting one menu link with a distinct color

      In the header, add in custom css as followings: a[href^="/pages/contact-us"] {color: #33ff00 !important;}