Questions about formatting product display for Burst theme

[juliacreinhart]

I'm using the Burst theme as the basis for the online store for one of my clients, and they have their heart set to make the product display look close to one of their competitors pages, which you can see here: http://www.Thredup.com/items.

The part that seems important is that there is a frame around the image, and a second frame around the product price with a slight background color. I've tried setting frames around images, but can't seem to find the place in the css or the page layout where to set these frames. I've managed to frame the entire product, the result of which you can see here: http://swanzshop.com/store/page46.html

Any suggestions on how I could get this done?

If you need to see my code, let me know which parts.

Thanks!

[juliacreinhart]

another part that seems important is to have the discount percentage displayed when a product is on sale. is there a way to have that percentage calculated and if so how would I code that and where would that code go?

Thanks!!

[Jim]

There is no option to display a discount percentage when a product is on sale.

For the sale price itself , you can display the sale price by entering a value for the on sale price on Products > Edit Product Info and checking the box On Sale Toggle: on Products > Edit Product layout. Most of the templates are designed to automatically display both the sale and regular price if the options are set.

It might be possible to use some javascript to figure the discount rate and display it but that isn't built into ShopSite.

[juliacreinhart]

Any advice on the framing question?

[juliacreinhart]

anyone??? I'm still looking for an answer on how to make frames visible around my images.

[Jim]

Are you talking about a border just on the pictures or around each individual product section?

Around each individual product section would be done on the Pages > Edit Page Layout screen, there is a field for columns and borders. I don't have a store open right now so don't know the exact names of the fields.

A border around each image could be done a couple of ways. In the style sheet for the page you could specify a border attribute for img tags. That would put the border around any image on the page. To get it around just the product images you would have to see what other tags like td are already around the image and add a border attribute to that class in the style sheet.

It may be that the particular template that you are using has a style that has the border set to not display so you should check the style sheets included by the page and see if there is a style for images that turns the border off.

A web search of css image border will probably give you some examples that you could try in your template.

In ShopSite in the Images section you can set a parameter for border on each image, so that would be another way that you can add the border. But a style could override that setting by making the border not display.

By default images that are a link to something else will automatically have a border turned on unless it is overridden by css. So if you make the images links to the the products moreinfo page the image typically would have a border that is the link color.

If you just want more blank space around the image the best way to do it would be to have the image in a small frame type border like you see on pictures. That would be done in your image editing tool, photoshop or something like that.

There is also the padding css attribute that can be used to provide space around an object of any type, text box, image, table, table cell etc. So you might also look into that option. Again a web search for html css padding images or something like that will probably give you some ideas.