Shopify Question posted in
The Shopify help center can be found here.

Alternating background color of product blocks on Shopify?

I’m wondering if there is a way to alternate the background colors of product blocks in Shopify via editing shop code. Here’s an example of what that would look like:

Mockup of alternating blocks

How it is set up right now is this same grid but just with a black background for everything, with white lines separating the blocks. Is there a way to tell the background color to be white with every other product, or something similar?

Tags:

3

Answers


  1. 0

    See :nth-child pseudo class :
    https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

    For example tr:nth-child(even) or tr:nth-child(2n)
    Represents the even rows of an HTML table: 2, 4, 6, etc.

    Login or Signup to reply.
  2. 0

    The easiest is to apply CSS in a :nth-child pseudo-class. Just put all of your styles in there.

    .item:nth-child(2n) {
  background: white; /* every other item will have a background white */
}
    Login or Signup to reply.
  3. 0

    Your best bet is to use the :nth-child pseudo-class. This can be
    done in a number of ways. If I were you, I’d go with:

    An example of the :nth-child(eve) selector in action

    .product:nth-child(even) {
    color: #fff;
    background-color: #000;
}
.product:nth-child(odd) {
    color: #000;
    background-color: #fff;
}

    One alternative to that would be:

    li:nth-child(2n) {
    color: #fff;
    background-color: #000;   
}

    Those are just two of the ways, but like I said before – you have many
    options to chose from. If you want to see some examples or learn more
    about the :nth-child pseudo-class, I suggest checking out the
    pseudo-class page on CSS Tricks

    Good Luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search