Socle theme documentation

Getting started

Add Socle from the Shopify Theme Store, or upload the theme file at Online Store › Themes › Add theme › Upload zip file.
Click Customize. Pick a preset under Theme settings › Colors if you want a different starting style (see Presets).
Upload your logo in Theme settings › Logo & favicon. Without a logo, Socle sets your store name in the logo font.
Choose your menu in the Header section. Socle uses the main-menu menu by default.
Replace the homepage content: every section can be edited, reordered, hidden or removed, and you can add new ones with Add section.
Preview on mobile with the phone icon at the top of the editor, then click Publish.

Before publishing, back up your current theme with Actions › Duplicate. Theme settings are stored per theme, so switching themes never deletes your products or pages.

Presets

Socle includes five styles. A preset sets colors, fonts, spacing and card shapes; your content stays the same.

Preset	Look	Suits
Socle	Warm stone background, wide Michroma type	Sculptural objects, stone, home
Ink	Dark, high contrast	Lighting, art, design editions
Clay	Terracotta tones, square cards	Ceramics, tableware
Linen	Soft white, serif headings, tall cards	Fragrance, jewelry, apparel
Moss	Sage green, rounded corners	Plants, garden, wellness

Theme settings

Open the gear icon in the editor sidebar.

Colors

Socle uses color schemes. Each scheme has a background, text, muted text and button colors, and every section has a Color scheme setting. Keep muted text dark enough to read: aim for a contrast ratio of at least 4.5:1 against the background.

Show background behind images: turn it off when you use transparent PNG product photos, so objects sit directly on the page color. Image placeholder background colors empty image placeholders.

Typography

Interface & headings: used for navigation, labels, prices and headings. Wide grotesks suit the theme best.
Body text style: Interface font, bold small caps sets paragraphs, the footer and forms in the interface font. Choose Body font below for a classic reading font.
Logo text: font and letter spacing used when no logo image is uploaded.

Layout

Page width, side margins, grid spacing, line thickness and corner radius for images and buttons.

Product cards

Image ratio: natural, square, portrait, tall or landscape.
Hover effect: swap to the second product image, show it in a small detail card, or none.
Quick buy: a button on each card that opens a quick view, or adds the product directly when it has one variant.
Show color swatches and Show sold out and sale badges.

Search & navigation

Enable predictive search, Show breadcrumbs and Show back to top button.

Header & menus

Desktop menu style: a Menu button that opens a full-screen overlay with numbered links, or inline links.
Menus can have three levels. Inline links open a dropdown; when second-level links have their own links, the dropdown becomes a full-width panel with one column per link. Edit menus at Online Store › Navigation.
Sticky header and Transparent on home page are optional, as are Show search and Show account.
The Index bar section adds the fixed corner link with the dot-grid icon; point it at any page.

Sections

Add these from Add section on any page that supports sections.

Section	What it does
Featured slider	Draggable carousel with a large `01/06` counter. Leave the collection empty to show all products.
Product grid	Products from a collection in 2–4 columns.
Slideshow	Full-width slides with text, autoplay, pause control and swipe.
Image banner	One large image with heading, text and button.
Image with text	Image beside a label, heading, text and button.
Promo tiles	Image or color tiles linking to collections or pages.
Lookbook	Image with numbered hotspots; each opens a small product card.
Before / after	Two images with a draggable, keyboard-accessible divider.
Collection list	Cards linking to collections.
Multicolumn	Columns with image, heading and text.
Press quotes	Quotes with source name or logo, as a grid or carousel.
Collapsible content	FAQ-style rows. Use the `page.faq` template for a full FAQ page.
Countdown timer	Counts down to a date and time for a launch or event; can hide itself when it ends.
Rich text, Video, Email signup, Contact form, Custom liquid, Apps	Standard content sections.
Related products, Recently viewed	Product recommendations and the shopper's recently viewed products.

Product page

The product sits centered with its details in a left and right column, and the title and price set large along the bottom. Every detail is a block: drag to reorder, and use each block's Position setting to move it to the left column, right column or below the product.

Blocks

Gallery navigation: counter with Back / Next; also swipe and arrow keys.
Full / details toggle: details mode zooms the image and follows the cursor.
Variant picker: swatches or a list. Swatches use the colors and images you set on option values in Shopify.
Dimensions and Weight: CM / INCH and KG / LBS toggles (see metafields).
Buy buttons: add to cart, Buy it now, Shop Pay Installments banner, pickup availability and gift card recipient form.
Complementary products: products that pair well, set up in the free Shopify Search & Discovery app.
Play video, SKU, Quantity, Inventory status, Description, Collapsible row, Share, Text, Vendor, Custom liquid and app blocks.

Media

Galleries support images, videos, YouTube and Vimeo links and 3D models. 3D models include a View in your space button on supported phones.

Sticky add to cart

Turn on Show sticky add to cart bar in the Product section to show a slim bar once the main button scrolls out of view.

Dimensions & metafields

Go to Settings › Metafields and metaobjects › Products and add a definition named Dimensions of type Single line text. Its key must be custom.dimensions.
On each product, enter the size, for example 12.5 dia x 5 h.
In the theme editor, select the Dimensions block and set Unit of the value above to inches or centimeters. The block reads custom.dimensions automatically; to use a different metafield, connect it with the dynamic source icon.
To show the size in the cart, enter custom.dimensions in the Cart section's Product metafield to show setting.

The Weight block reads each variant's shipping weight, so no setup is needed.

Collections & search

Filters come from the Shopify Search & Discovery app. To show color swatches in a filter, set that filter's display to swatches in the app.
Pagination (Collection and Search sections): page numbers, a Load more button, or infinite scroll.
Predictive search opens a full-screen overlay with products, collections, pages and articles as shoppers type.

Cart

Choose a slide-out cart drawer or a cart page in Theme settings › Cart. The cart page is a table with item, color/finish and quantity columns, with Show order note and Show accelerated checkout buttons settings. For the drawer, use Show order note in drawer.

Images

Socle is designed for one object per photo, centered. Transparent PNGs work especially well with Show background behind images turned off.
Use images at least 2000 px on the long side for banners and slideshows, and 1600 px for products.
Set a focal point on an image in the Shopify admin (open the image, then Edit › Focal point); Socle keeps that point in view whenever the image is cropped.

Languages

The storefront and the theme editor are translated into English, French, German, Italian and Spanish. Add languages at Settings › Languages and edit any wording with Online Store › Themes › … › Edit default theme content. Arabic, Hebrew, Persian and Urdu switch the layout to right-to-left automatically.

B2B pricing

On Shopify Plus with B2B catalogs, product pages, quick view and the cart show quantity rules (minimum, maximum, increments) and volume price breaks, and quantity inputs follow those rules.

FAQ

Why do my product images have a white box behind them?

Your photos have a white background. Use transparent PNGs, or turn on Show background behind images so every card has an even background.

The Dimensions block is not showing.

It only appears when the product has a value in custom.dimensions (or the metafield you connected). Check the product in the admin.

Complementary products are empty.

Install Shopify Search & Discovery and add complementary products for each product. The block stays hidden until there is at least one.

How do I show only a few products in the homepage slider?

Select a collection in the Featured slider and set the product count, or add individual Product blocks.

Can I change the fonts?

Yes. Any font from the Shopify font library can be chosen in Theme settings › Typography.

Will theme updates remove my changes?

Updates from the Theme Store keep your settings and content. Code edits you make yourself are not carried over, so keep a note of them.

Changelog

1.0.0

First release.