Display Large Banner Images on Home Page in SuiteCommerce

To showcase a banner image on the homepage of your SuiteCommerce store, follow these essential steps to ensure your imagery is prominent and effectively styled.

Steps to Display a Large Banner Image

1. Prepare Your Image: Save your desired banner image as a .jpg file, specifically named prices.jpg. If you do not have an image ready, you can create a screen capture of a sample image.

2. Upload the Image: Place the prices.jpg file in your local workspace directory under assets/img.

3. Edit the Homepage Template: Open the homepage template located at Modules/Home@sc-<release>/Templates/home.tpl. Insert the following HTML snippet just above the slider section:

   htmlCopy

   <div class="home-banner-prices">
       <img class="home-banner-prices-image" src="{{getThemeAssetsPath (resizeImage 'img/themepricesoutofthisworld.jpg' homeslider)}}">
   </div>

4. Save Changes and Run Gulp: After saving changes to the home.tpl file, execute the following command to update the site:

   noneCopy

   gulp theme:local

   Gulp will add the new image file to the manifest and restart the local server. You can now view your homepage in a web browser to check for updates. For instance, if utilizing prices.jpg, you should see your updated homepage image.

5. Style the Banner for Better Spacing: If the layout appears crowded, you can modify the spacing above the banner image by adjusting the CSS. Open the file located at Modules/Home@sc-<release>/Sass/_home.scss and add:

   cssCopy

   .home-banner-prices {
     margin-top: $sc-margin-lv4;
     font-size: 0;
   }

6. Final Step: Save the changes made to the _home.scss file. The local server continues running, recompiling the site’s files with every save. Once the recompile is complete, refresh your homepage to observe the new spacing adjustments.

Follow these steps to effectively enhance your SuiteCommerce homepage with a visually appealing banner that captures attention without causing clutter.