Can you change the 'Add To Cart' image on your online store?

  • 1
  • Question
  • Updated 7 years ago
Hi Guys.

I was just wondering if you could change the 'Add To Cart' image, as the default image doesn't suit my website at all.

Also, can you change the font and font colour? As I was abit disappointing how you cannot change the background colour etc, other than that the online store feature is a great addition to Yola.

Thanks.
Photo of TrackClash

TrackClash

  • 3 Posts
  • 0 Reply Likes
  • unsure

Posted 7 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello TrackClash

The pre-defined schemes of Yola Online Store are designed to fit well in most sites, but if you'd still like to change some aspects of the design, you will be able to make most of those changes by customizing the Yola Online Store CSS.

You can pick from pre-defined schemes or create your custom version. Any style you specify will override the default one.

In order to create your custom scheme:
  1. Log into My Yola.

  2. Click on Online Store in the left-hand menu.

  3. Click on Advanced Options at the bottom right.

  4. Click on System Settings, and then on Design to open the Custom CSS Themes.

  5. Click on New CSS Theme. You can also edit a default scheme by duplicating it.

  6. Copy the classes you want to override from the bottom window to upper one, e.g. for font colour and background colour. Important: Please don't copy the whole base theme to a custom one – you should copy only the rules that you want to change.

  7. Change the classes as you wish. You will find the codes for the font colour and background colour right at the beginning of the CSS (look for "color" and "background-color").

  8. Name and activate your scheme.

  9. Save your changes.

  10. Reload the customer interface page if it's open in your browser to see the changes.

To change the add to cart image, you can go to these two spots:
div.ecwid-minicart {

background: transparent url(icons/minicart.png) no-repeat;
...
}

You will need to upload a new cart image to your Yola File Manager, and then replace the URL by yours, e.g.
div.ecwid-minicart {

background: transparent url(http://mydomain.com/resources/mycartpicture.png) no-repeat;
...
}

Or change the font and font colour of the add to cart button at this spot further down:
span.ecwid-minicart-label-text {

font: 11px/13px helvetica, arial, verdana, sans-serif;
color: #b4b8bc;
}

For the codes of web-friendly colours please see our HTML101 site: HTML colour code chart.

Last, but not least: As you can see from the CSS, the background colour of your Yola Online Store is set to "transparent" by default. If you place your Online Store Widget on a Custom Panel Widget on a page in your Yola Sitebuilder, you will be able to give your Store the desired background colour as well. Please see this test page as an example: Chill Online Store.
Photo of TrackClash

TrackClash

  • 3 Posts
  • 0 Reply Likes
Hi Stefan,

When I log into Yola and click on 'Online Store' in the left hand menu bar. All I see in the bottom right is "Next Payment" and "Powered by e c w i d"

Am I in the wrong place?

Thanks alot, Greg.
Photo of TrackClash

TrackClash

  • 3 Posts
  • 0 Reply Likes
Don't worry I have it, thanks man!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Ok, great to hear you found it. Let us know if you need more assistance.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The Add to Bag button is actually a sprite so it needs two images to function properly. If you only have the one you may end up with a blank image when you click it.



You can modify the colours with an image editing program or you can create your own