Shopbox Grid

Implementation

Here we will outline how to implement the Shopbox Homepage on your site.

# Prerequisites

• # Shopbox App previously installed and functioning. If not, please contact [email protected]

# Steps

# 1. Insert Shopbox-Grid script:

Please insert the below script into the of your website across all pages.

<script async src="https://grid.shopbox.ai/sbgrid.min.js"></script>

# 2. Shopbox Homepage Component Location:

Decide where you would like the Shopbox Homepage components to appear and then insert the <div> below in the desired location. This should be a full width <div> and should render straight away if the header script and the <div> are inserted correctly. You should have received an email from your customer success agent with the following items:

You can copy the below code and replace with the relevant items from the email, but this will also be included with the email.

<div style="--sb-rows: NO_OF_ROWS; min-height: calc(240px * var(--sb-rows));">
  <shopbox-grid cid="UNIQUE_CLIENT_ID" currency="CURRENCY" id="GRID_ID"> </shopbox-grid>
</div>

# 2.1 Additional options and how to use them

<div style="--sb-rows: NO_OF_ROWS; min-height: calc(240px * var(--sb-rows));">
  <shopbox-grid cid="UNIQUE_CLIENT_ID" imgfit="contain" maxwidth="1200px" minfactorialdigits="2" currency="CURRENCY" id="GRID_ID">
  </shopbox-grid>
</div>

# 2.2 Customizing the grid using CSS Variables

The grid builder in the Shopbox Hub offers most of these as predefined fields for customization. If you prefer to do the same with custom css (in the custom css panel of the grid), you can do so using the variables provided below. s

Example:

#shopbox-grid {
  --sb-grid-title-color: #424242;
  --sb-grid-title-fs: 18px;
  --sb-product-img-ar: 4/3;
}
/* Or just modify them on mobile with a media query */
@media (max-width: 768px) {
  #shopbox-grid {
    --sb-product-img-ar: 16/9;
  }
}

Target specific types of elements using plain css with the provided classes for each type (.sb-grid-item, .sb-grid-carousel, .sb-grid-banner )

#shopbox-grid .sb-item-carousel {
  font-size: 24px;
}

Targeting element types of a certain grid size is also possible, different classes for that can be seen when inspecting the element in the browser. Example:

/* Targets only full width carousels */
#shopbox-grid .sb-grid-carousel.sb-grid-carousel--4 {
  font-size: 28px;
}
/* Targets only 1 block wide grid elements showing 4 products */
#shopbox-grid .sb-grid-item.sb-grid-size-1x4 {
  font-size: 12px;
}

Please note not to use the randomly generated classnames that are prefixed with svelte- (for example: svelte-lo95p). As those are used for scoping internal CSS and change for each minor version update of the Shopbox Grid.

# 2.3 Custom fonts

Using custom fonts in the grid is also straight forward. Only thing to note here is that the Grid Builder preview will not show font changes, as we do not load the fonts ourselves. Fonts are expected to be loaded on the page on the page, on the clients website, where the grid is rendered.

# 2.4 Image aspect ratios for banners

Banners in the shobpox grid can range from size 1-4 columns each. These are the aspect ratios we recommend for each size:

• Baners with 1 column size: 4/3.
• Banners ranging from 2 to 4 columns in size: 21/9.

If a different aspect ratio is needed for any of the sizes it can be changed with CSS.