Socle documentation
Socle shows every product the way a museum shows an object: standing on a lit plinth, with a small label underneath. This guide covers setup, the settings that are specific to Socle, and where to get help.
Getting started
- Add Socle from the Shopify Theme Store. It arrives in Online Store > Themes as an unpublished theme, so your live store does not change.
- Click Customize. Open Theme settings (the brush icon) and check the color scheme and fonts of the preset you chose.
- Set your menus in the header and footer, then fill the home page sections with your own products and collections.
- Look at a product page and a collection page with your real photos before publishing. If your photos have white backgrounds, read Product photos first.
- Click Publish when the preview looks right.
Demo store images are not included when you install the theme. Choose your own products, collections and images in each section.
Presets
Socle comes with five presets. They share every section and setting; they differ in colors and fonts. You can switch the look of a preset at any time in Theme settings.
| Preset | Made for | Headings | Palette |
|---|---|---|---|
| Socle | Wellness and apothecary | Bodoni Moda | Near-black olive, warm gold accent |
| Slipware | Home and decor | Young Serif | Dark warm brown, sage accent |
| Crystal Set | Electronics | Figtree Light | Blue-black, amber accent |
| Powder Room | Beauty | Gilda Display | Plum-black, rose accent |
| Hearthside | Pet supplies | Gloock | Forest green, gold accent |
All presets use Figtree for body text and IBM Plex Mono for labels.
Product photos
The plinth is drawn by the theme: a surface with a soft spotlight from above and a ledge at the base. Your photo sits on top of it. What looks best depends on your photos.
| Your photos | Recommended settings |
|---|---|
| Transparent PNG cut-outs | Product image style: Plinth with spotlight. Plinth color: Match the color scheme. This is the look of the demo stores. |
| Product on a dark or mid-tone background | Plinth with spotlight. The image is centered on the plinth with space around it. |
| Product on a white background | Plinth color: Light, for photos on white. The plinth takes the light text color of the scheme and the white background of the photo blends into it. |
| Lifestyle or editorial photos | Product image style: Full frame. Photos fill the card edge to edge and the spotlight is hidden. |
Settings live in Theme settings > Plinth:
- Product image shape: portrait, square or landscape cards. Pick the shape closest to most of your photos.
- Spotlight strength and Ledge height: set the ledge to 0% to hide it.
- Show catalog number and Catalog number prefix: each product card shows its position in the list, such as
No. 004. Change the prefix or turn the numbers off. - Show vendor and Show second image on hover.
Images are served in the right size for each screen by Shopify. Uploading photos at about 2000 pixels on the long side is enough.
Colors and type
Each color scheme has nine roles. Sections and blocks pick a scheme; the theme does the rest.
| Role | Used for |
|---|---|
| Background | Page and section background |
| Text | Headings and body text |
| Muted text | Secondary text, labels, captions |
| Accent | Catalog numbers, eyebrows, focus details |
| Surface and Surface text | Plinths, drawers, cards |
| Spotlight | The soft light above each plinth |
| Button and Button label | Primary buttons |
Socle includes storefront translations for English, French, German, Spanish and Italian. Add languages in Settings > Languages; edit the wording in Online Store > Themes > ⋯ > Edit default theme content.
Fonts are set in Theme settings > Typography for headings, body text and labels. Bold and italic styles load automatically. Heading size, heading letter spacing and body text size are adjustable.
Header and footer
Header
- Menu: any menu from Online Store > Navigation. Up to three levels show on large screens and in a drawer on phones.
- Menu style on large screens: Mega menu opens a full-width panel; second-level items that have their own links become columns. Dropdown opens a compact list.
- Menu promotions: add a Menu promotion block to the header, type the title of the top-level menu item it belongs to (for example
Shop), and pick an image, heading and link. It shows inside that item's mega menu panel. - Logo: upload an image or leave it empty to show the store name. Logo position on large screens: center or left.
- Sticky header, and country and language selectors in the mobile menu. Countries come from Settings > Markets, languages from Settings > Languages.
- The account icon opens Shopify's customer account menu.
Announcement bar
One or more short messages above the header, each with an optional link.
Footer
Blocks: brand text, menu, newsletter signup and social icons. Social links are set in Theme settings > Social media. The footer can also show payment icons, country and language selectors, and the Follow on Shop button (shown when Shop Pay is turned on).
Home page sections
| Section | What it does |
|---|---|
| Hero | A large heading with one product on the plinth, its label, and two links. Pick a product, or upload an image instead (a transparent PNG about 1600 pixels square works best). |
| Featured products | Products from one collection. Even grid or Salon hang, which gives the first product a larger plinth. |
| Collection list | Rooms list shows collections as numbered rooms with a count of products; Image tiles shows them as cards. The word before the number is editable. |
| Columns | Up to six short columns. Use Numbered steps only when the columns are a sequence. |
| Featured product | A full product form on the home page: variants, quantity, buy buttons. |
| Image with text | One image beside a heading, text and a button. |
| Testimonial | One quote with its author. |
| Rich text | Eyebrow, heading, text and button blocks in any order. |
| Video | A Shopify-hosted video or a YouTube or Vimeo link. YouTube and Vimeo players load only when the section scrolls into view. |
| Email signup | A newsletter form that adds customers to your Shopify customer list. |
| Contact form | For the contact page; messages go to your store email. |
| Custom Liquid and Apps | For app blocks and your own code. |
Every section has a color scheme and top and bottom padding.
Product pages
The product information column is built from blocks you can reorder: text, title, vendor, price, SKU, variant picker, quantity, buy buttons, description, collapsible tabs, share link, complementary products and Liquid.
- Variant picker: buttons or dropdown. Options that have color swatches set up in Shopify always show as swatches. When a variant has its own image, choosing it brings that image forward.
- Buy buttons: add to cart plus dynamic checkout buttons such as Shop Pay. For gift cards, customers can send the card to a recipient on a chosen date with a message.
- Price: sale prices, unit prices and Shop Pay Installments where available.
- Inventory status: shows Only 3 left at or below a threshold you set, and optionally In stock above it. It works for variants whose inventory Shopify tracks.
- Pickup availability appears when local pickup is turned on for a location.
- Media: images, videos, YouTube and Vimeo links and 3D models. 3D models can be viewed in your space on supported phones.
- Complementary products come from the Search and Discovery app. Related products are chosen by Shopify.
- Subscriptions and other selling plans show as purchase options when an app provides them.
Collections and search
Quick view: product cards have a quick view button that opens the product in a side panel, with variants and an add to cart button. Turn it off in Theme settings > Plinth.
Breadcrumbs show above product, collection, blog and page content. Turn them off in Theme settings > Layout.
Collection and search pages have filters and sorting. Color and image filters show as swatches when the filter is set to show them in the Search and Discovery app. You can set products per page, products per row on large and small screens, and whether to show the collection description and image. The search drawer suggests products, collections, pages and blog posts while customers type.
Cart
- Cart type: a drawer that slides in from the side, or a full cart page.
- Order note: let customers leave a note for the order.
- Free shipping progress threshold: shows how far the customer is from free shipping. Set to 0 to hide it. It uses your store currency and does not change your shipping rates; set the actual rate in Settings > Shipping and delivery.
Discounts on items and on the whole order are shown in the cart, and both are applied at checkout.
Questions
My product photos look like white boxes.
They have white backgrounds. Set Plinth color to Light, for photos on white in Theme settings > Plinth, or use transparent PNGs.
Why do two products both show No. 001?
The catalog number is the position of the product in the list where it appears, so the first product of every list is No. 001. Turn the numbers off in Theme settings > Plinth if you prefer.
How do I add swatches?
Swatches come from Shopify. In the product, connect the option to a color or pattern metafield of the product category, then pick the colors or images. The theme shows them without extra setup.
Can I update the theme without losing my settings?
Yes. When an update is available, Shopify offers it in Online Store > Themes and copies your settings and content into the new version. Code edits you made yourself are not copied.
Support
Write to us through the support form. We answer within two business days.
We help with setting up and customizing Socle with its built-in settings, and we fix bugs in the theme. We can't make custom code changes, set up third-party apps, or support themes whose code has been edited.
Please include your store address (your-store.myshopify.com), the page where you see the problem, and a screenshot if you can.
Release notes
1.0.0
First release.
- Products shown on a lit plinth with a spotlight and a ledge, or full frame for lifestyle photos.
- Plinth color setting that blends white photo backgrounds into a light plinth.
- Museum-style product labels with catalog numbers.
- Five presets: Socle, Slipware, Crystal Set, Powder Room and Hearthside.
- Collections shown as a numbered list of rooms or as image tiles.
- Product pages with variant images, swatches, pickup availability, gift card recipients, 3D models and videos.
- Mega menu with menu promotions, or a dropdown menu; menus up to three levels.
- Quick view on product cards, inventory status, breadcrumbs, swatch filters.
- Storefront translations: English, French, German, Spanish, Italian.
- Cart drawer or cart page, filters and sorting, predictive search.