Big Continue Shopping Button

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Hi I just added the Big Shopping Button CSS from ECWID at this link
http://help.ecwid.com/customer/portal/articles/1149613-how-to-change-your-big-continue-shopping-butt...

to my online store for quantumcode.org

The path to the new button is:&nbsp; <br>http://quantumcode.org/resources/continue-shopping.jpg<br>
its there in the file manager and the site is published but it hasn't worked.

Could somebody please check this out for me?

Thanks and Regards,
Tulsi
Photo of Tulsi Mckinloch

Tulsi Mckinloch

  • 12 Posts
  • 0 Reply Likes

Posted 3 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Tulsi,

It looks as if the file-type is wrong. The image type is a .png file rather than a .jpg file. Just change the filetype in the path to:

http://quantumcode.org/resources/continue-shopping.png
(Edited)
Photo of Tulsi Mckinloch

Tulsi Mckinloch

  • 12 Posts
  • 0 Reply Likes
Thanks Gop,

Unfortunately this solution didn't work.
I have 2 continue-shopping images in file manager.
1 is .jpg and 1 is .png

Thanks for your suggestion,
Would love to hear from you again if you have any other ideas

Here is the html

/* The "Continue Shopping" button in up state */
div.ecwid-ContinueShoppingButton-up, div.ecwid-ContinueShoppingButton-up-hovering, div.ecwid-ContinueShoppingButton-ie6-up, div.ecwid-ContinueShoppingButton-ie6-up-hovering {
background: transparent url http://quantumcode.org/resources/continue-shopping.png no-repeat top center;
}
/* The "Continue Shopping" button in down state */
div.ecwid-ContinueShoppingButton-down, div.ecwid-ContinueShoppingButton-down-hovering, div.ecwid-ContinueShoppingButton-ie6-down, div.ecwid-ContinueShoppingButton-ie6-down-hovering {
background: transparent url http://quantumcode.org/resources/continue-shopping.png no-repeat bottom center;
}
Photo of Tulsi Mckinloch

Tulsi Mckinloch

  • 12 Posts
  • 0 Reply Likes
I just noticed the formating was wrong.  where it says continue-shopping it should say
continue_shopping with an underscore.

So I have changed the html but still no success.  The button doesn't show up, just the old one....
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It seems you haven't published your site to quantum.org and if so that means the URL is not reachable.

You can either publish your site or host the image on another site so that it can be accessed.

Another possible option is to use a relative address:

/* The "Continue Shopping" button in up state */
div.ecwid-ContinueShoppingButton-up, div.ecwid-ContinueShoppingButton-up-hovering, div.ecwid-ContinueShoppingButton-ie6-up, div.ecwid-ContinueShoppingButton-ie6-up-hovering {
background: transparent url(resources/continue_shopping.png) no-repeat top center;
}
/* The "Continue Shopping" button in down state */
div.ecwid-ContinueShoppingButton-down, div.ecwid-ContinueShoppingButton-down-hovering, div.ecwid-ContinueShoppingButton-ie6-down, div.ecwid-ContinueShoppingButton-ie6-down-hovering {
background: transparent url (resources/continue_shopping.png) no-repeat bottom center;
}
(Edited)
Photo of Tulsi Mckinloch

Tulsi Mckinloch

  • 12 Posts
  • 0 Reply Likes
Thanks Gop,
Yes it seems strange but actually the site is published to
quantumcode.org
This URL shows the button png
<a href="http://quantumcode.org/resources/continue_shopping.png" rel="nofollow" target="_blank">http://quantumcode.org/resources/continue_shopping.png</a><br><br>but it still doesnt seem to do anything<br>Any suggestions are most valued<br>Regards<br>Tulsi<br>
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I think then that your syntax is incorrect. The brackets have been omitted

/* The "Continue Shopping" button in up state */
div.ecwid-ContinueShoppingButton-up, div.ecwid-ContinueShoppingButton-up-hovering, div.ecwid-ContinueShoppingButton-ie6-up, div.ecwid-ContinueShoppingButton-ie6-up-hovering {
background: transparent url(http://quantum.org/resources/continue_shopping.png) no-repeat top center;
}
/* The "Continue Shopping" button in down state */
div.ecwid-ContinueShoppingButton-down, div.ecwid-ContinueShoppingButton-down-hovering, div.ecwid-ContinueShoppingButton-ie6-down, div.ecwid-ContinueShoppingButton-ie6-down-hovering {
background: transparent url (http://quantum.org/resources/continue_shopping.png) no-repeat bottom center;
}
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for all your help on this, Gop.
Photo of Tulsi Mckinloch

Tulsi Mckinloch

  • 12 Posts
  • 0 Reply Likes
Hi again,
Here is the final solution provided by Rodvan at Yola support......

The button your are trying to change you cannot use your own image for. This specific button can only be change with CSS code. 

Here is a code I used to change this (You can change the colors etc.):

 button.ecwid-productBrowser-

cart-continueShoppingButton {height: 30px; background: blue !important; border-radius: 5px !Important; color: white !important;}

Good luck
Tulsi

Photo of Jen

Jen

  • 206 Posts
  • 24 Reply Likes
Hello Tulsi,

I see you have sent a follow up question to Rodvan, a CSS specialist, who will reply next time he is online.

Thanks for your patience!