TimW 0

Hi Guys...

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,

Tim

2 answers

danwellman 5600
3
points

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>
Answered over 7 years ago by danwellman
  • I suppose I should refresh the page to see if someone answered the question while I was eating dinner. +1 @danwellman TailorDMI over 7 years ago
  • Hey thanks for your reply. I think there is a CSS template that needs changing instead of each product page individually. Could I email is to you for you to take a look at please? It would be a huge help and much appreciated. My email is timothy_wetton at yahoo.co.uk Thanks so much in advance? TimW over 7 years ago
0
points

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.

Answered over 7 years ago by TailorDMI
  • Hey thanks for your reply. I think there is a CSS template that needs changing instead of each product page individually. Could I email is to you for you to take a look at please? It would be a huge help and much appreciated. My email is timothy_wetton at yahoo.co.uk TimW over 7 years ago