Creative help needed

[simetra]

Hey everyone! I need some creative assistance!

I have a product that is a "Build your own Gift Bag". Included in the base price of $20, customer can choose 2 fragrance oils and 1 oil burner. For an additional $3 per item they can add other items into the gift bag to customize it.

Here is how I have it setup:
http://www.simetraonline.com/index.p...&products_id=2

Can anyone think of a better way I can lay this out so it looks more professional and clean cut? I think it looks a little confusing the way it is displayed.

ANY help is GREATLY appreciated! We have such talent on these boards!

Thank you in advance,
Mary Ellen

[rstevenson]

Hi Mary Ellen,

One small confusion for me: the text at the top says the gift bag includes a burner (which I choose), 2 oils (which I choose) and 4 tea lights and 2 droppers (which I don't choose?) Maybe mention the tea lights and droppers down below the oils drop-down, in the same order, without any drop-down of course.

The main issue I think is alignment and text styling as aids to guiding the buyer. Whenever you have a series of steps, the layout has to clearly indicate the process, and must not interrupt that process with anything non-linear. (That's as clear as mud but it covers the ground!)

The old way of doing things, with a table structure, made this easy because you could right align the left cells and left-align the right ones, and all your drop-downs would line up nicely. I think it's very important you try to do that, even though it'll be a struggle with the style sheet. Try setting text-align: right for the headings, text-align: left for the drop-down's div, and give the drop-down's div a margin left so they line up where you want them. Something like that should work.

While you're at it, try to get the drop-downs to be the same width, just to remove one more visual anomaly.

Your text headings already have a hierarchy of size, but maybe a bit of colour would help set off the main sections. Numbered steps would help too. And perhaps a 1 pixel box around the area which holds the choices, so people see all that is possible at a glance.

Finally, I'm more than a little confused by all the references to prices. There's Starting at $20, (Up to $35 Value), and Save up to $36. I don't get a quick sense of what the parameters are. I think (Up to $35 Value) could be left out entirely. It sounds like you won't include the fluff and gift card if someone spends more than $35.

I hope this helps. I'm not exactly a gift basket kind of guy, but whether that makes my impressions more valuable or less is up to you.

Rob

[simetra]

Rob,
Thank you so much for all the feedback. You are right that up to $35 had to go. I wasnt reading it that way and it did sound like it was tied to the fluff.

I LOVE all your ideas on the visual appeal of the site, the border of 1 pixel, the numbered steps, colors, etc...If I was making a site in Dreamweaver I would have set up the pages SO differently and it would have been easy. But, I know absolutely nothing about CSS and am really struggling to figure all this out. I don't have a clue how to change the layout with all your great ideas in that css. I also have no idea how to change the width of the boxes. I don't know why it made them diff sizes!

Any help you can give me on what to add into my style sheet to incorporate these changes would be much appreciated. I am at a loss....

PS: The droppers and tea lights dont have choices because they only come one way. Tea lights are just small candles and droppers are little droppers like eye droppers.

Thank you so much,
Mary Ellen

[simetra]

Also, what file would I need to make the changes in?

[gjh42]

You can make most of the changes in your stylesheet (/includes/templates/your_template/css/stylesheet.css).

The way to get the input boxes to line up is to give a width to the text in front of them:

h4 .optionName {
    width: 88px; /*adjust to fit longest label*/
    } 

This will require more width than your current setup, since you will have to account for the widest label plus the widest box. If any label is too wide, it will wrap to the next line - could be a good thing for some displays. If any input box is too wide to fit, it will drop down and left justify.

If you want the labels to be right justified against the boxes, there is another element you can apply styling to:

label.attribsSelect {
    float: right;
    } 

This will make the text (variable width) float right inside the fixed width heading box.

PS - the input boxes automatically adjust to the longest text line inside.

[gjh42]

Edit: in

label.attribsSelect {
    float: right;
    } 

you need to add text-align:right; to fully right-justify the labels.

label.attribsSelect {
    float: right;
    text-align: right;
    } 

Your display will probably work fine as is in a 1024x768 or larger monitor, and a bit of wrapping in 800x600 monitors is no big deal.

[rstevenson]

Glenn said:

PS - the input boxes automatically adjust to the longest text line inside.

The size element is used to make input boxes a particular size. So it's just a matter of finding the right spot in the Zen code to add that. For example...

<input type="text" name="yada" size="50">

...would create an input box 50 characters wide, no matter was in it.

Also, in your answers above, the suggestions are identified as "PHP code" above the boxes but they're actually CSS and would be applied in the stylesheet. Thought I'd better clarify that just in case.

HTH

Rob

[gjh42]

Rob,
Since there isn't a "CSS" code tag, using "PHP" at least gives some color definition to the text. "HTML" would be as applicable but takes a second longer to type:)

[simetra]

Thank you for the info. I am going to try to figure out what code to put where this afternoon. Hopefully I can make some sense of it all.

How would I add steps beside each step in the process and also a 1 pixel border around the whole thing? Any thoughts?

Thank you!

[rstevenson]

Hi,

The entire block of choices to choose from is inside a div with the id of productAttributes, so you could add this to your style sheet...

#productAttributes {
border: 1px solid #972F93
}

That would make a purple box around everything.

As to adding numbers, since the choices are not in a list, it won't happen automagically. You'll have to find in the code where the attributes are being generated and get it to insert the number there. I'm a newb when it comes to php, so others will have to advise on that one.

Try the box first. You may find the numbers aren't needed.

I like the way the choices are all lined up now. That helps a lot.

Rob