Theme documentation
Hangtag
A calm, tactile theme for makers who sell in small batches: ceramics, skincare, clothing and other goods with a story.
Need help? Send us a message and we reply within two business days.
Getting started
- In the Shopify Theme Store, open Hangtag and click Try theme. The theme is added to Online Store → Themes in your Shopify admin.
- Click Customize to open the theme editor. Everything in this guide is done there, without code.
- Choose a style, set your colours and fonts under Theme settings, then build the home page section by section.
- When you are happy, click Publish on the theme. You pay for the theme only when you publish it.
The three styles
Hangtag comes with three styles. They share the same sections and settings and differ in colours and mood.
- Hangtag: Lilac and peach. Made for ceramics, candles and homeware.
- Fennel: Sage green and coral. Made for skincare, wellness and refills.
- Seaglass: Soft blue and yellow. Made for clothing and goods that last.
To switch, open Theme settings (the cog icon) in the theme editor, find Theme style and choose Change theme style.
Build the home page
The demo home pages use these sections, in this order. Add them from the theme editor with Add section.
Hangtag: Hero → Value strip → Featured collection → Collection list → Image with text → Blog posts → Email signup
Fennel: Hero → Value strip → Featured collection → Collection list → Image with text → Blog posts → Email signup
Seaglass: Hero → Value strip → Featured collection → Collection list → Image with text → Blog posts → Email signup
Show a product in the hero
Open the Hero section and pick a product under Product price tag. The product name and price appear on a tag over the hero image, with a button to the product. Add a short Sticker text, such as a batch number, to show a round sticker on the image.
Short facts under the hero buttons
Add up to four Short fact blocks to the Hero section. Each one shows with a tick, for example “Ships in two days”.
Theme settings
Theme settings apply to the whole store. Open them with the cog icon in the theme editor.
Colors
| Setting | Type | Notes |
|---|---|---|
| Page | ||
| Background | Color | |
| Text | Color | |
| Cards and header | ||
| Background | Color | |
| Text | Color | |
| Highlight | ||
| Background | Color | |
| Text | Color | |
| Second highlight | ||
| Background | Color | |
| Text | Color | |
| Buttons | ||
| Background | Color | |
| Text | Color | |
| Dark sections | ||
| Background | Color | |
| Text | Color | |
Typography
| Setting | Type | Notes |
|---|---|---|
| Headings | Font | |
| Heading size | Slider | From 80 to 130 %. |
| Body text | Font | |
| Body text size | Slider | From 14 to 20 px. |
Layout
| Setting | Type | Notes |
|---|---|---|
| Page width | Choice | Options: Standard, Wide. |
| Page margin | Slider | From 12 to 60 px. |
Buttons and corners
| Setting | Type | Notes |
|---|---|---|
| Button corner radius | Slider | From 0 to 30 px. |
| Show a pressed edge under buttons | Checkbox | |
| Card corner radius | Slider | From 0 to 32 px. |
| Input corner radius | Slider | From 0 to 20 px. |
Social media
| Setting | Type | Notes |
|---|---|---|
| Text | https://instagram.com/shopify | |
| Text | https://facebook.com/shopify | |
| TikTok | Text | https://tiktok.com/@shopify |
| YouTube | Text | https://www.youtube.com/shopify |
| Text | https://pinterest.com/shopify | |
| X | Text | https://x.com/shopify |
Favicon
| Setting | Type | Notes |
|---|---|---|
| Favicon image | Image | Shown at 32 x 32 px in browser tabs. |
Header and footer
Announcement bar
A single line above the header for delivery thresholds, offers or opening hours.
| Setting | Type | Notes |
|---|---|---|
| Text | Text | |
| Link | Link | |
| Color | Choice | Options: Dark, Highlight, Second highlight, Button color. |
Header
Logo, main menu, search, account and cart. Menus support up to three levels: a top-level item, a dropdown and one more level inside the dropdown.
| Setting | Type | Notes |
|---|---|---|
| Logo | Image | |
| Logo width | Slider | From 60 to 280 px. |
| Menu | Menu | |
| Customer account menu | Menu | Shown when customers select the account icon. |
| Keep the header visible while scrolling | Checkbox |
Footer
Your store name with a short text, menu and text columns, social icons, country and language selectors and payment icons.
| Setting | Type | Notes |
|---|---|---|
| Text under the store name | Text | |
| Show social media icons | Checkbox | Add your links in Theme settings > Social media. |
| Show Follow on Shop button | Checkbox | Shop Pay must be enabled for the button to show. |
| Show country/region selector | Checkbox | |
| Show language selector | Checkbox | |
| Show payment icons | Checkbox |
Block: Menu
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | Leave empty to use the menu name. |
| Menu | Menu |
Block: Text
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Text | Text |
Up to 4 blocks.
Sections
These sections can be added to the home page and to most other pages.
Hero
The first screen of the home page: a small label, a large heading, text and up to two buttons, with short facts underneath. Beside them, an image with an optional sticker and a price tag for one product.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Highlight, Second highlight, Soft, Page background, Dark. |
| Label above the heading | Text | |
| Heading | Text | |
| Text | Text | |
| Button label | Text | |
| Button link | Link | |
| Second button label | Text | |
| Second button link | Link | |
| Image | ||
| Image | Image | |
| Color behind the image | Choice | Options: Second highlight, Highlight, Soft, Card background. |
| Sticker text | Text | Keep it under 14 characters. |
| Product price tag | Product | Shows the product name and price on a tag over the image. |
Block: Short fact
| Setting | Type | Notes |
|---|---|---|
| Text | Text |
Up to 4 blocks.
Value strip
A thin row of short statements, usually placed under the hero, such as how you make or ship your products.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Card background, Page background, Soft, Dark. |
Block: Value
| Setting | Type | Notes |
|---|---|---|
| Text | Text |
Up to 5 blocks.
Featured collection
A row of products from one collection, with a heading and a link to the full collection.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Collection | Collection | |
| Products to show | Slider | From 2 to 12. |
| Columns on desktop | Slider | From 2 to 5. |
| Link to the collection | Text |
Collection list
Colour tiles that link to your collections, each with a title and a short line of text.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text |
Block: Collection
| Setting | Type | Notes |
|---|---|---|
| Collection | Collection | |
| Title | Text | Shown when no collection is selected. |
| Short text | Text | Leave empty to use the collection description. |
| Color | Choice | Options: Highlight, Second highlight, Soft, Card background, Dark. |
| Show collection image | Checkbox |
Up to 6 blocks.
Image with text
An image next to a heading, text, a short list of points and a button. Use it to tell your story.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Dark, Page background, Card background, Highlight, Second highlight, Soft. |
| Image | Image | |
| Image position on desktop | Choice | Options: Left, Right. |
| Heading | Text | |
| Text | Text | |
| Button label | Text | |
| Button link | Link |
Block: Point
| Setting | Type | Notes |
|---|---|---|
| Text | Text |
Up to 5 blocks.
Blog posts
The latest posts from one blog, with image and title.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Blog | Blog | |
| Posts to show | Slider | From 2 to 6. |
| Link to the blog | Text |
Email signup
An email signup box. New subscribers appear under Customers in your Shopify admin.
| Setting | Type | Notes |
|---|---|---|
| Color | Choice | Options: Button color, Highlight, Second highlight, Soft, Card background. |
| Small label | Text | |
| Heading | Text | |
| Text | Text | |
| Button label | Text |
Contact form
A contact form, used on the Contact page. Messages are sent to the sender email of your store.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Show phone field | Checkbox | |
| Button label | Text |
Custom Liquid
A place for your own Liquid or HTML, for example a snippet from an app.
| Setting | Type | Notes |
|---|---|---|
| Liquid code | Code | Add app snippets or other code to create advanced customizations. |
Custom section
An empty section that accepts theme blocks, for simple custom layouts.
| Setting | Type | Notes |
|---|---|---|
| Background | Image |
Product, collection and other pages
Each page type has its own template. Open one from the page selector at the top of the theme editor.
Product
The product page. Its blocks can be reordered, hidden or removed in the theme editor.
| Setting | Type | Notes |
|---|---|---|
| Image fit | Choice | Options: Fill the frame, Show the whole image. |
Block: Vendor (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Title (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Price (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Description (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Variant picker (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Buy buttons (up to 1)
| Setting | Type | Notes |
|---|---|---|
| Show quantity selector | Checkbox | |
| Show dynamic checkout buttons | Checkbox | Customers see their preferred payment method, like PayPal or Apple Pay. |
| Show pickup availability | Checkbox |
Block: Text
| Setting | Type | Notes |
|---|---|---|
| Text | Text |
Block: Collapsible row
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Content | Text | |
| Content from a page | page | Replaces the content above. |
| Open by default | Checkbox |
Block: Custom Liquid
| Setting | Type | Notes |
|---|---|---|
| Liquid code | Code | Add app snippets or other code to create advanced customizations. |
This section also accepts app blocks.
Related products
Products that Shopify recommends for the product being viewed.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Products to show | Slider | From 2 to 8. |
| Columns on desktop | Slider | From 2 to 5. |
Collection
The collection page: a colour header with the collection description, then filters, sorting and the product grid.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Highlight, Second highlight, Soft, Page background, Dark. |
| Show collection description | Checkbox | |
| Products per page | Slider | From 8 to 36. |
| Columns on desktop | Slider | From 2 to 4. |
| Enable filtering | Checkbox | Customize filters with the Shopify Search & Discovery app. |
| Enable sorting | Checkbox |
Collections grid
The page that lists all your collections.
| Setting | Type | Notes |
|---|---|---|
| Show collection images | Checkbox | |
| Collections per page | Slider | From 6 to 30. |
Cart
The cart page, with an optional free shipping message, an order note and dynamic checkout buttons.
| Setting | Type | Notes |
|---|---|---|
| Free shipping from | Number | Order value in your store currency. Leave empty to hide the progress bar. It does not create the shipping rate; set that up in Settings > Shipping and delivery. |
| Show order note | Checkbox | |
| Show dynamic checkout buttons | Checkbox |
Blog
The blog page, with tag links and pagination.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Highlight, Second highlight, Soft, Page background, Dark. |
| Show tag links | Checkbox | |
| Posts per page | Slider | From 3 to 24. |
Article
A single blog post, with comments if you have them enabled in your Shopify admin.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Highlight, Second highlight, Soft, Page background, Dark. |
| Show author | Checkbox |
Search
The search results page.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Highlight, Second highlight, Soft, Page background. |
| Results per page | Slider | From 8 to 36. |
| Columns on desktop | Slider | From 2 to 4. |
Predictive search
The suggestions that appear while a shopper types in the search field. It has no settings.
Page
A standard page. It shows the page title and content and has no settings.
Not found
The page shown when an address does not exist.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Highlight, Second highlight, Soft, Page background, Dark. |
Password
The page shown while your store is password protected.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Highlight, Second highlight, Soft, Page background, Dark. |
| Heading | Text | |
| Show email signup | Checkbox |
Gift card
The page a customer sees after buying a gift card: balance, code, a QR code and an Add to Apple Wallet button. It has no settings.
Frequently asked questions
How do I switch between the three styles?
In the theme editor, open Theme settings (the cog icon), find Theme style and choose Change theme style. Switching style changes colours and fonts. It does not change your sections or your content.
How do I make a dropdown menu?
In your Shopify admin go to Content → Menus and open your main menu. Drag a menu item slightly to the right under another item to nest it. The theme shows up to three levels.
Why do some cards say “Choose options” instead of “Quick add”?
Quick add appears on products with a single variant, because they can go straight to the cart. Products with sizes, colours or other options show Choose options and open the product page. Sold-out products show View.
The vendor name does not show on my product cards.
Cards show the vendor only when it is different from your store name. If every product is made by you, the line is hidden to keep the cards clean.
How do I change wording such as “Add to cart”?
In your Shopify admin go to Online Store → Themes, click the three dots next to the theme and choose Edit default theme content. Search for the text and type your own.
Can I use the theme in another language?
Yes. The storefront text can be translated with the free Shopify Translate & Adapt app, and you can edit any phrase under Edit default theme content.
How do I hide the author on blog posts?
Open a blog post in the theme editor, select the blog post section and untick Show author.
How do I add the Contact page?
Create a page in Online Store → Pages and choose the template contact. A new store already has a Contact page that uses it.
Does the theme work with apps?
Yes. The product page accepts app blocks, and every page accepts app embeds. We cannot fix problems inside an app, but we will tell you if the theme is the cause.
How do I update the theme?
When a new version is available, your Shopify admin shows a notice on the theme under Online Store → Themes. The update keeps the changes you made in the theme editor. Changes made by editing code are not carried over.
Can I edit the code?
You can, but please duplicate the theme first (three dots → Duplicate) and work on the copy. Code changes are not covered by support. For custom work we suggest hiring a Shopify Partner.
Support policy
We answer every message sent through the support form within two business days, Monday to Friday.
Included with the theme: answers to questions about the theme and its settings, and fixes for bugs in the theme.
Not included: custom design or code changes, setting up your store or your content, and problems caused by third-party apps or by edited theme code. For this kind of work we suggest hiring a Shopify Partner.
Before you edit any code, duplicate your theme and work on the copy.
Changelog
Version 1.0.0: first release.