Online shop layout

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hi I need to change a few things on my shop. Im a bit disapointed as when I upgraded to the store didnt realise I would have to change so many things manually with codes.Also the page where you enter the codes goes extremely slow.It has become a very long process which I wasnt aware it would be.

I have been looking in Ecwid knowledge base

- remove product codes from front page of shop
- change colour of price from red to black and also move price next to product name
-add size drop down box once clicked on product
-have less spacing between products ( added a code but doesnt seem to have changed anything

thanks
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
  • sad

Posted 5 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Agwein,

1. Do you mean the product categories rather than the product codes (SKU)? Let me know and I can give you a way to do either.

2. The prices can be changed easily by using codes to change the store CSS. (Code following)

3. Size options can be selected as options. (Process following)

4. Spacing is a little bit more difficult and I will need to research this further. (TBA)

Specific code for changing the price from red to black:
The following code must be added within the Store CSS according to the ecwid CSS instructions which requires a new set of codes to be created and saved as the base code set. Pleas see CSS FAQ Then add this specific code to your Store CSS:

div.ecwid-productBrowser-price {
color: #000000;
}


Selecting size options:
Use the 'Options' tab on the 'Product Details' page.

Please let me know specifically about the codes you wish to remove. A screen shot would be ideal.

I will also follow up with strategies for the spacing between products if possible.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Agwein,

Just following up on the spacing between displayed products. This issue has been sorted it seems and following is the link to the solution:

How to reduce space between products in Grid view

See how this goes and feel welcome to ask for clarification if required.
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
add to bag not showing

--------------------------------------------------------------------------------

I changed my add to bag box in photoshop following your instructions and added the css code however its not showing on my site. It appears that its there when you put your mouse over the space where it was however its invisible

This is the code I added:

/* The "Add to bag" button in up state */
div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering {
background: transparent url(https://www.dropbox.com/s/rpx2aslrk1...) no-repeat top center !important;
}
/* The "Add to bag" button in down state */
div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering {
background: transparent url(https://www.dropbox.com/s/rpx2aslrk1...) no-repeat bottom center !important;
}

I also tried

/* The "Add to bag" button in up state */
div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering {
background: transparent url(https://www.dropbox.com/s/rpx2aslrk1u...) no-repeat top center !important;
}
/* The "Add to bag" button in down state */
div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering {
background: transparent url(https://www.dropbox.com/s/rpx2aslrk1u...) no-repeat bottom center !important;
}

Also I want to remove the grey background box that surrounds the add to bag box/price etc

I also want to add the product name and price about the description

Please help!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Agwein,

I think I mentioned that the bag was a sprite and the sub-images are critical. I don't know the image that you have placed so I can't see if it complies. Maybe you can post a copy of the image here and I can look at it for you.

Secondly there may be an issue with the Yola Style if you are using the new style: Super Flat. Stefan has offered a solution for this issue: http://forum.yola.com/yola/topics/pro... The solution is near the end of the thread.

Please get back to me if you wish to show me your bag sprite image.

Also I want to remove the grey background box that surrounds the add to bag box/price etc

I also want to add the product name and price about the description


The grey background may be able to be removed by the use of store CSS. Please use Firebug to identify the source CSS and then you will be able to moify the code so that it doesn't appear.

I don't think that the product and price fields can be included in the description by moving the placeholderor modifying the code. The only solution that comes to mind is adding it manually to the description itself.
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Thanks I can show you the sprite. Should i show you it as png format or psd?

As for the product name and price.I tried to add it in the description but it didnt show as titles, it just ran into the product description. Why doesnt it keep line spaces in the description?

Thanks for your help
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You can force spaces and formatting ( pseudo title format) by the use of HTML within the description. There's an HTML button in the whatchamacallit tray of the description.

It will be easier if you post it as a png since the forum doesn't allow PSD files. Alternatively you can send either file type to my email: gop@great-sillage.info
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
please see png
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
I have no idea what HTML does.Im a beginner, i wasnt expecting to have to do all this editing of the site. I thought the site would look alot better than it does
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Ive added the superflat code (which to be honest Im not sure what its for) it hasnt changed anything
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Do you know what Yola Style you are using for your site? That code is specific for the Super Flat style only.
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
i just used the standard css theme and added several codes to edit
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Also I need the add to bag buttonand price and to show below the product description.How do i do that?
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
i removed the bag and changed the txt and the colour
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I'll get to this over the next couple of days Agwein.
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Are you yola staff?
I really need help getting the shop edited to the look I need. What I have edited so far has taken me so long and I need the shop to sell my collection. I have so far to go
Thanks for your help
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
No. I'm not Yola Staff. I'm a user.
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
oh really its so kind of you to help!