The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #11  
Old 11-22-2012, 07:23 AM
Hiki-fuda.com's Avatar
Hiki-fuda.com is offline
Junior Member
 
Join Date: Nov 2012
Posts: 6
Default


Kess

That's very close to what I wanted.

Of course, this made me want to make a few more adjustments, so I've adjusted the sizes of the category images hoping that I could get the layouts on all of the pages of the site to look pleasing. I'm using a TypePad blog with a two column format.

I changed fixed the center column to 500 pixels because that's the maximum size (other than "fluid pixels"). But now my category images appear below the category list on the left side of the page (again). I made this change because if if I set the center column to "fluid pixels," the layouts on all of the other pages of the site end up unbalanced, with way too much text flowing horizontally.

Perhaps there isn't any way for me to optimize this layout any further.

Anyway, thanks again for your help.
  #12  
Old 11-22-2012, 02:22 PM
Kess's Avatar
Kess Kess is offline
Senior Member
 
Join Date: Feb 2012
Posts: 2,071
Default

Quote:
Originally Posted by Hiki-fuda.com View Post
Kess

That's very close to what I wanted.

Of course, this made me want to make a few more adjustments, so I've adjusted the sizes of the category images hoping that I could get the layouts on all of the pages of the site to look pleasing. I'm using a TypePad blog with a two column format.

I changed fixed the center column to 500 pixels because that's the maximum size (other than "fluid pixels"). But now my category images appear below the category list on the left side of the page (again). I made this change because if if I set the center column to "fluid pixels," the layouts on all of the other pages of the site end up unbalanced, with way too much text flowing horizontally.

Perhaps there isn't any way for me to optimize this layout any further.

Anyway, thanks again for your help.
What would you say to placing the vertical categories and Minicart icon to the right sidebar?

You should add the codes of Categories and Minicart widgets to the separate widget using the "Embed your own HTML module" at Blogs > Design > Content to add the code to your blog's sidebar. The widget's code can be taken from your store's page code (where you have added them previously), and after you add them to the sidebar you'd better remove these two widgets codes from the store HTML page.

Please try that and let us know if it suits you.
The Following User Says Thank You to Kess For This Useful Post:
Hiki-fuda.com (11-23-2012)
  #13  
Old 11-23-2012, 11:47 PM
Hiki-fuda.com's Avatar
Hiki-fuda.com Hiki-fuda.com is offline
Junior Member
 
Join Date: Nov 2012
Posts: 6
Default

Kess,

As always, thanks for your expert advice.

I was concerned that adding the categories to the right column would push the other links too far down the page, so I just moved the shopping bag there. I think it doesn't look too bad.

Two more issues:

1. Can I remove the text "Category: Store", which appears above the category images? It doesn't have any purpose. It already says "Store" above the category list on the left side of the page. If it's removed, will the category images move up on the page? Right now they are not really aligned to anything else.

2. Can I move the position of the "Sign in" link? It looks weird just sitting in the middle of the page. Perhaps I can move it to just above the top category image (right justified)?
Also, can I change the size of that text if I want?

I've attached a link to a sample layout that shows the effect of these kinds of changes. Please tell me if it is possible to make them (and how!).
  #14  
Old 11-26-2012, 02:50 PM
Kess's Avatar
Kess Kess is offline
Senior Member
 
Join Date: Feb 2012
Posts: 2,071
Default

Hello!

I really like the idea of placing the minicart to right panel! The only think that I would do is removing the second Minicart (at the moment you have two of them on the page - http://www.diigo.com/item/image/2cdgz/a9vt)

If you open the source of the http://www.hikifuda.com/store.html for editing, you will find two identical fragments of code there:

Code:
<div> <script type="text/javascript" src="http://app.ecwid.com/script.js?STORE_ID"></script> <script type="text/javascript"> xMinicart("style="); </script> </div>


        </div>
Please remove the first one (this is the bag displayed at the bottom of the page), and modify a bit the second one by adding 1563010 instead of STORE_ID. As a result the second fragment should look as follows:

Code:
<!-- sidebar -->


<div class="module-custom_html module">
    <div class="module-content">
<div> <script type="text/javascript" src="http://app.ecwid.com/script.js?1563010"></script> <script type="text/javascript"> xMinicart("style="); </script> </div>
    </div>
</div>
That's not crucial, but recommended.

1. Sure, the breadcrumbs can be removed. How to do it: http://kb.ecwid.com/w/page/15853288/...%20breadcrumbs

The categories icons will be shifted up a bit after that.

2. That is also easy, just add the following CSS rule to Ecwid control panel -> System Settings -> Design -> CSS Themes:
Code:
div.ecwid-ProductBrowser-auth-anonim, 
div.ecwid-ProductBrowser-auth-logged {
top: 2px;
margin-right: 7px;
}
and click "Save (Ctrl+S)". Please note that you do not necessarily need to use the value of 7px for margin-right - probably you like zero value instead, it will move the "Sign In" link yet closer to the right.
The Following User Says Thank You to Kess For This Useful Post:
Hiki-fuda.com (11-27-2012)
  #15  
Old 11-27-2012, 06:11 AM
Hiki-fuda.com's Avatar
Hiki-fuda.com Hiki-fuda.com is offline
Junior Member
 
Join Date: Nov 2012
Posts: 6
Default

Kess

I tried following your instructions about removing code for the second mini cart and the store became a mess. I don't really know why, but I went back to the beginning and replaced all of the code. I succeeded at placing the mini cart in the right hand column, but I'm not really sure if I remade the store properly. Before, the mini cart displayed only on the store page. Now it shows on every page of the site.

I succeeded with your code for moving the "sign in" text. I didn't understand that the "store" text was for breadcrumbs. I like the idea of having breadcrumbs, so I just left that alone. I don't like the way it looks, but I want to maintain the functionality. Isn't there a simple way to reduce the width of the top margin in my store? It looks I have at least 100 px of space between the black horizontal navigation bar and the top of the product browser.

Speaking of how things look, I following the directions at the below link to change the formatting of the product text, which in grid mode looks too big.

http://www.ecwid.com/forums/showthread.php?t=9341

I pasted that code into Ecwid-->Design Settings-->Custom CSS Themes, but that didn't work.

Here's what I want to do:

I like the size of the SKU font, but the product name font is too big. The price font is also too big. I want the SKU, product name and price to remain centered beneath the product, but I want to be able to specify the font size, font type, font color and font decoration for all of these.

Where can I find the code and where do I paste it? (I can edit the code to change the font size, color, etc. myself).

So sorry to keep bothering you with these requests. I really appreciate your help.

Mike
  #16  
Old 11-28-2012, 03:05 PM
Kess's Avatar
Kess Kess is offline
Senior Member
 
Join Date: Feb 2012
Posts: 2,071
Default

Quote:
Originally Posted by Hiki-fuda.com View Post
Kess

I tried following your instructions about removing code for the second mini cart and the store became a mess. I don't really know why, but I went back to the beginning and replaced all of the code. I succeeded at placing the mini cart in the right hand column, but I'm not really sure if I remade the store properly. Before, the mini cart displayed only on the store page. Now it shows on every page of the site.

I succeeded with your code for moving the "sign in" text. I didn't understand that the "store" text was for breadcrumbs. I like the idea of having breadcrumbs, so I just left that alone. I don't like the way it looks, but I want to maintain the functionality. Isn't there a simple way to reduce the width of the top margin in my store? It looks I have at least 100 px of space between the black horizontal navigation bar and the top of the product browser.

Speaking of how things look, I following the directions at the below link to change the formatting of the product text, which in grid mode looks too big.

http://www.ecwid.com/forums/showthread.php?t=9341

I pasted that code into Ecwid-->Design Settings-->Custom CSS Themes, but that didn't work.

Here's what I want to do:

I like the size of the SKU font, but the product name font is too big. The price font is also too big. I want the SKU, product name and price to remain centered beneath the product, but I want to be able to specify the font size, font type, font color and font decoration for all of these.

Where can I find the code and where do I paste it? (I can edit the code to change the font size, color, etc. myself).

So sorry to keep bothering you with these requests. I really appreciate your help.

Mike
I have checked your site pages code. For example, on the http://www.hikifuda.com/ page you have:

Code:
<div> <script type="text/javascript" src="http://app.ecwid.com/script.js?1563010"></script> <script type="text/javascript"> xMinicart("style="); </script> </div>
    </div>
and that is why the Minicart is displayed on every page of your site. I would recommend removing this code from the root page code, if you do not want the cart to be present on the pages, not related to the store.

As for moving the product browser up: there are two thing that I would suggest:
1. Remove <h3 class="entry-header">Store</h3> titlte from the HTML code of the page and add it to your Ecwid control panel -> Catalog -> Categories -> click on "Store" in the left-hand list and add <h3 class="entry-header">Store</h3> to the Description field there.

2. Think of moving the search widget to some other place. For example, it can also be moved to the sidebar, under the Minicart. What would you say abou this idea?

3. Add this CSS rule to your Ecwid CSS theme:
Code:
div.ecwid-productBrowser-categoryPath {
padding-top: 0px;
}
Please let me know if the result suits you.

How to change the font properties of the product names links in products grid:
Code:
div.ecwid-productBrowser-productNameLink a,
div.ecwid-productBrowser-productNameLink a:active,
div.ecwid-productBrowser-productNameLink a:visited {
font: normal 13px helvetica, arial, verdana, sans-serif;
color: black;
}
in this rule you can change the size (13px), style (normal), font family and color. You need to add this rule (with your own property values) to the end of your Ecwid CSS theme in Ecwid control panel -> System Settings -> Design- CSS Themes.

SKU font CSS rule:

Code:
div.ecwid-productBrowser-sku {
font: normal 13px tahoma, geneva, verdana, sans-serif;
color: #1E2C38;
}
so to change the SKU font you also need to add this rule to your CSS theme with your own properties values.

And here is the code for the product price font:
Code:
div.ecwid-productBrowser-price {
font: normal 24px tahoma, geneva, verdana, sans-serif;
color: #A20505;
}
Should you need further assistance, please feel free to contact us.
  #17  
Old 09-23-2014, 02:02 AM
WeddingDreams Bridal's Avatar
WeddingDreams Bridal WeddingDreams Bridal is offline
 
Join Date: Aug 2014
Posts: 2
Default

hi i'm trying to get my horizontal category widget to show vertical on my facebook store, also i need the shopping bag in mini view. I've tried everything but nothing seems to be working so I've hidden the mini cart entirely at the momen, which is not what i want to do. please help me with this. maybe I'm applying the css codes incorrectly.
My facebook store url is https://www.facebook.com/BenAndBingley/app_251458316228
  #18  
Old 09-26-2014, 06:00 PM
ginger's Avatar
ginger ginger is offline
Ecwid Team
 
Join Date: Sep 2014
Posts: 714
Default

Quote:
Originally Posted by WeddingDreams Bridal View Post
hi i'm trying to get my horizontal category widget to show vertical on my facebook store, also i need the shopping bag in mini view. I've tried everything but nothing seems to be working so I've hidden the mini cart entirely at the momen, which is not what i want to do. please help me with this. maybe I'm applying the css codes incorrectly.
My facebook store url is https://www.facebook.com/BenAndBingley/app_251458316228
Hello,

the process of Ecwid storefront customization on Facebook is a bit different from changing it on personal sites. On Facebook each store is loaded within an Ecwid Application for Facebook. It was specially developed to meet all specific Facebook requirements and make the stores work properly.

Ecwid storefront on Facebook appears in a special iFrame with a fixed width. It would not be simple to place a vertical menu together with a product browser in such a limited space, making them look nice. I can demonstrate you the display of vertical categories and a product browser on a Facebook page. See the screenshot attached. The vertical categories widget and the product browser were embedded by a simple copy-paste of integration codes. You can find them in the dashboard, if necessary.

In case you desperately need to customize your storefront on Facebook, you have to switch from using our official Facebook app to custom html mode and embed the necessary widgets manually. But we strongly recommend you not to do so, as we can’t guarantee a flawless work of your store in case of such changes. A switch to custom html on Facebook is available in application settings.

Adding a shopping bag is much more simple: you need to choose a proper option in FB app settings and the shopping cart will be displayed on your store page. Open the FB application > Settings > Field ‘Your Facebook store layout’ > Option ‘Categories menu widget’ > ‘Show’. The cart will be displayed in normal view. If you choose ‘Hide’, the cart will appear in miniview, like on the second screenshot.
Attached Thumbnails
Click image for larger version

Name:	2014-09-25 17-29-20 2014-09-25 17-31-12.jpg
Views:	42
Size:	257.5 KB
ID:	2717   Click image for larger version

Name:	Ecwid test 2014-09-26 16-39-36 2014-09-26 21-24-59.jpg
Views:	40
Size:	60.3 KB
ID:	2718  
__________________
Xena S.
Ecwid Customer Care Team

Help Center

⬇ Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
vertical, vertical categories

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:24 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.