Odin Design Docs

Get Ragnok Here!

Documentation

Ragnok

shopify

Changelog

Release Notes

v1.0.0

We’ve added the ability to customize heading sizes for desktop and mobile resolutions, sections and blocks have been added as well as new options for each section, section and block options are delimited by a separating line and grouped with a heading that indicates which part of the section or block they relate to and are ordered so that their positions are predictable and easy to find, color scheme options are available for each section, file information can be added to your products so that your customers can easily know the amount, type and extension of the files that each product includes, and more!.

Added

Sections

  • Added Utility bar section, which allows the display of language and country selectors and social media icons.
  • Added Breadcrumbs section, which allows the display of site breadcrumbs with an optional home link at the start.
  • Added Brand list section, which allows the display of a heading, description and a carousel or list of images with optional links.
  • Added Social links section, which allows to display a list of social links.

Header

  • Added Heading size option, which allows to customize the size of the store name that displays when no logo is used.
  • Added Display cart preview information option, which allows to display cart total next to the cart icon.
  • Added Megamenu collections options, which allow to display up to 3 collections when using the Mega menu menu type.

Featured collection

  • Added Button label option, which allows to customize the View all button text.
  • Added Button position option, which allows to display the View all button next to the heading or at the bottom of the section.
  • Added Button style option, which allows to select the style of the View all button.
  • Added Column width option, which allows to set a fixed width for grid items.
  • Added Carousel doesn’t overflow page width option.
  • Added Show collection option, which allows to display collection information in product cards.
  • Added Show file list option, which allows to display file information in product cards.
  • Added File list size option, which allows to select the size of image that is used for displaying file types in product cards.

Featured product

  • Added Show color scheme background option, which allows to select if color scheme applies to section or product information box only.

Collection list

  • Added Button label option, which allows to customize the View all button text.
  • Added Button position option, which allows to display the View all button next to the heading or at the bottom of the section.
  • Added Button style option, which allows to select the style of the View all button.
  • Added Pre heading option, which allows to enter text that displays before the heading of the collection.
  • Added Heading size option, which allows to select collection heading size.
  • Added Show collection description option.
  • Added Button label option, which allows to display a button in each collection which links to it.
  • Added Column width option, which allows to set a fixed width for grid items.
  • Added Make collections full width option.
  • Added Enable carousel on desktop option.
  • Added Carousel doesn’t overflow page width option.

Image with text

  • Added Show color scheme background option, which allows to select if color scheme applies to section or image with text content box only.
  • Added Layout option, which allows to select between grid and full width section layouts.

Slideshow

  • Added Color scheme option, which allows to select the color scheme used by the section.
  • Added Button style option, which allows to select the style of buttons used in slides.
  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.

Multicolumn

  • Added Show color scheme background option, which allows to select if color scheme applies to section or column boxes only.
  • Added Layout option, which allows to select between grid, narrow and full width section layouts.
  • Added Button position option, which allows to display the View all button next to the heading or at the bottom of the section.
  • Added Button style option, which allows to select the style of the View all button.
  • Added Column type option, which allows to select between Feature box and Promo box types.
  • Added Heading size option, which allows to select column heading size.
  • Added Heading line height option, which allows to select column heading line height.
  • Added Button style option, which allows to select the style of column buttons.

Collapsible content

  • Added Layout option, which allows to select between grid and narrow section layouts.

Email signup

  • Added Layout option, which allows to select between grid and full width section layouts.
  • Added Content type option, which allows to display content in a row or column.
  • Added Content alignment option, which allows to align content to the left, center or right when using column content type.
  • Added Button style option, which allows to select the style of the form button.
  • Added Background image option, which allows to set a background image for the section.

Contact form

  • Added Layout option, which allows to select between grid and narrow section layouts.
  • Added Button style option, which allows to select the style of the form button.

Video

  • Added Layout option, which allows to select between grid, narrow and full width section layouts.

Featured blog

  • Added Button label option, which allows to customize the View all button text.
  • Added Button position option, which allows to display the View all button next to the heading or at the bottom of the section.
  • Added Button style option, which allows to select the style of the View all button.
  • Added Show comment count option, which allows to display article comment count.
  • Added Show excerpt option, which allows to display the article excerpt.
  • Added Show tags option, which allows to display article tags.

Page

  • Added Layout option, which allows to select between grid, narrow and full width section layouts.

Apps

  • Added Color scheme option.
  • Added Layout option, which allows to select between grid, narrow and full width section layouts.
  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.

Product information

  • Added Color scheme option.
  • Added Show color scheme background option, which allows to select if color scheme applies to section or product information box only.
  • Added Stacked full width to Desktop layout option, which allows to display full width stacked product images.
  • Added File list block, which allows to display a list of file types that a product includes.
  • Added File table block, which allows to display a list of file types that a product includes.
  • Added Tags block, which allows to display product tags.
  • Added Collection block, which allows to display product collections.
  • Added Social share block, which allows to display share buttons for Facebook and Twitter.

Product recommendations

  • Added Show collection option, which allows to display collection information in product cards.
  • Added Show file list option, which allows to display file information in product cards.
  • Added File list size option, which allows to select the size of image that is used for displaying file types in product cards.

Collection banner

  • Added Content position option, which allows to customize the position of collection banner content.
  • Added Heading size option, which allows to select collection banner heading size.
  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.

Product grid

  • Added Show color scheme background option, which allows to select if color scheme applies to section or product filters only.
  • Added Show collection option, which allows to display collection information in product cards.
  • Added Show file list option, which allows to display file information in product cards.
  • Added File list size option, which allows to select the size of image that is used for displaying file types in product cards.

Collections list page

  • Added Color scheme option.
  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.
  • Added Heading size option, which allows to select section heading size.
  • Added Pre heading option, which allows to enter text that displays before the heading of the collection.
  • Added Heading size option, which allows to select collection heading size.
  • Added Show collection description option.
  • Added Button label option, which allows to display a button in each collection which links to it.

Blog posts

  • Added Color scheme option.
  • Added Heading size option, which allows to select section heading size.
  • Added Articles per page option, which allows to select amount of articles to display per page.
  • Added Show comment count option, which allows to display article comment count.
  • Added Show excerpt option, which allows to display the article excerpt.
  • Added Show tags option, which allows to display article tags.

Blog post

  • Added Color scheme option.
  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.
  • Added Heading size option, which allows to select comment form heading size.
  • Added Comment style option, which allows to select between standard and boxed comment styles.
  • Added Metadata block, which allows to display blog post date and author.
  • Added Tags block, which allows to display blog post tags.
  • Added Social share** block, which allows to display share buttons for Facebook and Twitter.

Main cart items

  • Added Color scheme option.
  • Added Heading size option, which allows to select section heading size.

Subtotal

  • Added Color scheme option.
  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.

Main 404

  • Added Color scheme option.
  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.
  • Added Heading size option, which allows to select section heading size.

Password footer

  • Added Top padding option, which allow to customize section top padding.
  • Added Bottom padding option, which allow to customize section bottom padding.

Search results

  • Added Color scheme option.
  • Added Show color scheme background option, which allows to select if color scheme applies to section or search filters only.
  • Added Heading size option, which allows to select section heading size.
  • Added Results per page option, which allows to select amount of items to display per page.
  • Added Show collection option, which allows to display collection information in product cards.
  • Added Show file list option, which allows to display file information in product cards.
  • Added File list size option, which allows to select the size of image that is used for displaying file types in product cards.
  • Added Show excerpt option, which allows to display the article excerpt.
  • Added Show tags option, which allows to display article tags.

Blocks

Rich Text

Buttons

  • Added Button style option, which allows to select the style of the buttons.

Image with text

Button

  • Added Button style option, which allows to select the style of the button.

Image banner

Buttons

  • Added Button style option, which allows to select the style of the buttons.

Slideshow

Slide

  • Added Use a different image overlay opacity on mobile option.
  • Added Overlay opacity on mobile option.
  • Added Pre heading option, which allows to enter text that displays before the heading of the slide.
  • Added Heading size option, which allows to select slide heading size.
  • Added Heading line height option, which allows to select slide heading line height.

Collage

Image

  • Added Link option, which allows to add a link to the image.

Multicolumn

Column

  • Added Background image option, which allows to set a background image for the column.
  • Added Overlay opacity option.
  • Added Pre heading option, which allows to enter text that displays before the heading of the column.

Theme settings

Colors

  • Added Text highlight primary color, which is used to highlight text (e.g. bold text, hover text, etc).
  • Added Accent 1 text secondary color, which is used as foreground color on Accent 1 color.
  • Added Accent 2 text secondary color, which is used as foreground color on Accent 2 color.
  • Added Backgroud image text other color, which is used on text that displays on top of background images.
  • Added Shadow other color, which is used as shadow color on text and boxes that have a shadow.
  • Added Product rating filled star other color, which is used on rating stars when they are filled.
  • Added Product rating empty star other color, which is used on rating stars when they are empty.

Typography

  • Added Use Ragnok custom font option, which allows to use the Jost custom font used in Raven theme style.
  • Added Base text size option.
  • Added Bold text strength option.
  • Added Uppercase text use option.
  • Added Font size (on desktop) and Font size (on mobile) options for all headings (h1, h2, h3, h4. h5, h6) including the addition of 2 new sizes of headings (hxl and h0).

Layout

  • Added Page width narrow option, which allows to customize width used for narrow page layouts.
  • Added Horizontal space and Vertical space options for articles and footer multicolumn layouts, which allows to control spacing for each grid separately.

Product Cards

  • Added Price style option, which allows to select the price style used in product cards.
  • Added File list style option, which allows to select the type of image that is used for displaying file types on products.
  • Added Hidden collections option, which allows to enter the name of one or more collections to hide in product details.

Open Product

  • Added Open product section.
  • Added Padding top option, which allows to customize the top padding of the open product information.
  • Added Price style option, which allows to select the price style used in the open product information.
  • Added Reviews section.
  • Added Style option, which allows to select between standard and boxed review styles.

Collection Cards

  • Added Content position option, which allows to customize the position of collection card content.

Blog Cards

  • Added Standard V2 to Style option, which allows a new type of blog card display.
  • Added Tag style option, which allows to select the tag style used in blog cards.
  • Added Heading size option, which allows to select heading size used in blog cards.

Open Article

  • Added Open article section.
  • Added Featured image width option, which allows to select the width used to display open article featured images.

Brand Cards

  • Added several options to allow control of brand cards Border and Shadow.

Content Containers

  • Added Text shadow option, which allows to customize shadow opacity on text that displays over background images.

Slideshow

  • Added Slideshow section.
  • Added Button style option, which allows to select the type of button that is used for displaying slideshow controls.
  • Added Border option, which allows to customize slideshow controls corner radius.

Badges

  • Added Search badge color scheme option, which allows to select color scheme used for search badges.

Social Media

  • Added Discord, Patreon and Twitch options, which allows to enter respective links for social media.

Search Behaviour

  • Added Show collection option, which allows to display product collection information when product suggestions is enabled.

Cart

  • Added Show collection option, which allows to display product collection information in the cart.
  • Added Color scheme option, which allows to select the color scheme that is used in the cart drawer.

Fixes and other improvements

  • All section and block options are delimited by a separating line and grouped with a heading that indicates which part of the section or block they relate to.
  • Section and block option groups are ordered so that their positions are predictable and easy to find (e.g. ‘Style and layout’ option group is always at the top and includes color scheme, section padding options, etc).
  • Language and country selectors can be used more than once in the same page (e.g. in the Utility bar and Footer).