Beam is a classy minimalistic theme for an online store. It features a storefront as the homepage with a banner/slider and products below it.
In this article:
Header
The header contains the logo/site title (1), menu (2), social icons (3) and a cart icon (4).
- To change the header layout, go to Header in the Design section. See how
- To add/change the logo or site title, go to Site Title & Logo in the Design section. See how
- To add/remove an item to/from the menu, go to the Website menu. See how
- To add/remove/edit social media links, go to Social Links. See how
- To add/remove/edit the cart icon, go to Design in the Store section. See how
First Section – Storefront Banner
Since the homepage is the storefront, let’s go to the Store section to edit it. We can edit the banner as well as the product listing design there. Follow these steps:
- Enter storefront banner (1) in the Search Bar.
- From the related results, click on the Storefront – All Products option (2) under Studio Links.
- You will now reach the Storefront – All Products page.
- Click on the Banner (3) tab to manage it. You’ll now see a drawer on the right-hand side with the heading Storefront Banner (4).
- To add a new image slide, click on the Add Slides (1) button.
- To replace an image, set its focal point or edit the text and buttons on the slide, click on the edit icon (2).
- To delete a slide, click on the delete icon (3).
- For more settings, click on the Settings (4) tab.
- To change the banner layout, click on the Layout (5) tab.
Click here to know more about editing the store banner.
Second Section – Product Listing
Right below the banner, you would see a list of demo products from your store. It is recommended to edit the demo products to create your own.
To edit, add or delete a product from your store, follow these steps:
- In the Store dashboard, click on Products as shown in the image below.
You’ll reach the Products section.
- To add a new product, click on the Add Product (1) button. See how
- To add categories for your products, click on the Categories (2) tab. See how
- To edit, delete, share or duplicate an existing product, click on the three-dot icon (3) next to a product. See how.
Prefooter
To display a certain section (e.g. Instagram feed) at the bottom of all the pages or selected pages in your website, you can use a prefooter.
You can edit the prefooter here. In this theme, there is an Instagram section in the prefooter.
- See how to edit a social section and display your own Instagram feed.
- See how to edit the prefooter.
Footer
The footer contains the credits for your websites. You can add social icons (1), copyright text (2), and important links here.
See how to edit the footer.