Skip to content

Theme v1.0.0Shopify Dawn 15.4.1

Theme Blocks

Theme blocks are reusable pieces stored in the theme’s blocks/ folder. Unlike ordinary section blocks, they can be used in any section that accepts them, and some can hold other blocks inside them. NAVEGaid ships 25 theme blocks.

Sections that accept theme blocks

SectionBlocks it is built from
Featured collectionHeader, Collection title, View all button, Product card and its card blocks
Hero with overlayGroup, Heading, Subheading, Text, Button
Why chooseWhy heading, Why group, Why icon, Why title, Why text
FAQ with imageFAQ title, FAQ row
Press cardsPress card

These sections also accept app blocks and the Custom Liquid block.

Adding and nesting blocks

  1. Select the section

    In the theme editor sidebar, select one of the sections above.

  2. Add a block

    Select Add block under the section and choose from the list.

  3. Nest blocks inside a container

    Container blocks — Group, Why group, Header and Product card — have their own Add block button. Drag blocks in the sidebar to reorder them.

The Featured collection section shows products from the collection chosen in its settings. Its Product card block is a template: the blocks you place inside it are repeated for every product shown.

BlockFilePurpose
Headercollection-headerContainer for the title and button, with layout and alignment.
Collection titlecollection-titleThe collection name, or your own title.
View all buttoncollection-view-allLink to the full collection.
Product cardproduct-cardContainer repeated for each product.
Mediacard-mediaProduct image, optional second image and zoom on hover, badges.
Product titlecard-titleProduct name.
Pricecard-pricePrice with optional compare-at price.
Review starscard-review-starsStar rating with optional review count.
Swatchescard-swatchesColor swatches for variants.
SKUcard-skuVariant SKU with an optional prefix.
Buy buttonscard-buy-buttonsAdd to cart button.

Hero blocks

BlockFilePurpose
Grouphero-groupContainer with layout, width, background and padding; stacks on mobile.
Headinghero-headingMain heading, with an optional italic phrase.
Subheadinghero-subheadingShort line above or below the heading.
Texthero-textParagraph text.
Buttonhero-buttonPrimary or secondary button with hover colors.

Why choose blocks

BlockFilePurpose
Why headingwhy-headingSection heading and description.
Why groupwhy-groupContainer for one reason — holds an icon, title and text.
Why iconwhy-iconBuilt-in icon or your own image.
Why titlewhy-titleTitle of the reason.
Why textwhy-textSupporting text.

FAQ and press blocks

BlockFilePurpose
FAQ titlefaq-titleFAQ heading and description.
FAQ rowfaq-rowOne question and answer.
Press cardpress-cardPublication logo, heading, quote, image and link.

Custom Liquid

The Custom Liquid block (custom-liquid) adds HTML or Liquid inside any section that accepts theme blocks. See Customization.

Next

Build the product page in Product Setup.

Was this page helpful?

Tell us whether this page answered your question.