How can I change store layout?

Last updated
  1. I am using a ready app/plugin for
    1. Wordpress.org
    2. Wix
    3. Facebook
    4. Drupal
  2. I have added the store to my site manually using Ecwid widgets

My store is added to Wordpress.org site

If you have Ecwid store on Wordpress.org site, you can change the layout in Ecwid  plugin settings in Wordpress admin area.
  • Navigate to the Appearance tab to set the product browser layout:
  • Set the number of products per page for each of the product browser views
  • Choose the category that you want to open by default
  • Set the number of categories per row
  • Choose the default view mode on product pages
  • Choose the default view mode on search results

 My store is added to Wix

On Wix site you can change the store layout in the Online store app settings. You can manage the store layout right within Ecwid app settings in your Wix admin panel:

1. Go to Wix HTML Editor -> Pages, open "Online Store" page
2. Place the cursor on the area with shop and double click or click “Settings” button
3. In the pop up window navigate to Design tab – here you can change your store look. You can set the number of rows and columns to be displayed in every view for comfort use. You can choose the background color of your storefront and define the category which will be opened by default when customers visit your store page.

Apply the necessary changes, save the changes and click “Publish” button.

I have store on Facebook

To change the layout of your store on Facebook, please go to the app settings page here:https://apps.facebook.com/ecwid-shop/ Click Settings link. On the app settings page you can change your store layout:
  • Choose the widgets you want to show
  • Set the number of products per page for each of the product browser views
  • Set the number of category columns and the default category view
  • Choose the default category

I use plugin for Drupal

In Drupal admin area go to Ecwid store → Appearance page to quickly configure the way your store is shown to your clients with the following options:
  • The type of product displaying used by default
  • Number of products for each displaying type
  • Product category shown by default

I have added the store to my site manually using Ecwid widgets

If you added your store to the site by inserting the Ecwid widgets to the source code of the site, you can adjust product products/categories listing layout according to your needs. For that, you will need to slightly modify the Product browser integration code that you added to the site.

Find the following code in the widget code:
 
"categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list" 


The code defines products and categories listing styles. Let's see its parts:

"categoriesPerRow=3" – defines number of categories per row
"views=grid(3,3) list(10) table(20)" – defines the available views and their settings. If you want to remove any view, just remove the "grid(3,3)" or "list(10)" or "table(20)" text from the settings.

The number in braces is number of products in the particular view. I.e.:

grid(K,L) - K is a number of products in a column, L – number of products in a row. 
list(M) - M is number of products on one page
table(N) - N is number of products on one page
Default view mode:

"categoryView=grid" – defines the default view for products in categories. Possible values: list, grid, table
"searchView=list" – defines the default view for search results. Possible values: list, grid, table.

By changing these values in the Product browser integration code, you will modify the store layout as needed.

 
Was this article helpful?
0 out of 10 found this helpful
Questions?
Get help
  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7