Merch Grid

Merch Grid (Shopify Integration)

This enables us to pull Merch directly from Shopify from a designated collection onto an Atlas website. Both product info and order on the page are managed in Shopify. Instructions/Options are below the demo.

Jump To Instructions

Instructions/Options

JS Options

domain: string – the domain for the store
storefrontAccessToken: string – public API token (NOTE: you MUST confirm with Milton the configuration of that token first)
targetDivId: string – the ID for the element that the merch grid will be in.
useGroups: boolean (default false) – do you want to use the groups (collections) from Shopify
showPrice: boolean (default false) – do you want to show prices
currencySymbolOnRight: boolean (default false) – do you want the currency symbol on the right
currencySpacer: string (default '') – the spacer between the currency symbol and the number
fullCollectionName: string – the slug for the collection that contains all products to show in the grid
merchLiveInApp: boolean (default false) – do you want to enable the buttons to buy merch in the app
buyNowText: string (default 'Buy Now In The App') – the text for the buy button
appDeepLink: string – the deep link scheme for the “Merch” page in the app
debugMode: boolean (default false) – do you want to enable debugging console messages

SCSS Variables

$grid-size: 3;
$spacing: 20px;
$merch-radius: 3px;
$grid-text-align: center;
$title-size: 20px;
$title-weight:bold;
$title-line-height:$title-size;
$li-has-price-text-align:left;
$price-font-size:14px;
$price-font-weight:normal;
$price-margin: $spacing/2 0 0 0;
$container-spacing: $spacing;
$container-border: 1px solid #ccc;
$container-border-radius:$merch-radius;
$container-bg: #f1f1f1;
$image-fallback-color:#f3f4f6;
$merch-image-area-aspect-ratio:1/1; //4 / 3 Or 1 / 1 for square, 16 / 9 for widescreen
$small-breakpoint:600px;
$merch-modal-close-content: "\00d7"; //"×"
$merch-modal-container-width:1024px;
$merch-modal-container-bg:#fff;
$merch-modal-overlay-background:rgba(black, .85);
$merch-modal-title-font-size:40px;
$merch-modal-title-font-size-small:20px;
$merch-modal-title-weight:bold;
$merch-modal-title-margin:0 0 $spacing;
$merch-image-area-margin:0 0 $spacing;
$merch-modal-body-padding: 0 $spacing $spacing $spacing;
$merch-modal-price-font-size: $merch-modal-title-font-size*.5;
$merch-modal-price-weight: normal;
$merch-modal-price-margin:$spacing 0;
$merch-modal-button-font-size:18px;
$merch-modal-button-font-weight:bold;
$merch-modal-button-color:#fff;
$merch-modal-button-background:#1B6EF3;
$merch-modal-button-color-hover:#fff;
$merch-modal-button-background-hover:darken($merch-modal-button-background, 20%);
$merch-modal-button-text-transform:capitalize;
$merch-modal-button-radius: $merch-radius;
$merch-modal-button-padding:$spacing/2 $spacing;