Videos

For here we're talking about the settings tab. Here are all the entities that are available to you that you can use to customize your Miva Merchant ReadyTheme. We also have a code snippet that you can use which displays either the logo if they uploaded one, or some text and a tagline if they don't have a logo. Let me jump back to the Miva Merchant Admin and let's take a look at how this works. So I'm going to get to ReadyThemes by clicking on the Menu and then clicking on ReadyThemes (updated since video). It will default to the Settings Tab. Underneath the Look and Feel we have this logo type. There's two types that come default. There's image or text. The text is useful if someone doesn't have a logo. I can change this to text and I can change this to Brennan's store, and I can either put the phone number here or tag line. Now go ahead and hit Update and then I'll come back to the front of my web site and hit Refresh. You'll see that the Logo automatically changes out to Brennan's store with my tag line underneath it. So how's this all working? Let me jump to the global header so we can see the code that's making this work. I'm just going to copy this and pull it up in my text editor. When we scroll down to this area here which controls my logo, so this code is the exact same code that was provided for us in the documentation. Let me jump back to that real quick. So all I did was take this code which test for if the logo type is text. If it is text it prints a logo name and a logo tag line and if it's not text, if it's an image, then it prints an image tag and the source is the ReadyTheme logo. That's exactly what we have here. So as a developer you want to make sure you're style and a class (style and logo name) and the logo tagline. This way if someone choose a text based logo, it actually looks correct within your theme. 

Now, in addition to a text based logo, you can also upload an image. I'll come back here to ReadyThemes. I'm going to change this to an image. I can now chose a new image through the image picker. I'm going to upload a logo I have on my computer already. I'll go ahead and select that logo and now I can hit Update. When I come back to the front of the web site and hit Refresh you'll see the text gets replaced with my logo. ReadyThemes has the ability to automatically resize an image if needed. So say I wanted to make the image really small, I can make it 50/50, click Update, then come back to the front end and hit Refresh and it shrinks it down to a very small 50x50 image. So what that means is a storeowner can upload a larger image file, it will automatically shrink it down to the image size that you need for that space. ReadyThemes also has the ability to control the global font as well as a background image and background color. Let's say I want to change the global font to Georgia, it will automatically give me a preview of what it will look like in that font and I'll change the background color to a bright color and it will show me a preview of the color that I chose. I'm going to hit update for these two things.  I can now go to the front of my store and hit Refresh and we can now see our background image has changed and our global font has changed. So how is this actually working? Well, if I view the source of this page Miva actually outputs a style on the body tag. So it will output the font family, it changes the background color and this all gets output to the head tag. Now there's an item to where this gets output to. Let me show you what that looks like. If I go to the global head tag, you'll see this item tag called ReadyTheme and the frame is CSS. This controls where that body tag gets output. Now, if you don't need to make these changes I can get rid of them and change it back to default, go ahead and hit update, and I can Refresh this and now it's back to normal. Now you'll see in the source the default background color and the default font. There are other options as well; choose the background repeat, background horizontal position and the background vertical position. Those are useful if you have a background image you're trying to position. 

If we scroll down a little more let's talk about the social icons. So, there's a checkbox here that enables or disables them. So this box needs to be checked if you want to use them. On our site with all the ReadyTheme documentation, you'll see all the entities that are available that you could use to display the icon link. Right now there's a fixed number of social media links that you'll see here. We've covered the top ones. In the future we'll update this to allow you to add new ones as you need. What you do here is put in your link to your social media profile. If you don't have some of the social media accounts, just delete the address that's currently in the field and they won't show up on your Homepage. This is a great way to allow the store owner to control their social media links. 

This third party social sharing code is for things like "Share This" or "Add This." It's really just javascript that you drop in and it will add some nice functionality, usually to the product pages that allow customers to share those products across the different social media networks. Now again, there's a box you must check to enable it. For this field you determine where you want this code to display. So if we jump back to our ReadyThemes documentation and we scroll down a bit more, here are the two items tags that are available. The first one is called Third Party Sharing and the second one is called Trust Symbol. So both of these will output whatever code the storeowner puts in either of these two boxes where ever you want them to display.  The social sharing code will usually go on the Product Page or it may go in the head tag with some javascript. The SSL Site seal will usually go in the global footer and may go in the global header, it just all depends on where you want it to display. You want to place that item tag, even though it may not be used, you want that item tag to be within your theme so if a customer does use it, it will display correctly.