This is my journey as an E-commerce Consultant
Posts tagged free ebay design
Basic eBay Design Series 2013 Part 6 – Image Switching with Javascript
7 days
I REALLY wanted to do a pure CSS gallery, but it was getting far to complicated. So I opted for the simplest Javascript I know.
‘onmouseover’
It is a nice a simple addition to the responsive gallery structure:
The big main image needs to be given a name:
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>
Then the thumbnail images need to swap on mouse over:
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>
This means the gallery code is:
<div id="background"> <div id="template"> <div> <div> <img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/> </div><!--switch-gallery-column switch-gallery-main--> </div><!--switch-gallery switch-gallery-row--> <div> <div> <img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> <div> <img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/highlight.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> <div> <img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/juicy%20melons.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> <div> <img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/pinup%20pink.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> </div><!--switch-gallery-crosspromo switch-gallery-row--> <h1> Mouse over to zoom images</h1> </div><!--template--> </div><!--background-->
Next, is floating boxes and then a pulled together skeleton as this series has grown a little organically and I need to strip out some bits to make it easier to re-use.
Previous Post: Basic eBay Design Series 2013 Part 6 – Shrinking Responsive Gallery
Basic eBay Design Series 2013 Part 6 – Shrinking Responsive Gallery
11 days
We shall expand the pattern and theory of the previous post and do a ‘switching image gallery’ format. In this post we will just look at the SHAPE.
The CSS:
<style>
.switch-gallery {clear: both;padding: 0px;margin: 0px; text-align:center; max-width:400px;}
.switch-gallery-main img {width:100%;height: auto;}
.switch-gallery-thumbs img {width:100%;height: auto;}
.switch-gallery-column {display:block;float:left;margin: 1% 0 1% 1.6%;}
.switch-gallery-column:first-child {margin-left: 0;}
.switch-gallery-main {width: 100%;}
.switch-gallery-thumbs {width: 23.8%;}
.switch-gallery-row:before,.switch-gallery-row:after {content:"";display:table;}
.switch-gallery-row:after {clear:both;}
</style>
The HTML:
<div class="switch-gallery switch-gallery-row"> <div class="switch-gallery-column switch-gallery-main"> <img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" /> </div><!--switch-gallery-column switch-gallery-main--> </div><!--switch-gallery switch-gallery-row--> <div class="switch-gallery switch-gallery-row"> <div class="switch-gallery-column switch-gallery-thumbs"> <img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" /> </div><!--switch-gallery-column switch-gallery-thumbs--> <div class="switch-gallery-column switch-gallery-thumbs"> <img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" /> </div><!--switch-gallery-column switch-gallery-thumbs--> <div class="switch-gallery-column switch-gallery-thumbs"> <img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" /> </div><!--switch-gallery-column switch-gallery-thumbs--> <div class="switch-gallery-column switch-gallery-thumbs"> <img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" /> </div><!--switch-gallery-column switch-gallery-thumbs--> </div><!--switch-gallery-crosspromo switch-gallery-row-->
Notice for now, we have taken this section OUT of the normal template. This is because it will REPLACE the stacking grid image section as an alternative.
Currently this only LOOKS like a gallery. It will behave like one in the next post! We will look at pure CSS image switching for eBay listings.
Look at the subtle difference in the percentage here:
.switch-gallery-thumbs {width: 23.8%;}
Changing this percentage changes how many thumbs are PER row. For example use 18.72% for 5, and 15.33% for 6 in a row.
Previous Post:Basic eBay Design Series 2013 Part 5 – Cross sell & Shrinking Grid
Basic eBay Design Series 2013 Part 5 – Cross sell & Shrinking Grid
11 days
I wanted to add some swatches to one of my listings. Swatches are just blocks of colour so I want them to SHRINK and not stack with mobile.
So I am going to give you one patterns to use for a cross sell or swatch images area.
Lets start with how it LOOKS:
Desktop:
eBay App:
Now I will give you a pattern for a 3×1 row that can be repeated.
The CSS:
.crosspromo {clear: both;padding: 0px;margin: 0px; text-align:center;}
.crosspromo img {width:60%;height: auto;}
.crosspromo p {text-align:center;}
.column {display:block;float:left;margin: 1% 0 1% 1.6%;}
.column:first-child {margin-left: 0;}
.box {width: 32.2%;}
.row:before,.row:after {content:"";display:table;}
.row:after {clear:both;}The HTML:
The HTML:
<div class="crosspromo row"> <div class="column box"> <img alt="" src="http://geishaface.co.uk//ebay/atlantic.jpg" /><p>Atlantic</p> </div><!--column box--> <div class="column box"> <img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" /><p>Highlight</p> </div><!--column box--> <div class="column box"> <img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" /><p>Juicy Melons</p> </div><!--column box--> </div><!--crosspromo grid-->
Currently my crosspromo images are only 60% width, however – you can put any percentage here depending on style AND repeat this section. This methodology can also be used to create a grid for an image gallery with one large image at the top then three thumbnails. More on this later.
So you can use this type of format for cross promotion searches on eBay, swatch sections or anything you want to ‘shrink’ and no ‘stack’ to fit.
Current Responsive Template Code and how it looks on Responsivator
Previous Post:
Responsive eBay Template – Live Example Dangleberry Music!
12 days
Dangleberry music are readers of my blog, and were VERY interested in the RESPONSIVE EBAY DESIGN series I have started and worked it into their own eBay template.
Mark from Dangleberry music thinks I should seriously consider commercialising this idea, especially with the development planned over the summer. I work WITH eBay design companies currently, and I know many read my blog. Some even started THEIR biz and development after my 2007 series about CSS and eBay store design.
So I imagine after seeing this idea, they are already planning to commercialise it. Its such a simple idea, I am shocked no one is offering it for sale ANYWAY. Watch this space, in 12 months you will see this!
Here are some bad screen shots of my series in action, helping a seller be cool on desktop, mobile AND app:
Simple but effective. No fiddling around trying to read the description, it just re-sizes. They converted their existing template they designed themselves and adapted it to be responsive.
I have one post left on this series, which is the floating policy boxes. This effect can be used not just for policy boxes but all kinds of things. It just teaches the theory really.
I am just putting together a responsive eBay description layout for a client so will reuse some of the code here to explain responsive stacking ‘boxes’ a little more.
On the commercial side of things, if you have an existing eBay design template and want me to make it responsive. Contact me. I might be able to help you depending on the design. Even if you want your description layout to be more involved and respond to mobile and the app let me know.
I DON’T do graphics, this is really not my area.
Basic eBay Design Series 2013 Part 4 – Responsive Images
I said I was keeping it simple and I am. In my template I am incorporating 4 images 400px x 400px in a 2×2 grid under my description.
In the future I might look into a pure css gallery with rollovers that is responsive too. However, for that kind of hard work I am likely to charge!
We have some additions to the CSS:
.gallery {width:90%;max-width:990px;}
.grid {float: left;width: 50%;min-width:280px;}
.pics {padding:5px;}
.pics img {width: 100%;}
Simple stuff and here is our gallery HTML code:
<div id="gallery">
<div>
<div>
<img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg"/>
</div>
</div>
<div>
<div>
<img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg" />
</div>
</div>
<div>
<div>
<img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg"/>
</div>
</div>
<div>
<div>
<img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg" />
</div>
</div>
</div><!--gallery-->
And the current state of the full code: Responsive eBay Template and you can see the differences due to screen size here: http://dfcb.github.com/Responsivator/?site=kidsontalks.com/wp-content/uploads/2013/03/iki_nail1.html - smaller screens 1 x2 grid, larger screens 2×2 grid.
If you JUST use % widths you can have the 2×2 grid shrink in the smaller screens, however I have set a min width as I want to be able to see my pictures within the template.
So what ELSE do we need in a basic listing template. Policies of course! In the next post I will add two floaty sections which will stack for mobile.
Previous post: http://kidsontalks.com/basic-ebay-design-series-2013-part-3-responsive-design-and-ebay/
Basic eBay Design Series 2013 Part 3 – Responsive design and eBay
The eBay item page is NOT normal.
If I want to take this design responsive for web I would add this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to the top and then:
/* for 480px or less */
@media screen and (max-width: 480px) {#background
{width: auto;float: none;}
in between the style tags:
Resposivator says this is OK: http://dfcb.github.com/Responsivator/?site=kidsontalks.com/wp-content/uploads/2013/03/iki1.html
However, it won’t work for eBay.
In fact at this stage to make THIS version of the design responsive all that needs to happen is a change in the CSS for the ONLY area of the design which currently has a fixed width that UPSETS smaller screens.
#background {background-image:url(http://kidsontalks.com/wp-content/uploads/2013/03/iki_background.png);background-repeat: repeat-y;background-position:top;width:100%;max-width:1000px;}
The width of this element has gone from 1000px fixed to 100% AND a max-width of 1000px.
Want proof?
This is a photo of a REAL listing on eBay UK showing the description in my eBay app, taken with my blurry tablet camera, but you get the IDEA.
The challenge is to now build on this base and keep it responsive.
This is where the eBay Template code is at currently – right click and view source.
*A note on licence for this work. I don’t mind at all if you use it for your eBay operation as a seller. However, if I see my code popping up with professional eBay design companies or similar who CHARGE for this I will name and shame. If you want this functionality you should be able to develop this YOURSELF and be BETTER than the free code I give away off the top of my head.
Previous post: http://kidsontalks.com/basic-ebay-design-series-2013-part-2-code/
