Steps:

  1. Enable Left Column Section to display at Homepage
  2. Customize Left Column Section
  3. Add thumbnail icon to collection menu

1. Enable Left Column Section

  • From your Shopify admin, go to Online Store > Themes
  • Find the theme that you want to edit and click Customize > Theme settings
  • Go to General settings > Homepage > Show left column section

2. Custommize Left Column Section

  • Back to Sections tab, select Homepage from the top bar drop-down.

  • Click Left column - Homepage Section. The Left column section settings show up.
  • Left column section as a Sidebar for Homepage, you may add content to display at this sidebar by click Add content This section support 5 content type:
    • Categories: List of Collection as a Menu - Navigation. The theme support display maximum 12 collections at menu. If you need more please contact our support to customize
    • Banner: Add image banner
    • Banner Carousel: Add 3 banners and play as slideshow
    • Product Listing: Add products display as row or carousel slide
    • Brands: Display all product vendors

3. Add thumbnail icon to Left Navigation - collection menu

From Left column - Homepage > Add content > Add Categories, the collection menu. At Thumbnail icon you may select 4 options:

  • Use collection image: use collection image as thumbnail icon
  • Upload image from assets (PNG or SVG) : use image from your theme assets to display as thumbnail.
  • Upload by settings: upload image to the image setting for each collection.
  • None: Don't display thumbnail

Add image to assets for collection thumbnail

You can upload an image to theme assets to represents thumbnail collection.
There's an important naming convention to respect here!

The image must be named similar the collection, but be handleized, and have a .png/svg extension.

For example, if you select a collection called 'Birthday Gifts', then name your image birthday-gifts.png, birthday-gifts.svg

Steps

From your Shopify admin, go to Online Store > Themes.

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. On the Edit HTML/CSS page, locate and click on the Assets folder to reveal its content.

  3. Under the Assets heading, click on the Add a new asset link.

  4. Upload your image.

Repeat steps 4 and 5 until you have uploaded all your images.

results matching ""

    No results matching ""