Home Page (Portobello)

Configure the home page and hero banner features in this section. In your control panel, go to Storefront > Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Home Page'

Carousel

Show Carousel Slides

Check this option to show the slides that you have set up in your store Control Panel ( Storefront > Home Page Carousel).

Show Carousel Arrows

Check this option to show navigation arrows to the left and right of the carousel, to move back or forward through the slides.

On smartphones this setting has no effect, slides can be swiped left or right.

Carousel Content Alignment

Align the text content in the overlay of the carousel slides to the left, center or right of the container.

Background Transparency

Here you can select how transparent you want the background color of the carousel content. If you are concerned about text legibility then have it set to a higher percentage.

Home Page Featured Categories

We have included a custom panel that will pull in specific categories that you want to feature. This is flexible enough for the store owner to determine which categories they want to feature without having to base it off an existing category structure.

Check Enable featured categories on the home page to enable this feature.

Setup

Once activated, the panel will search for a category you have designated as the top level featured category. You can do this in your control panel by creating a new category, or choosing an existing one. Under the chosen category, add new sub categories - these will appear as featured categories on the home page.

You can assign existing products to appear under these featured categories in addition to their current category assignments.

Set the name of this category in the 'Featured Category Name' field. Note that this field has a 64 character limit and is case sensitive.

The panel will locate the specified top level category, and providing it contains subcategories, will list those as the "Featured Categories" on the homepage. We recommend setting up a category image in the control panel for each featured category that is pulled through into the grid.

Step-by-step Instructions

  1. Create a new category ( Products > Product Categories). We suggest you call it "Featured Categories".

  2. Within the new category add any sub-categories that you want to be displayed on the homepage.

    Please note that for these sub-categories to be visible on your storefront, Menu Display Depth (  Store Setup > Store Settings > Display > Category Settings > Menu Display Depth) must be a minimum of 2 levels deep.

  3. Add a category image to each of the sub-categories in the 'Featured Categories' category.

    You must add the images using the category image field, shown above, images in the category description aren't used for this feature.

  4. Open the theme editor, 'Home Page Featured Categories' section ( Storefront > My themes > (Current Theme) Customize > Home Page Featured Categories), and put a check mark in 'Enable featured categories on the home page' (see below).

  5. In this same section the 'Featured category name' must exactly match the name of the top level category you set up in step 1. This is case sensitive. So if, as suggested, you called the new category "Featured Categories", you must enter "Featured Categories" in this field.

    As noted above the 'Featured category name' entered in the theme editor, must be exactly the same as that entered in step 1. The field has a 64 character limit and is case sensitive. So entering "Featured  Categories" as the field name and "Featured categories" in the theme editor would NOT work.

  6. That's it! Open your home page, and your featured categories will show.

Home Page Featured Category Columns

Set how many columns of categories are displayed on the home page.

Hide Category Names in the Grid

If you have uploaded images to your featured categories that already include text, check this option to prevent the text label for each category appearing.

Hide "Featured Categories" Title

This will prevent the "Featured Categories" title from appearing above the grid, if you want the theme to show a grid of images directly below the main hero image.

Hide Featured Categories in the Main Navigation

Activating this option will hide the specified top level "featured" category from the main navigation bar.

Please note 'Featured Categories' must be ticked as "Visible In Menu" in the  Products > Product Categories list, even if you don't want it to appear in the Main Navigation.  Use this Theme Editor setting to hide it from the Main Navigation.

Link your Instagram feed to your store and display it on your home page.

Elfsight Instagram Feed

Elfsight offer a highly configurable feed module that we have set up our theme to work with. They offer free and premium versions, which you can sign up for here.

Check Enable the Elfsight Instagram Feed to activate your Elfsight Instagram feed.

Configuring the look and feel

Configure your Instagram widget in the Elfsight control panel. Be sure to use the Instagram Feed widget, rather than Instagram Widget or Instagram Testimonials.

Embedding your Elfsight widget into Portobello

After setting up your Instagram feed widget, click the “Add to website” button in your Elfsight control panel.  You'll see a code snippet that looks something like this: 

<script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-xxxxx-xxxxx-xxxxx"></div><br>

Copy the code snippet, paste it into the text box below and click the “Copy ID” button on this page.

Use the ID that is returned to paste into the Elfsight widget ID in the theme editor panel

Taggbox Instagram Feed

An alternative to the Elfsight Instagram Feed module that we have set up to work on our theme is  Taggbox. They also offer free and premium versions, which you can sign up for here.

Check Enable the Taggbox Instagram Feed to activate your Taggbox Instagram Feed.

Configuring the look and feel

Configure your Instagram Widget in the "Taggbox Widget Editor", which can be found if you click "Edit" on the widget in the "My Widgets" area. Don't forget to hit the "Publish" button in the bottom left corner when you're happy with your design.

Embedding your Instagram Widget into Portobello

After setting up your Instagram Widget, click the “Embed Widget” button on the widget in the "My Widgets" area. From here click "Embed On Webpage" and make sure the "Litecode" tab is selected, then you'll see a code snippet that looks something like this: 

<div class="taggbox" style="width:100%;height:100%;" data-widget-id="xxxxx" data-tags="false"></div><script src="https://widget.taggbox.com/embed-lite.min.js" type="text/javascript">

Copy the code snippet, paste it into the text box below and click the “Copy ID” button on this page.

Use the ID that is returned to paste into the Taggbox widget ID in the theme editor panel

Products

Configure the number of products displayed for the Featured Products, Most Popular Products and New Products Panels, or disable the panel so that it no longer displays on the home page.

Blog Articles

Check this option to enable a panel on the homepage which will display latest articles in your blog. It will pull in thumbnail images from each post if they exist.

The number of posts displayed is dependent on the Number of Blog Posts setting for the home page. The Columns setting assigns the number of columns on the desktop view in the frontend.

The number of posts displayed is dependent on the Number of blog posts on home page setting. The Home page blog post columns setting assigns the number of columns on desktop view.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.