How To Remove Product Images

WELCOME

Welcome back to the User Experience podcast, where we've been learning all sorts of Page Design techniques to dress up your MV.

This week you'll learn how to make your Products feel like Landing Pages or Sales Pages, by hiding the product image at the top of the Page.

This is a global setting for your main MV marketplace, not for a single Page.

But don't worry, you'll see how to pick and choose which Products you apply it to and which ones get left alone, all in this short episode!

If you find you would like to have a little more help... please go directly to Juci's "Summer of CSS Magic" program.

LEARN FROM A PRO

For page design help in your own MV site, please visit our friend Juci's program "Summer of CSS Magic" -- where you can get individual help making your MV shine!

CODE

Copy the following short piece of CSS code and paste it in at Settings > General > Advanced > CSS.  Please remember to make a backup copy of any existing code before you attempt to change your site CSS! (see screenshot below)

AUDIO

EPISODE LINKS

How To Build A Sales Page Using MV's Page Feature

List Of Past CSS Design Episodes

Summer Of CSS Magic Program With Juci

TRANSCRIPT

Hey, I'm Steve Knots. Welcome back to the User Experience podcast. This is the middle of our summer CSS page design series, and today, I'm going to show you how to remove the product image off of your product display page. For example, it looks like this, I just clicked into the basic mixing course, what I want is people to click in and see a video right up top, a short piece of text and a button just like guess what a landing page.

But the product image up top kind of gets in the way, you know, when I click into other products, for example, how to EQ your tracks. This one, it sort of looks okay, you'll notice that the product title is up top, I've got a description that's short with a button. And here the modules are laid out on the right side. So it looks like a typical online course format, where you can see it's sort of like a sales page and a teaser all in the same place. That's not what I want to do every single time.

On the basic mixing course I have the product setup as the module display on the bottom underneath. So it really looks like that big clean sales page look, or you could call it a landing page. And the problem is we have this big product image and I don't need that image on this page.

So today we are going to see how to remove that image from the display. And you're going to get a simple piece of CSS code. This time, it's going to go into your MemberVault Global Settings, not your individual page settings because remember, we are working in the MemberVault marketplace with actual products, not in the page display pace, place with pages.

And just for a complete illustration. In this tab of courses mix detection.com/mixing This is a freestanding page that I built to be a sales page up top, we've got the product title, video, short blurb Sign Up button. And then it goes down through more of a sales page format.

And there is a tutorial on how I built this page, which you can watch sometime else. I'll link to that in the product notes, or this blog post notes. And we're going to look at how to remove the product image and just in case you forgot, I want to point you to the main library of CSS goodies, which is on the vipmembervault.com blog. You can find it in the blog section at courses that vipmembervault.com.

This is the library of goodies where you can find links to all of the episodes from our summer CSS page design series, adding custom buttons, drop down menus, a background box, removing the page title and footer, setting the page width.

And today we're going to work on the product image. Now if this is a little bit beyond your coding skills, don't worry, you don't have to do it alone, you can click this link for the summer of CSS magic with our friend Juci at Code & Glitter, who has a whole guided program where she takes you through the process of applying these edits in your membervault site to customize your branding, colors, buttons, text, everything you want to make look right for your site, she can help you do that with her paid program, summer of CSS magic, and it is absolutely worth signing up with her. (Look how good this page looks.)

Because number one, she knows more than me, she's a real programming expert. Number two, she's super friendly and easy to work with. And number three, the price of this course is so low compared to hiring a person to do your code for you, it's absolutely worth learning to do a few edits yourself.

So let's jump in and find out how do we remove this product image from the top of this page to get a nice clean landing page type look. Notice that today I'm previewing in an incognito tab, I want to make sure that what I see is really what my people are going to see, not the admin Preview from my membervault.

So here we are in my main member vault site, we're gonna go to Settings, General, General tab, now advanced settings. And we get the custom CSS field. You can see I got a bunch of stuff in here already. And you know, blah, blah, blah, blah. Here's oh, here's one that's interesting. MemberVault content max width 1000 pixels.

So if you remember from last week's episode, we talked about page width. Here I have my global page width set to 1000 pixels, what we're going to do is add some code in this global setting that's going to affect everything on the member vault site, which means what do I do first, I make a backup, command a select all Ctrl C copy. And you'll notice that here in a text document. The document is called MemberVault global CSS with today's date. And here is everything that's in my CSS window.

So just in case something goes wrong, and I have to reconstruct all this stuff, do I have to go find all my programming code and rebuild it? No, I do not. Do I have to go learn CSS to learn how to rebuild it? No, I do not. I have a backup. So what we're going to do today is take this one little snippet. And this document is called CSS podcast, remove product image. So you're seeing my real show notes. This piece of code MemberVault Page product, I'm gonna copy this, go back to the MV admin and select Enter, make a new line and paste. Now again, I don't know everything there is to know about programming. In fact, I don't know very much at all. But I can tell you from what I see in the code, it says mv page product, okay. There's something about an image with that's kind of telling you the location The image and the command is display none.

So I don't really understand the CSS structure, but it's enough for me to tell. Okay, we're looking at the page display. And we're setting something to be none. I pasted that in there. Click outside the frame to save. And let's go and refresh our page. And what happens? Well, it's gone. Am I in the right place? I am. Let's go back out to the main marketplace.

One more time, click into basic mixing. Learn the mix techniques to make your track sound pro new visitor comes in, oh, they get a video they get to meet me, they get to know me like me, trust me the KLT that helps people click the button and buy your product. And the big product header is not in the way anymore! So people can click right in and go directly to the video, get the message be inspired, feel excited, they say yes, this is for me, that's the result I want, I'm going to click the button. And again, we have the modules laid out in a grid below. And if they want to find out more, they can click into the teaser module.

Let's just make sure I know what's happening here. Let's click into another product, how to EQ your tracks. Oh, well. Now the product image has gone on here, which shows that we made a Global Edit to all the products in our MemberVault site. And one more time for the people in the back. We went to main membervault. This is my my main membervault site. I went to settings. General, let's minimize Account Settings minimize social sharing, expand Advanced Settings, we're in the Custom CSS box.

First I did a backup. Then at the bottom I pasted in my new piece of code right here. And that removed the product headers from all of the products that I offer. Well, that's cool. But you know, and there are situations where you might want to do that if you're building from from scratch, and you know that every product is going to look the same. You want them all to have a video up top and no product images.

But in my situation, look at this how to EQ your tracks. This is laid out differently. I have the modules on the right, there is text and a button call to action at the top. But I kind of liked having the product image because it just made a continuous path. So some people are very visual, you know, they click on oh, here's a product image, how to EQ your tracks, it looks

like this with these pictures. When I click in there, what if I want to see that picture? Well, fortunately, there is a way that we can remove the product image only for one course at a time, like the basic mixing course. So let's go back out to our MV code. And this is kind of fun. It's really It's fun how easy this is, you find the CSS that you paste it in. You find your product ID number, you type underscore, ID number. Save.

Now we go back out here, let's refresh our incognito tab, click in the basic mixing. Okay, that's good. There is no product image, we go right to the video, back to the marketplace, click on each of your tracks, ah, the product images back, check that out. So when people click into this page, they get the whole picture, there's the cover, there's a screenshot of what they see inside the course the actual product, quick blurb about the goal, the button. And then right here on the side, we have the modules. And then if you keep scrolling down, there's another button.

So this is like a hybrid of a membervault page with a sales page. And the next update here for me personally, just so you know, is going to be a teaser module up top up top, that is going to get updated with some new hands on activities, which I love to give people.

So the purpose of this exercise is to show you that if you want to set up only one of your products with a wide full width, landing page type of feel, you can do that and remove the product image from only one product at a time. And leave the other ones in place with whatever type display you want to do. You can have modules on the side for one product and at the bottom for another product. Here's my basic mixing course one last time, click in directly up top video and modules down below.

So this is basically how to make a product in your marketplace look and feel like a sales page without building a whole external page. Why is that important? Well, an external pages a different URL, and you need to send people to a different URL. And once they're there, they can't really make use of the membervault "Binge & Buy" marketplace. And a lot of people what they want is people is for the visitors to come into the main site and see all the product offers, maybe they want to come in.

Maybe you want your people first to come into your freebie. Like I have my FREE presets. And while they're there you want them to find out, oh there are these other really cool courses that start with the word how to and take me to a result I want... So there are some really big advantages to using the promo text built into a product to make it look like a sales page like this without taking people to a different page.

And just for contrast, once I'm on here, courses.mixitecture.com/mixing This is a standalone page note. If there are no modules on the side, we go all the way to the bottom. There are no modules at the bottom. It's just the footer links. This looks like kind of like a one page website with no other links to any other teaser modules, products, courses, anything else. Now, if people are, you know, really going to dig, they could click on the home button, maybe they'll get back there on their own.

But you don't want people to have to look for your stuff. And if they don't happen to know about this little hamburger menu on the top left to expand your other products and stuff, they might think that you only offer one course in one freestanding universe with nothing else connected to it. So they might not actually make it to the rest of your memory Walton, that could be an option. That's not the best for you and your business.

So what I'm doing is removing the product image only from this one product to make it look super clean, lead people to the result they want and preserve the options for myself to have other products where they do see the image up top. And they get the modules, I can see clearly that free presets should have the image removed. I wonder if I could remove it from only two products and not the other ones. ID 65. What if the free presets.. is it 91, I believe? How did I know that? Let's check. A main marketplace.

When you click into a course, you'll see this slug up top, it says products slash courses slash view slash 91. That number at the end of this URL is your product ID number that you also see in your list of products, it's worthwhile to be aware of that ID number because that can just help you make sure you're looking at the right product. And in this case, it was useful and look what just happened, I removed the product image off the top of here. So when they click into this product, they get the video up top just like I want. Same kind of format. brief description call to action button modules at the bottom. And that's what you do. So to achieve that effect, that was kind of fun. I didn't plan on doing this in this podcast.

But now I have two copies of the same piece of code. One is for product 65. One is for product 91. That let me remove the product image only on these two products, and the rest of them stayed in place. So how to EQ your tracks. We got the product image back to the marketplace basic mixing product images gone back to me and marketplace. Three presets, product damage has gone back to main marketplace. So this is so much fun. For me. I'm learning new things you can see on every podcast, I'm making mistakes, fixing them live on the fly learning new things. Our whole ethic at membervault is about being open and transparent and honest, telling you what's going on. If we make a mistake. It's like oh, that that happened. Let's all work together and solve it. And giving you the tools to play with to update your membervault and be successful attracting your audience, giving them what they need, and making a place where they can pay you for it, which is that's how easy it is.

So thank you so much for watching. Let me remind you one more time, the CSS library of goodies is here on the MemberVault blog. And you can find all these episodes in the episode list. I'm about to add the link to this episode today.

And if you want a little more help, click into our friend Juci's product to the summer of CSS magic, there's the link. And it looks like this. And this is where you can sign up and learn from a real programming code, programming Pro. How to do even more with your CSS to help you with your colors and your branding and your MemberVault to make it look absolutely sparkly and amazing.

And then go farther along with your business. So how do you like this podcast? Drop a comment? Let me know. And if you have any questions, you can always find us in the Facebook collab or with chat support in your account. And now I'm going to click the Finish button. Thanks for watching everybody. I'll see you next week.