Skin theme for Shopify
Theme Documentation
Getting started
Skin theme installs like any Shopify theme and shows its full demo layout right away, with sample photos in place of your products.
- In your Shopify admin go to Online Store > Themes.
- Click Add theme > Add from Theme Store (or Upload zip file if you received the theme as a file).
- Click Customize to open the theme editor, then Publish when you are ready.
What you see after installing:
- Home page: all sections from the demo, with bundled demo photos.
- Product cards: demo photos labelled “Your product’s name” until you pick your own products in each block.
- Menus: the theme uses your store’s main-menu in the header and the footer menu in the footer.
What does not come with the theme (Shopify never copies these between stores): products, collections, pages, menus, blog posts, policies and files you uploaded in the editor (for example a hero video). Add them in your admin, then select them in the editor.
The demo pages use these page templates. Create a page in Online Store > Pages and choose the template on the right:
| Page | Theme template |
|---|---|
| About us | about |
| What’s new | whats-new |
| Skincare | skincare |
| Contact | contact |
| Any other page | Default page |
Theme settings
Store-wide look and behaviour live in the editor under the gear icon, Theme settings.
| Group | What it controls |
|---|---|
| Colors | Color schemes (background, text, accents, buttons) used by every section, and the default meta description |
| Typography | Heading font, case, scale and letter spacing; body font and size; accent font; menu case |
| Layout | Page width, page side margin, spacing between sections, and snap scrolling on the home page |
| Buttons | Button corner radius and text case; input field radius |
| Favicon | The small icon shown in the browser tab (use a square image, at least 32 x 32 px) |
| Social media | Links to Instagram, Facebook, TikTok, Pinterest, YouTube, X, Threads, Snapchat, Vimeo and Tumblr. Icons appear only for links you fill in |
Color schemes. Each section has a Color scheme setting. Edit a scheme once and every section using it updates. Keep enough contrast between text and background so the store stays readable.
Snap scrolling. When on, the home page moves one full-screen section per scroll or swipe. Turn it off in Theme settings > Layout if you prefer normal scrolling. Other pages always scroll normally.
Header and footer
The header and footer are shared by every page; edit them once from any page in the editor.
Header
- Menu: pick a menu from Online Store > Navigation. Nested items (a parent with children) open as a dropdown on desktop and as an expandable list on phones.
- Logo: upload an image, or leave it empty to show your store name as text.
- Search, account and cart icons sit on the right. Search shows suggested products as you type.
- Account icon: opens Shopify’s sign-in for your customers. It works with the new customer accounts (Settings > Customer accounts).
- On the home page the header sits over the first section and its icons change color to stay readable on each section. On other pages it has its own background.
- On phones and tablets (up to 1023 px wide) the menu collapses into the menu icon.
Footer
The footer is built from blocks you can add, remove and reorder:
| Block | Use |
|---|---|
| Menu | A column of links from any menu (the demo uses “footer” and “footer-company”) |
| Text | A short paragraph, for example your address or opening hours |
| Newsletter | An email signup form; addresses appear in Customers with marketing consent |
| Social | Icons for the links set in Theme settings > Social media |
Payment icons and the copyright line appear at the bottom automatically.
Home page sections
Every home page section can be added, removed, reordered and hidden in the editor; each heading, text and button inside has its own style panel (see Builder).
| Section | What it does | Key settings |
|---|---|---|
| Hero | Full-screen opening with video or image, heading and text | Video URL or uploaded video, fallback image, separate still image for phones (no video download on phones), content position and color, own heading and text colors on phones |
| Featured collection | Product slider with a heading band (“Discover our bestsellers”) | Pick a collection or single products per block, products per view, background and heading colors |
| Image banner | Full-width image with a heading (“100% Natural”) | Image or video, vertical image position, horizontal image position on tablet, heading position, height |
| Split image | Two photos side by side with overlay text (“Limited collection”) | Two images with links, overlay text blocks, becomes a slideshow on tablets and phones |
| Our story | Image with story text and a heading over it | Image, heading, text, link; becomes two slides on phones |
| What makes us special | Heading with a checklist | Heading, list items with icons, colors |
| Statement band | A short centred statement on a colored band | Text, colors, band height |
| Image band | A wide photo strip with an optional heading | Image, heading, heading visibility per device |
| Builder section | A free layout you build yourself | See the Builder chapter |
Choosing products for Featured collection. Each product block has a product picker. Until you pick one, the card shows the demo photo with “Your product’s name”, so the layout never looks empty.
Builder
The Builder lets you design your own layouts in the editor, with the same style controls on every element and separate values for desktop, tablet and phone.
Structure. Add a Builder section, then place containers and elements inside it:
- Group, Row, Column, Grid: containers. They hold elements or other containers, so layouts can nest (a Row of Columns, each with a heading, text and button).
- Heading, Text, Button, Image, Spacer: the elements you place inside.
Style panel (every container and element):
| Group | Controls |
|---|---|
| Typography | Font, size (desktop, tablet, phone), weight, line height, letter spacing, case, color, hover color, alignment per device |
| Spacing | Padding and margin per device, written like CSS (“20px 40px” or just “20”) |
| Size | Width, max width, min height, self alignment |
| Layout | Flex or grid, direction per device, wrap, justify, align, gap per device, grid columns per device |
| Look | Background, border, corner radius, shadow |
| Position | Static, relative, absolute, sticky or fixed; inset; z-index |
| Visibility | Hide on desktop, tablet or phone |
| Animation | Fade (up, down, left, right), zoom; delay |
| Custom CSS | Extra CSS that applies only to this element |
Slideshow per device. Group, Row, Column and Grid have a Slideshow setting: Off, On phones, On tablets, or On phones and tablets. When on, the items show one at a time with arrows and swipe instead of sitting side by side. The demo “Complete care” section uses “On phones and tablets”.
Links on containers. Give a Group or Column a link and the whole area becomes clickable. Photos inside a linked container zoom gently on hover.
Tip. Numbers without a unit in spacing and size fields are read as pixels, so “24” means 24px.
Pages
The About, What’s new, Skincare and Contact demo pages are built from these sections; you can use them on any page template.
| Section | What it does | Key settings |
|---|---|---|
| Page intro | Large wordmark and title at the top of a page, with optional intro text and statement | Layout (stacked, or title only), title and text, colors per device, full-screen height |
| Image with text | Photo and text side by side (“Our core values”) | Image left or right, editorial or full-screen style, heading size, text color and weight, hide the image on phones |
| Feature columns | Cards in columns, each with a heading and text (“Aloe vera”, “Shea butter”) | Number of columns, card borders, max width, phone layout |
| Store info | Contact details block for the Contact page | Address, phone, email, opening hours, alignment |
| Contact form | Shopify contact form (name, email, phone, message) | Labels, button text; messages go to your store email |
| Custom Liquid | Paste app snippets or your own code | Liquid code field |
Contact form messages are sent to the sender email set in Settings > Notifications. Send yourself a test message after setup.
Phone order. Some sections have “order on mobile” or “hide on mobile” settings, so a page can read differently on a phone without a separate template.
Products
The product page is one section, Product information, built from blocks you can add, remove and reorder. Every block has its own typography panel.
| Block | What it shows |
|---|---|
| Title, Vendor, Price | Product name, brand and price (with compare-at price, unit price and tax note) |
| Short description | A one-line summary; set it per product or connect a metafield |
| Variant picker | Buttons or dropdowns for options such as Size; sold-out values are marked |
| Size, quantity and price | One line with the selected size, quantity selector and price |
| Quantity | A separate quantity selector |
| Buy buttons | Add to bag and accelerated checkout (Shop Pay, Apple Pay, Google Pay) |
| About / How to use / Ingredients | Three tabs; connect each to a product metafield to fill them per product |
| Certifications | Up to three badges with labels (vegan, organic, cruelty free) |
| Recommended with | One product shown as a mini card with its own Add to bag |
| Complementary products | Products set in the Search & Discovery app |
| Collapsible row | An expandable row with text or a page’s content |
| Description | The full product description |
| Pickup availability | Store pickup info when local pickup is on |
| Subscription options, Shop Pay Installments, Gift card recipient | Shown only when the product supports them |
| Share, Divider, Custom Liquid, App blocks | Share links, a line, your own code, app widgets |
Variants. Choosing a variant updates the price, compare-at price, unit price, the size labels and the URL, and shows the variant’s photo when one is assigned. A variant with no stock shows Sold out and cannot be added. To assign a photo, open the product in your admin and click the image icon next to each variant.
Sale price. Enter a Compare-at price higher than the price (on the product, or on each variant). The old price appears struck through next to the new one.
Filling the tabs per product. In Settings > Custom data > Products create metafields (for example “How to use” and “Ingredients”, type multi-line text). In the editor, select the tabs block and use the connect icon next to each field to choose the metafield. Each product then shows its own text.
Key ingredients (product template only) shows ingredient cards under the product. Featured product puts any product, with variants and Add to bag, on any page.
Collections and search
Collection and search pages show a product grid with filters on the left (in a drawer on tablets and phones).
- Filters come from Shopify’s free Search & Discovery app. Install it, then add filters such as Availability, Price and Product type. The theme shows them automatically, with checkboxes, a price slider and removable filter chips.
- Categories list in the sidebar: in the editor, open the collection template and pick up to 12 collections. Each shows its product count.
- Grid: three products per row on desktop and tablet, two on phones. Templates “collection.6” and “collection.24” show 6 or 24 products per page.
- Product cards show Sale and Sold out badges, compare-at prices and unit prices.
- Product grid section shows a hand-picked set of products on any page.
- Predictive search suggests products, collections and pages as customers type.
Filter counts look wrong after a big change? After importing products or editing stock in bulk, Shopify can take a while to recount filter values. The products shown are always correct; the small numbers next to filters catch up on their own.
Cart, checkout and customer accounts
The cart page is part of the theme; checkout and customer account pages are drawn by Shopify, so you style them in a separate editor in about 3 minutes.
Cart. Shows each item with its options, discounts with their amounts, an order note, and accelerated checkout buttons. Turn the express buttons and the note on or off in the cart template.
Match checkout and accounts to the theme:
- Go to Settings > Checkout and click Customize.
- Click the brush icon in the left bar.
- Enter these values:
| Setting | Value |
|---|---|
| Accent color | #506C61 |
| Button color | #506C61 |
| Background | #F4F1ED |
| Order summary background | #EDE8E2 |
| Heading and body font | Montserrat (or the closest available) |
| Corner radius | None or Small |
| Logo | Your logo image, or leave empty to show the store name |
- Click Save.
- In the same editor, switch the page selector at the top to the customer account pages; the same colors and font apply there.
With your own brand colors, use the color of your theme buttons for Accent and Button.
Phones and tablets
The theme has three layouts: desktop (1024 px and wider), tablet (768 to 1023 px) and phone (up to 767 px). Most text settings have separate values for each.
- Snap scrolling on phones: one swipe moves exactly one section. On iPhone the page follows the finger and settles on the next section; each section fills the screen above Safari’s bottom bar.
- Hero on phones: shows a still image instead of the video, so the page loads faster and uses less mobile data. Set the image in the Hero section under the phone settings.
- Slideshows: Split image and Builder containers set to “On tablets” or “On phones” turn into swipe slideshows with arrows.
- Wide photos on tablet: Image banner has Image horizontal position on tablet to choose which part of a wide photo stays in view on a portrait tablet.
- Menu: collapses into the menu icon on tablets and phones.
To preview, use the phone and desktop icons at the top of the theme editor. For tablet, open your store in a browser and narrow the window to about 800 px.
FAQ and troubleshooting
The account icon does nothing when I tap it. A VPN, ad blocker or private DNS on that device is blocking Shopify’s sign-in. Turn it off and try again, or test on another device. Your customers are not affected unless they use the same blocker.
My products show as “Sold out” after importing them. Shopify’s product CSV does not carry stock levels. Set quantities in Products > Bulk edit (column “Available quantity”), or turn off “Track quantity” for items you always have.
My hero video plays on desktop but not on phones. That is by design: phones get the still image from the Hero section’s phone settings, to save data and load faster.
A page I created looks plain. Check the Theme template on the right of the page in Online Store > Pages (about, whats-new, skincare or contact).
Clicking a thumbnail does not change the selected size. Thumbnails let customers browse the photos; the size is chosen with the variant buttons, so a customer always knows what goes in the bag.
The sidebar shows “0” next to a collection. That collection has no products yet. Add products, or remove it from the Categories list in the collection template.
The checkout does not match my colors. Checkout is styled separately; see Cart, checkout and customer accounts.
Snap scrolling feels wrong for my content. Turn it off in Theme settings > Layout.
Support and updates
We answer support requests within 2 business days at bluerizon.io/support.
To get help faster, include:
- your store URL (the .myshopify.com address);
- the page and the section involved;
- a screenshot or a short screen recording;
- the device and browser, if the issue appears on only one.
Support covers questions about theme settings and sections, and fixing problems in the theme itself. It does not cover custom design changes, custom code, or third-party apps.
Updates. New versions appear in Online Store > Themes with an update notice. Updating creates a new copy of the theme with your settings carried over; check it in preview before publishing. Edits you made to the theme code are not carried over, so keep a note of them.