Product pages and variants

Open Products → Default product in the editor’s template menu. The Product information section is built from blocks you can add, remove and reorder.

Product blocks

Buy buttons settings

• Show quantity: a quantity selector (on by default).
• Show dynamic checkout buttons: Buy it now and accelerated checkout buttons for the payment methods you’ve turned on.
• Show installment offers: Shop Pay Installments messaging, when it’s available on your store.
• Show gift card recipient form: on gift card products, lets the customer send the card to someone else.
• Show payment icons: icons for your enabled payment methods.

Store policy tabs

Set a Collapsible tab‘s Store policy to Shipping policy, Refund policy or Terms of service. The tab shows the policy’s text from Settings → Policies, with a link to the full policy. Write your policies there first. ÉLAN doesn’t write policy text for you.

The gallery

Section settings:

• Gallery layout: Mosaic (a large first image, then pairs) or Single column (one column of large images).
• Image ratio: Portrait, 4:5, Portrait, 2:3 or Square. Images are cropped to it on desktop around their focal point. Phones show a swipeable gallery with a counter.

Customers can open any image full screen. Videos, YouTube and Vimeo videos and 3D models play in the gallery. 3D models offer “View in your space” on supported phones.

Variants

• The page opens on the first available variant. If a link includes a variant (?variant= in the address), that variant opens instead.
• Choosing an option updates the page address, so customers can share a specific color or size.
• Assign an image to each variant in the product’s Variants list in your admin. Choosing the variant brings its image to the front on desktop, or scrolls to it on phones.
• When the chosen combination is sold out, the button reads “Sold out” and is disabled. When the combination doesn’t exist, it reads “Unavailable” and can’t be added.

The mobile add bar

On phones, an add bar appears at the bottom of the screen whenever the main Add to cart button is off screen. It always adds exactly what’s selected on the page:

• One option with several values (for example sizes): the bar names the choice, for example “Add size M to bag”.
• Several options with several values (for example color and size): the bar shows the full selection, such as “Sky / M”, beside the product name.
• A sold-out selection: the bar reads “Sold out” and is disabled.
• A combination that doesn’t exist: the bar reads “Choose another option” and takes the customer back to the options.

Choose its colors with Mobile add bar color scheme.

Color swatches

ÉLAN shows Shopify’s native swatches on the product page, on product cards and in filters. To set them up:

1. Open a product in your admin and choose a Category that has a color attribute, for example a clothing category.
2. On the product’s Color option, choose to connect it to the category’s color metafield, then pick or create each color (a color value or an image).
3. Save. Swatches appear in the theme automatically.

Without swatch data, options show as text buttons. Both work.

Unit prices

When a variant has a unit price, ÉLAN shows it on cards, the product page and the cart, for example “$12.00 / 100 ml”. Set it on the variant in your admin under Unit price. Shopify offers unit pricing only for stores in some countries; the field doesn’t appear otherwise. When there’s no unit price, the theme shows nothing extra.

Gift cards

Create a gift card product in Products → Gift cards. With Show gift card recipient form on, customers can send it to a recipient’s email on a chosen date. Recipients see a gift card page with the code, a QR code and an Add to Apple Wallet link.

Subscriptions

Install a subscription app, such as Shopify Subscriptions, and add its app block to the product page. The plan the customer chooses is shown in the cart.

Showing material or ingredients on cards

ÉLAN can show a short line under each product name on cards, for example “Undyed kid mohair, oat”:

1. Go to Settings → Custom data → Products → Add definition.
2. Create a definition with the namespace and key custom.material and the type Single line text.
3. Fill it in on each product.

Without it, cards show the product type. The theme works either way.