Can you help with a very basic Big Cartel (www.bigcartel.com) CSS design question? I don't have money to hire a designer and just need to make one small change.
The site URL is www.getupmerch.com and the change i want to make is on the product pages.
I'm trying to move the 'add to cart' button and product size selector dropdown menu. I'd like to move them so they sit under the product image. So it will go in this order, with a space in between each one and aligned to the middle of the picture -
Product Image Dropdown size selector Add to cart button
An example of one of the product pages is - http://www.getupmerch.com/product/michael-jackson-werewolf-t-shirt
Any help or advice would be greatly appreciated as I can't afford a designer yet.
Thanks a lot,
Ok, just move the
product-form into the
product-images container, then set the
margin of the
product-addtocart <button> to
15px auto 0
The drop-down is the same width as the image and nav tools so it lines up perfectly without modifying the CSS. The mark-up should look like this:
<div id="product-images"> <a id="product-image" href="http://cache0.bigcartel.com/product_images/3300535/eaglesnake-package.gif"><img id="product-img" src="http://cache0.bigcartel.com/product_images/3300535/300.gif" alt="Image of As I Lay Dying - Eagle Snake (T-Shirt)"/><span class="stilt"><span class="icon_zoom"/></span></a> <div class="images-nav"> <ul class="images-list" id="images-list"> <li class="image-1"><a rel="nozoom" href="http://cache0.bigcartel.com/product_images/3300587/300.gif" title="View image 1"><span>1</span></a></li><li class="image-2"><a rel="nozoom" href="http://cache0.bigcartel.com/product_images/3300527/300.gif" title="View image 2"><span>2</span></a></li><li class="image-3"><a rel="nozoom" href="http://cache0.bigcartel.com/product_images/3300535/300.gif" title="View image 3"><span>3</span></a></li> </ul> <div class="images-prev"><a href="#" onclick="Store.prevImage(); return false;" title="View previous image"><span>Previous</span></a></div> <div class="images-next"><a href="#" onclick="Store.nextImage(); return false;" title="View next image"><span>Next</span></a></div> </div> <form id="product-form" method="post" action="/cart"> <div id="product-options" class="options"> <select id="option" name="cart[add][id]"><option value="1617924">Small (92cm to 97cm)</option><option value="1617925">Medium (97cm to 102cm)</option><option value="1617926">Large (102cm to 107cm)</option></select> </div> <button id="product-addtocart" name="submit" type="submit"><span>Add to cart</span></button> </form> </div>
I would suggest moving the product-form into the product-images div rather than where it is (product-details div). Insert the form after the anchor tag, where the image resides, and you should be able to do anything you want with css to position it under the product image.