Inspiration

My Brick Home
Get the Look

My Brick Home

Initial set up

Create a blog post in the "My Brick Home" Blog

Title the blogpost with the year and then the season ex. 2024 Summer
After creating the blogpost, go to "More Actions" and then "Edit Metafields"
There is a metafiled set labelled "My Brick Home", this is where we will fill in the information.

Fill in My Brick Home Blog post metafields

Select or upload the Header Image, this will be the main banner image. Usually the cover photo from the catalogue
Set up Navigation/Section Titles This section will set up the pages navigation and connects to the My Brick Home metaobject. This is a list that can be rearranged as needed. It will always load the section in the same order as the nav is left to right. You can use NBSP unicode to ensure they look stylish in the final product. Use the format "English Section|French Section". The English MUST match the title AND handle of the correlating metaobject entry.The English

Header Text English and French are where the main banner title and button are written. Use HTML. Ex:

<h1 class="lato-black">My Brick Home</h1><a class="mbh-button centermbh alice-regular" href="/pages/my-brick-home-summer-2024-catalogue">View the Full Catalogue<i class="fas fa-chevron-right"></i></a>

Utility Classes for Main /blogs/my-brick-home/YEAR-SEASON


  <script type="text/template" class="insertcollection">{
      "codenameOfCollection": [["SCARBLSF", "AMALFIQM", "BGL4ETQM", "CRLTONTM"], "home-page-october-14-2022-featured-products-date-october-14-2022-october-28-2022"]
  }</script>
  
  <div id="insertcollection_codenameOfCollection"></div>

There's 2 parts to inserting a base collection. The #insertcollection_codenameOfCollection div will be where the collection is inserted. This div's id needs to start with insertcollection_.

The script is located in the <script type="text/template" class="insertcollection">. You can copy the format from above, the first array is the order and skus that will be used followed by the collection handle that contains all the products you've chosen. If one doesn't exist it will need to be created.
"codename": [["sku array"], "handle"]

Homepage example


  <script type="text/template" class="insertcollection">{
  "testcollection1": [["SCARBLSF:img2::pos3 img3 col2 row2", "AMALFIQM", "BGL4ETQM", "CRLTONTM"], "home-page-october-14-2022-featured-products-date-october-14-2022-october-28-2022"]
  }</script>
  
  <div id="insertcollection_testcollection1" class="cards salebadge savestory"></div>

Similar to the base code. Featured images are supported using a double colon(::) after the sku in the collection array SCARBLSF::pos3 img3 col2 row2.

By default all products will show the first image set. If you'd like to use a different image, add a single colon(:) with imgX for example SCARBLSF:img2. This must go directly after the sku (and before the double colon if it's being used for the featured section).

posX = positioned Xth spot (from top left)
imgX = uses Xth image
colX = spans X rows (horizontally) - optional (will default to 1 if not specified)
rowX = spans X rows (vertically) - optional (will default to 1 if not specified)

There is also the class="cards salebadge". "cards" will add padding and boxshadows, while "salebadge" will add the sale circle for applicable product.

When selecting the "featured image" make sure to count starting at 0. This number system aligns with how liquid calls the images for example product.images[0] is the first image.

Homepage example 2 (Mattresses)


  <script type="text/template" class="insertcollection">{
  "testcollectionM": [["AMALFIQM", "BGL4ETQM", "DERBYCQM", "CRLTONTM"], "home-page-october-14-2022-featured-products-date-october-14-2022-october-28-2022"]
  }</script>
  
  <div id="insertcollection_testcollectionM" class="cards salebadge mattress"></div>

Adding the "mattress" tag will force all products pulled to use the 4th image (used for lifestyle images when only mattresses).

Add to cart support


  <script type="text/template" class="insertcollection">{
  "testcollection2": [["DARBLACC", "RWOS6547"], "home-page-june-18-2022-featured-products-date-june-18-2022-june-19-2022"]
  }</script>
  
  <div id="insertcollection_testcollection2" class="addtocart"></div>

Just add the "addtocart" class to allow customers to add them to cart!

Customized template


  <script type="text/template" class="insertcollection">{
  "testcollection3": [["DARBLACC", "RWOS6547"], "home-page-june-18-2022-featured-products-date-june-18-2022-june-19-2022"]
  }</script>
  
  <div id="insertcollection_testcollection3" class="cards"></div>
  
  <script type="text/template" class="inserttemplate" for="testcollection3">
  <li class="insertproduct" data-sku="##SKU">
    <div class="desc">
      <h5><a href="##LINK">##TITLE</a></h5>
      <div class="price" data-price="##TOTAL">##PRICE</div>
    </div>
    <div>
      <div class="langEN">Something custom</div>
      <div class="langFR">French and fabulous</div>
    </div>
    <a href="##LINK">
      <div class="product-image">
        ##BADGE
        <img class="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" data-src="##IMG" alt="##ALT" loading="lazy">
        <img src="##IMG" alt="##ALT" loading="lazy">
      </div>
    </a>	
  </li>
  </script>

The ##WORDS are dynamically replaced, these are the terms currently supported:

##ATC = Add to cart button (needs the addtocart class to show/work)
##BADGE = sale badge (needs the salebadge class to show/work)
##SKU = product sku
##TITLE = product title
##LINK = product handle/link
##ID = variant id
##IMG = featured image url
##TOTAL = unformatted price (hidden attribute in case of future scripts)
##PRICE = formatted price

Utility classes for inserted collections

Scarlett Chenille Sofa - Marine Scarlett Chenille Sofa - Marine Scarlett Chenille Sofa - Marine
$1,499.97

The following are classes that can be added to the #insertcollection_codenameOfCollection div.

CSS only
clamp = max 2 lines of text with elipses ending
cards = box shadow and padding
nolink = disables links

Other
salebadge = sale circle on applicable product
addtocart = enables add to cart button

Initiate Flexslider on any page

Base code


  <div id="insertcollection_testcollectionFlexslider" class="utility flexslider"></div>

To initialise flexslider on an element, add the classes "utility" and "flexslider".

By default, dots and arrows (for the slider navigation) will exist and be positioned below the carousel. 4 items will show at a time on desktop, while 2 will show for tablet and mobile (max screen width of 991).

The settings can be customised by overwriting the full flexslider settings OR by adding in some attributes to the .utility.flexslider div.

Adding attribute method


  <div id="insertcollection_testcollectionFlexslider" class="utility flexslider" data-move="2" data-margin="15" data-width="115" data-sml="1" data-med="3" data-lrg="5"></div>

data-move = how many items move when navigating (default is 1)
data-margin = space between items (default is 10px)
data-width = width of items (only use for small sizes when not having a fixed number of elements)

data-sml = mobile (max screen width 768px)*
data-med = tablet (max screen width 991px)*
data-lrg = desktop (min screen width 992px)*
* Number of elements to show at a given screen width

Overriding settings


  <div id="insertcollection_testcollectionFlexslider" class="utility flexslider" settings="codenameForSettings"></div>
  
  <script type="text/template" class="flexslidersettings" settings="codenameForSettings">{
    "animation": "slide",
    "controlNav": true,
    "animationLoop": true,
    "slideshow": false,
    "itemWidth": 200,
    "itemMargin": 15,
    "move": 2
  }</script>

The unique name under the "settings" attribute will link the override settings with your flexslider.

Options for Controls


  <div id="insertcollection_testcollectionFlexslider2" class="utility flexslider centerarrows outsidearrows" data-controls="arrows"></div>

Attributes
data-controls="arrows dots" (shows arrows and dots)
data-controls="arrows" (shows arrows only)
data-controls="dots" (shows dots only)

CSS classes
centerarrows = center aligns with product
outsidearrows = aligns outside so products match up with parent div

Support for divs without flexslider formatting

White/Ivory

Beige/Taupe

Grey

Blue

Black/Brown

Red

Yellow/Orange

Pink

Green

Metallic

Multicolour


  <div class="container-swatches utility flexslider" data-sml="2" data-med="3" data-lrg="5">
    <a>element 1</a>
    <a>element 2</a>
    <a>element 3</a>
  </div>

^ Changes to:


  <div class="container-swatches utility flexslider" data-sml="2" data-med="3" data-lrg="5">
    <ul class="slides">
      <li><a>element 1</a></li>
      <li><a>element 2</a></li>
      <li><a>element 3</a></li>
    </ul>
  </div>

When adding the utility flexslider classes to an element that's missing the <ul class="slides"><li></li></ul> format, the script will create the <ul class="slides"> and wrap all children elements in <li">.

Your closest store based on

Regular Hours: