To make design changes to your store, you can do it directly in the Webydo studio.
Select your Store Front element, and use the Properties Panel to make your design changes.
Some settings in the panel affect sub-pages within the Store Front. Use PREVIEW mode or publish your page to see the changes you made.
The panel is split up into 8 sections:
Layout
Enter your store ID: Enter in your store ID here, if you do not know the ID you can check it in your Control Panel. What is my Store ID?
Store Language: By default, your store will detect the language set up on the user's browser. If you wish to choose a specific language, select it from the dropdown menu.
Display Top Menu: Choose if you would like the top menu displayed in the element.
Display Top Bag: Choose if you would like the shopping bag displayed in the element.
Display Top Search: Choose if you would like the search bar displayed in the element.
Display Prices: Choose if you would like prices in the element. (prices are shown when on product pages)
Display Product Panel: Choose if you would like the product panel displayed in the element. (The product panel is viewed when in a a single product view)
Display Root Cat. in Breadcrumbs: Choose if you would like the breadcrumbs (list of past pages) shown at the top of your store front.
Homepage Layout
Categories Per Row: Edit the number of categories displayed in each row.
Enter the relevant category ID: You are able to use the store front element to only show a list of products within a single category, instead of showing the categories first. Enter in the Category ID of the products you would like to display. What is my Category ID?
Products Page Layout
Products Default View: Choose the default view once a user clicks on a product category. The user will be able to toggle between views as well.
Products Per Row Grid: Edit the number of rows displayed on the grid view.
Products per Column Grid: Edit the number of columns displayed on the grid view.
Products Per Page List: Edit the number of products displayed on a single page on the list view.
Products Per Page Table: Edit the number of products displayed on a single page on the Table view.
The GRID view looks like this:
The LIST View looks like this:
The TABLE View looks like this:
Colors
Titles: This refers to all the product and category titles in the Store Front.
View the images below to see all the text that will be changed when choosing a new color for Titles:
Text: This color will affect all text in the images below:
Price: This refers to all the prices within the Store Front element. Both on the Product listings and in the product panel.
Links: This refers to all links within your Store Front element. For example:
Product Panel: The product panel is the panel shown on the product page view. You are able to change the color of the background of this panel.
Primary Buttons
This section allows you to edit the color, hover color, corner radius, and stroke of the primary buttons of your store front.
See the images below for examples of the Primary Buttons:
Secondary Buttons
This section allows you to edit the color, hover color, corner radius, and stroke of the secondary buttons of your store front.
See the image below for an example of the Secondary Buttons:
Top Menu
This section allows you to edit the font size, corner radius, and hover colors for the top menu.
Search Bar
This section allows you to edit the size, colors, and corner radius of the search bar in your Store Front.
