Rearrange Pictures on Website

ashavish
New Member
3 0 0

Hi

I have just one design change that needs to happen to my website....

www.shopovio.com

I currently only sell 5 products and would like to have 3 listed on the first row and 2 listed on the second row.  Currently there are 4 on the first row and 1 one on the second row.  Please provide me with a quote to re-arrange the pics to 3 on top, 2 on bottom with correct spacing in between.  Thank you.

Asha

 

0 Likes
Jamie
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 152

Free. You need to change one value in your collection.liquid template. Change this line:

 

  {% tablerow product in collection.products cols: 4  %}

To this:

 

  {% tablerow product in collection.products cols: 3  %}

So basically change 4 to 3. In the admin-> theme-> theme editor

Click on collection.liquid to edit. Save your change. Done. If you would like to back up you theme first you can also download a zip of your theme from this page. It's always a good idea to do that once in a while anyway.

HTH!

 

 

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Jamie's suggestion has been applied: http://www.shopovio.com/

Thanks Jamie! :-)

0 Likes
ashavish
New Member
3 0 0

Thank you both for the response. Someone actually helped with that and then I figured out how to space the pics myself.

My last issue is....

- I want to move row one and row two pics to the right a bit...so, I guess I want to tab it.  So that it is centered.  I tried and tried to figure it out in the source code and could not.  Would you be able to tell me how to do that.  Thank you again for the response.  Asha.

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

I figured out how to space the pics myself.

By adding <div> tags without closing them.

Your HTML is malformed now:

<table class="products">
{% tablerow product in collections.frontpage.products cols: 3 limit: 12 %}
  <div>
  <div>
  <div>
    <a href="{{ product.url | within: collections.frontpage }}"><img src="{{ product.images.first | product_img_url: 'medium' }}" width="175px" alt="{{ product.title | escape }}" /><big>{{ product.title }}</big>{% if product.compare_at_price_max > product.price %}<em>was {{ product.compare_at_price_max | money }}</em>{% endif %}<strong>{{ product.price  | money }}</strong></a>
  </div>
  {% endtablerow %}
</table>

 

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

You cannot 'tab' boxes in a layout. HTML is not like word-processing.

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Someone actually helped with that 

It was me. I edited your theme :-P

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

I closed your divs.

0 Likes
Jamie
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 152

Jamie's suggestion has been applied: http://www.shopovio.com/

Thanks Jamie! :-)

Cool! :-)

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
ashavish
New Member
3 0 0

Thanks for the response.  I was able to move the pictures to be centered.  I didn't literally mean to tab it...was just using that word to explain what I was looking for.  Anway...the following is what I added in Bold and it worked.

{% if collections.frontpage.handle == "frontpage" %}

<div>

<table class="products" style="margin-left: auto; margin-right: auto;">

{% tablerow product in collections.frontpage.products cols: 3 %}

  <div style="margin-left:10px; margin-right:10px;">

If I want to add a little more space in between the pictures, my old tactic of adding <div> is not working...any suggestions now that I have the pics moved to the right...how can I add a little more space in between Pic 1 and 2.  And Pic 2 and 3?  Thanks. Asha.

0 Likes