Results 1 to 12 of 12

Thread: Add to Basket and Preorder button colour

  1. #1

    Default Add to Basket and Preorder button colour

    HI all

    Can't believe how good Bluepark is compared to EKM. I finally feel I have full control over my site, and can do everything I need to do. Only a shame I never found it a couple of years ago!!

    Being fussy now, but does anyone know if its possible to change the colour of the preorder button, so that it is different to the colour of the add to basket button.

    About 70-80% of my sales are preorder, and it would be great if the buy buttons had a very different look about them. It is possible to change one without the other changing as well

    Cheers for any help

    Wayne
    www.staractionfigures.co.uk

  2. #2
    Join Date
    Dec 2011
    Posts
    401

    Default

    you need to replace the preorder.gif file in the template and change it to one of a different colour (if you can't do graphics have a look through the the other templates and find one you like and use that)
    Gerard

    http://www.caressa.co.uk


    10% discount for Blueparkers - use couponcode bluepark13

  3. #3
    Join Date
    Jan 2012
    Posts
    965

    Default

    This is the same question I have!

    But where to I find the existing preorder.gif file (not inthe templates directory). I tried taking a screenshot, changing the colour, saving it, and uploading it but the size was wrong. I think it's something to do with the browserscaling or whatever.

    Any idea where to find the .gif file? or is there a different way to do it now (I notice the thread is 5 years old, things may have changed!)

    I'm using the tools-r-us template

    (www.nerfherder.co.uk)

  4. #4
    Join Date
    Aug 2016
    Posts
    230

    Default

    Quote Originally Posted by LabelKing View Post
    Any idea where to find the .gif file? or is there a different way to do it now (I notice the thread is 5 years old, things may have changed!)
    Things must have changed since then as the 'add to basket' and 'pre-order' buttons no longer use images - instead they are now made purely with HTML & CSS.

    Unfortunately as they both share the same HTML class identifier you can't target each button individually, so you wouldn't be able to change the colour of one without also changing the colour of the other.


    Mike

  5. #5
    Join Date
    Jan 2012
    Posts
    965

    Default

    But there is an option to replace the button with a gif, so I guess I just need to figure out the size of the button, which is easier said than done. I don't know if it's win 10 or the latest version of the browsers, but the old trick of taking a screenshot, pasting it into mspaint to find the size no longer seems to work. Even with the browser zoom set 100% when I do this and load the button into the template, it's much bigger than the button it replaces...?

  6. #6
    Join Date
    Mar 2011
    Location
    Devon
    Posts
    239

    Default

    Using Inspect Element in Firefox suggests the Small Add to Basket button is 120 x 30 but I'm not sure if that's a responsive size, I haven't looked at the template you've used.

    In the template editor, under the forms tab, does it give you the default sizes for the standard and small size buttons? Hopefully it's not just 'auto', which is one of the dimensions in a different template I just looked at
    Lisa

    www.digitalcolourservices.co.uk

    A top quality Professional Print Service for Artists and Photographers

    • Giclιe Printing • Canvas Printing • Custom Greetings Cards • Envelopes • Cellophanes • Invitations • Photo Gifts etc.

  7. #7
    Join Date
    Aug 2016
    Posts
    230

    Default

    I've just had a quick look at this on your site and Lisa is right - the button size you'll need to create is 120px (wide) x 20px (deep) - just to confirm these buttons are of fixed size/non-responsive.

    However, your buttons at the moment actually appear wider than this because of the the quantity field attached to it. Be aware though that with this current set-up uploading the new button will render it non-clickable until you change the option to move the quantity field ABOVE the button. Doing this will then make the 'add to basket' button a true 120px x 20px size to match the new 'pre-order' button you've created.

    Another thing to be aware of for the same reason I previously mentioned (that the 'add to basket' button and 'pre-order' button share the same HTML class identifier) is that you won't be able to add any fancy CSS effects on mouse hover - it will just remain as is.


    Mike

  8. #8
    Join Date
    Jan 2012
    Posts
    965

    Default

    Quote Originally Posted by Lisa View Post
    Using Inspect Element in Firefox suggests the Small Add to Basket button is 120 x 30 but I'm not sure if that's a responsive size, I haven't looked at the template you've used.

    Thanks, 120 x 30 is the correct size.

    Quote Originally Posted by Mikey View Post
    However, your buttons at the moment actually appear wider than this because of the the quantity field attached to it. Be aware though that with this current set-up uploading the new button will render it non-clickable until you change the option to move the quantity field ABOVE the button. Doing this will then make the 'add to basket' button a true 120px x 20px size to match the new 'pre-order' button you've created.

    This is somewhat problematic. On the product page this is not an issue as the QTY is already above the button and the new button works. On the catalogue page though they are side by side, except with the uploaded button the qty doesn't display and the button doesn't work.

    I couldn't find an option to move the QTY above the button? All I could find in config was an option to remove the QTY altogether. Except that only removes it from the (working) product page, but not the (non-working) catalog page!

    So I'm not really sure how to split the QTY and the PREORDER button? I looked in the custom html (Product list cell (multi-column)) but couldn't find a way to split them on a preorder item...?

    Quote Originally Posted by Mikey View Post
    Another thing to be aware of for the same reason I previously mentioned (that the 'add to basket' button and 'pre-order' button share the same HTML class identifier) is that you won't be able to add any fancy CSS effects on mouse hover - it will just remain as is.
    Yes the mouse over doesn't change the colour as with the regular button.

  9. #9
    Join Date
    Jan 2012
    Posts
    965

  10. #10
    Join Date
    Aug 2016
    Posts
    230

    Default

    Quote Originally Posted by LabelKing View Post
    I couldn't find an option to move the QTY above the button? All I could find in config was an option to remove the QTY altogether. Except that only removes it from the (working) product page, but not the (non-working) catalog page!
    Give this a try...

    Go to 'Template Editor', click on the 'Forms' tab and then scroll down to the section 'Small add to basket button size:' Now look for 'Enhance quantity field:' and select 'Yes, above button' - remember to save afterwards.


    Mike

  11. #11
    Join Date
    Aug 2016
    Posts
    230

    Default

    Also, it would appear that changing the button from code to an image has also changed the HTML class, so you might be able to get a basic hover effect after all on the 'Preorder' button on the catalogue page.

    Try adding the following code to the additional CSS field:

    Code:
    .action { transition: 0.10s ease-in-out; }
    
    
    .action:hover { opacity: 0.7; }

  12. #12
    Join Date
    Jan 2012
    Posts
    965

    Default

    That's great - thanks for all your help on this. On our new website there is a lot of pre-order stuff so it's good to make then stand out a bit with different coloured buttons.

    Hopefully this will also help anyone who wants to do the same thing.

Similar Threads

  1. Move add to basket button
    By Deefer in forum Bluepark Technical Discussion
    Replies: 0
    Last Post: 18-05-2013, 19:34
  2. 'Add To Basket' double button and/or no hover state
    By Postcard in forum Bluepark Technical Discussion
    Replies: 0
    Last Post: 10-01-2013, 20:51
  3. Free products (and the missing Add to Basket button)
    By Stevo in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 01-05-2012, 20:09
  4. Add To Basket button alignment - enhancement request?
    By petad in forum Bluepark Technical Discussion
    Replies: 3
    Last Post: 15-02-2010, 22:43
  5. Adding ADD TO BASKET BUTTON to Special Offers Section
    By Aley in forum Bluepark Technical Discussion
    Replies: 0
    Last Post: 12-05-2009, 12:23

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About us

Bluepark's ecommerce software is developed, hosted and supported exclusively by ourselves, here in the UK, and has been so since the company was initially formed in 2004. Your brand new online shop will be hosted securely on our fast and reliable server network, using a domain name of your choice, providing the ability to build and maintain your ecommerce website, and manage your orders, from any location via your own secure online Administration Console.

A Bluepark ecommerce site is the perfect tool for selling online, whether you're selling physical products, digital downloads or services. You'll be in good company with over 1,000 UK customers who also form a friendly and helpful online community, further strengthening our highly acclaimed support network.

Find us on...