Which would open the page builder of BigCommerce.
Once the theme has been successfully uploaded, just apply it to the store.
Let’s go ahead and give the command stencil bundle in your terminal, this would create a zip file of your theme, go ahead and upload the theme in your BigCommerce admin panel. If you followed all the steps mentioned above, you would successfully get the fields reflected in your BigCommerce admin panel. Here is how it should be specifiedīackground-color: stencilColor(“color-message”) You might have noticed that we used a color field inside the config.json and schema.json file, you will need to call the id used in the CSS file of your theme.
How to get the color used in schema.json and config.json file reflected in the CSS file.
Refer to the code snippet attached below. Next in the array you should add a label for the fields and specify the id names you have used in the home.html file, which has been mentioned in the config.json file also. “color”- Swatch needed for the background color. “heading”- This type will reflect a heading in the admin panel specifying the content. Traverse to the schema.json file in your theme and find the Home Page array, here you would need to specify the field types you would like to get reflected in the Admin Panel. How to edit the schema.json file, so as to get the fields reflected in the BigCommerce Admin Panel. The file you will need to edit for getting this done is the schema.json file. So the first step is complete, you have edited the config.json file and have bought the contents to get reflected in the front end, next thing we need is to get the fields editable from the customize section of the BigCommerce Admin Panel. The output of your local environment would look like this – Now that you have edited the config file, to see the changes getting reflected in your local environment you will need to re-run the stencil init command in your terminal. Refer to the code snippet image attached below. Traverse to the config.json file in your theme and move down to the settings array, here you will have to specify the content for the IDs you have set in the home.html file. The field “color-message” is added in the config.json file for choosing the background color via the admin panel, you will know how to implement this at the end of this blog., unique_text_1_link is the name of the id you would be referring to for the link, it could be named anything of your choice.Open the HTML tag in which you would like the text to get displayed, the handlebar object you would be referring to will take you to the config.json file in your theme where you have to specify the content.Traverse to the home.html page of your theme, In case you are using the cornerstone theme here, is how you could traverse to the file templates/pages/home.html.Now that you have the theme in your local environment, let’s begin with the work.Īdding a Text, link, and background color to your website’s home page which could be changed monthly from the BigCommerce Admin panel without editing any files in the theme. If you are wondering how to do the local setup of a BigCommerce stencil theme, you could follow the steps from the BigCommerce article and do the local setup of your stencil theme. Read this blog till the end, every step would guide you with the help of reference screenshots which would make it easier for you! Let’s jump into it.Īssuming your stencil theme is ready in your local environment. Try demo now to experience this awesomeness and to explore more features in this theme.In case someone has no coding experience and would like to edit fields in their store via BigCommerce Admin Panel, here is how you could help them by developing the functionality in the theme files, which would allow them to easily edit it from the Admin Panel. This will be a smart choice for your next projects online presence and save both your time and money! CoffeeZone is a clean, elegant and modern design responsive premium stencil bigcommerce theme for cafe, coffeehouse, cafeteria, bakery and coffee shop beautiful eCommerce website with lots of built-in functionalities, a powerful admin dashboard and theme editor included.