Primary colours
Black
#000 (100%)
Black (off black)
#241D18 (100%)
Gold
#AE8A6B (100%)
Navy
#1E293A (100%)
Red
#940709 (100%)
Valentines Red
#990C39 (100%)
Refavored
#30310E (100%)
Refavored Orange
#D87A26 (100%)
White
#FFF (100%)
Greys
1. Super Light
#F2F2F2 (100%)
2. Light
#EBEBEB (100%)
3. Pale
#D8D8D8 (100%)
4. Medium Light
#8A8989 (100%)
5. Medium
#929292 (100%)
6. Regular
#86827F (100%)
7. Dark
#433E3E (100%)
Fonts - Headings
Headline 1
Lorem ipsum dolor sit amet consectetur adipisicing elit
Headline 2
Lorem ipsum dolor sit amet consectetur adipisicing elit
Headline 3
Lorem ipsum dolor sit amet consectetur adipisicing elit
Headline 4
Lorem ipsum dolor sit amet consectetur adipisicing elit
Headline 5
Lorem ipsum dolor sit amet consectetur adipisicing elit
Headline 6
Lorem ipsum dolor sit amet consectetur adipisicing elit
Headline 7
Lorem ipsum dolor sit amet consectetur adipisicing elit
Headline 8
Lorem ipsum dolor sit amet consectetur adipisicing elit
Fonts - Menu
Menu Heading
Menu List Item
superscript
New
Fonts - Body
Body Large
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body Regular
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body small
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body x-small
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body label
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body small label
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body eyebrow
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body caption
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body medium (serif)
Lorem ipsum dolor sit amet consectetur adipisicing elit
Body medium
Lorem ipsum dolor sit amet consectetur adipisicing elit
Misc
Badge
Tagalys Recs Examples
example: Regina Chocolate: 183631697
Alpine.store('tagalysRecs').getRecs({
productId: '12345',
targetMarkupId: 'my-recs-div',
view: 'tagalys-recs',
onComplete: () => alert('My recs are loaded'),
limit: 8,
})
- productId product ID to base the recs off
- targetMarkupId The ID of a div on the current page where you want the recs to be injected
-
view Takes a value of 'tagalys-recs' or 'recs-alt', these are
templates/search.
.liquid templates - new ones can be created to achieve alternate rec layouts - onComplete (optional) Default is null. Option to do something after recs loaded (might be used for skeleton state)
- recommendationId (optional) Default is 'e3f4dab0ad3a47afc06a' - Tagalys ID for how it chooses recs
- limit (optional) Default is 4 - How many products to show
Vertical Recs
Used for vertical recs (but parent class makes this a horizontal grid here)
Uses view: templates/search.tagslys-recs.liquid
Show 4 products
Alternate layout example (full card)
Uses view: templates/search.recs-alt.liquid
Full product card
Show 6 products
Intersect example
Uses view: templates/search.recs-alt.liquid
Full product card
Show 4 products
Uses 6701201129544 rather than input (Windsor handbag)



