Product Display Grid Help

Solved
Naked-Pinecone
New Member
5 0 0

Hello, we are using the Venture theme but would really like to display our products like that in the image below. We particularly like the 'grid' layout, with the border (as we have many images of different colour backgrounds so showing the border lines would work better for us) and having the product title and pricing under the image but still within the box outline. We are still beginners, so any simple instructions would be very much appreciated! Thanks in advance!

Screenshot 2019-08-26 at 14.23.19.png

0 Likes
michaelPeterson
Explorer
51 6 37

This is an accepted solution.

Hey take a look at this test collection I have for the venture theme https://teststoremjp.myshopify.com/collections/all let me know if that is what you are looking for. If so there is some code you would have to change to get it to look like that I provided the two code snippets below:

 

This change needs to be made in your collection.liquid file.

{%-comment-%}
old code
{%-endcomment-%}

<div class="grid__item small--one-half medium-up--one-fifth">
	{% include 'product-card', product: product %}
</div>

<div class="grid__item small--one-half medium-up--one-fifth">
<a href="/admin/products" class="product-card">
  <div class="product-card__image-container">
    <div class="product-card__image-wrapper">
      <div class="product-card__image">
        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    </div>
  </div>
  <div class="product-card__info">
    <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
    <div class="product-card__price">
      $19.99
    </div>
  </div>
  <div class="product-card__overlay">
    {% assign view_string_length = 'products.product.view' | t | size %}
    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
  </div>
</a>
</div>

{%-comment-%}
new code
all I did was replace the class that said medium-up--one-fifth
with medium-up--one-quarter these classes are found in the div element
{%-endcomment-%}

<div class="grid__item small--one-half medium-up--one-quarter">
	{% include 'product-card', product: product %}
</div>

<div class="grid__item small--one-half medium-up--one-quarter">
<a href="/admin/products" class="product-card">
  <div class="product-card__image-container">
    <div class="product-card__image-wrapper">
      <div class="product-card__image">
        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    </div>
  </div>
  <div class="product-card__info">
    <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
    <div class="product-card__price">
      $19.99
    </div>
  </div>
  <div class="product-card__overlay">
    {% assign view_string_length = 'products.product.view' | t | size %}
    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
  </div>
</a>
</div>

This initial change may look like a lot but all I did was change the lines that said medium-up--one-fifth to medium-up--one-quarter, the weird thing about the venture theme is that built in it has the ability to do all sorts of different grid sizes, but for whatever reason if you want to change them you have to go into the code and change them. If you would like the ability to easily change the grid number of columns let me know and I can setup a setting in your Shopify theme for that. Keep in mind like I said you need only change the lines I mentioned you don't need to copy and paste this whole chunk.

 

The second change needs to be done in your theme.scss.liquid file

/*old code*/
.grid--no-gutters & {
   border-left-width: 1px;
}
/*new code */
.grid--no-gutters & {
   border-left-width: 1px;
   margin:10px;
}

For this change all I did was add the line that says margin:10px, this just tells the browser that anything that is in the grid , in this case the product cards should have 10px of space around them. Hope that helps any questions let me know!

0 Likes
Naked-Pinecone
New Member
5 0 0

Hi Michael, that's really helpful thank you! I've edited the first section of code in the collection.liquid file but can't find where the second bit is in the theme.scss.liquid file, do you know which heading it was under?

 

Thanks so much!

0 Likes
michaelPeterson
Explorer
51 6 37

This is an accepted solution.

No problem! My bad I just noticed that the theme has two places for the grid--no-gutters class. Yes this is what section it should be under

/*================ Product cards ================*/
.product-card {
  position: relative;
  display: block;
  background-color: $color-content;
  text-align: center;
  padding: $product-image-padding / 2;
  border-color: $color-body;
  border-style: solid;
  border-width: 0 0 1px;
  color: $color-body-text;
  z-index: $z-index-product-card;
	/*edit mjp to 10px*/
  .grid--no-gutters & {
    border-left-width: 1px;
    margin:10px;
  }

In most Shopify themes the product displays in the collections/search are called product cards, so if there is anything you ever any styles you want to change with them you will be looking in that theme.scss.liquid file for anything that says product cards. If you ever want to change where things are displayed with the product cards that would be in your product-card.liquid file in the snippets section. Hope that helps any other questions let me know!

0 Likes
Naked-Pinecone
New Member
5 0 0

Thank you very much, that's so helpful! 

0 Likes
louellaboutique
Tourist
10 0 4

Do you happen to know a code that will do this for the boundless theme?

Thank you

0 Likes