Rearrange Pictures on Website

[ashavish]

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

[Jamie]

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!

[Caroline_Schnap]

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

Thanks Jamie! :-)

[ashavish]

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.

[Caroline_Schnap]

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>

[Caroline_Schnap]

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

[Caroline_Schnap]

Someone actually helped with that 

It was me. I edited your theme :-P

[Caroline_Schnap]

I closed your divs.

[Jamie]

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

Thanks Jamie! :-)

Cool! :-)

[ashavish]

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.