Home Page Large Banner with Product

Show Large Banner with Product Screenshot

Show Large Banner with Product

To display a large banner with a product, follow these steps:

  1. Go to Storefront > Theme > Customize > Theme Styles > Home Page.
  2. Check the checkbox labeled "Show large banner with product".
Show Large Banner with Product Screenshot

Banner Background Path

To set the background image for your large banner:

  1. Add a path to the image you want to use as the main background for this banner. First create the image using recommended dimensions for this banner which is 1920px by 1000px.
  2. Upload the image via Storefront > Image Manager.
  3. After uploading, click on "View Full Size" to display it in your browser.
  4. Copy the full URL from your browser
    5. Banner Background Path Screenshot
  5. Then paste it into the "Path for the banner background" textbox where you can access from
    1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down to "Path for the banner background".
    Banner Background Path Screenshot

Large Banner Title

To set the title for your large banner:

  1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down.
  2. Enter your desired title in the "Large banner title" field (e.g., "WAREHOUSE CLEARANCE").
Large Banner Title Screenshot

Large Banner Subtitle

To set the subtitle for your large banner:

  1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down.
  2. Enter your desired subtitle in the "Large banner subtitle" field (e.g., "UP TO 35% OFF ALREADY LOW PRICES!").
Large Banner Subtitle Screenshot

Large Banner URL

To set the URL for your large banner:

  1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down.
  2. Enter the URL you want to link to from this banner in the "Large banner URL" field (e.g., "/categories/?sort=bestselling").
Large Banner URL Screenshot

Product Label

To set the product label that appears on top of the product image:

  1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down.
  2. Enter the text you want to display in the "Product label" field (e.g., "BEST SELLERS").
Product Label Screenshot

Button Text

To set the text for the button within the banner:

  1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down.
  2. Enter the desired text in the "Button text" field (e.g., "Shop Now").
Button Text Screenshot

Small Image URL

To set the image for your product:

  1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down.
  2. Upload the small image via Storefront > Image Manager, and follow the same steps as for the large image.
  3. Copy the full URL from your browser and paste it into the "Small image URL" field (e.g., an image of a product).
Small Image URL Screenshot

Small Image Height and Width

To set the height and width for the small image:

  1. Storefront > Theme > Customize > Theme Styles > Home Page > Scroll down.
  2. Enter the width and height values in pixels in the respective fields. This is important for better accessibility performance.
Small Image Height and Width Screenshot

Save and Publish

After making all your settings changes, be sure to save your theme and publish it to apply the changes to your live site.

!