Crux — დოკუმენტაცია

Menus

Create and edit menus in your Shopify admin under Content > Menus (or Online Store > Navigation). Crux supports three menu levels:

• Top-level items appear in the header.
• Nested items open in a dropdown, or become columns in a mega menu.
• Items nested one level deeper appear under their parent in the dropdown or mega menu column.

Header

• Header settings

  • Menu — the menu shown in the header.
  • Customer account menu — appears in the account menu for signed-in customers.
  • Color scheme — the colors of the header, its dropdowns, and the mobile menu.
  • Sticky header — keeps the header at the top of the screen while visitors scroll.
  • Show paint stroke edge — a paint stroke that overlaps the neighboring section. Its color is the highlight color in theme settings.
  • Show search — shows the search icon, which opens the search panel.
  • Button label and Button link — add a button next to the header icons, for example “Shop all.” The button appears only when both settings are filled in.
  • Show country selector and Show language selector — show the selectors in the mobile menu. See Country and language selectors.

Mega menu

A mega menu turns a dropdown into a full-width panel. Each nested link becomes a column heading, and the links nested under it are listed in that column. You can also add up to two promo images.

1. 01In your menu, create a top-level item, for example “Shop,” with nested items.
2. 02In the theme editor, select Header and click Add block > Mega menu.
3. 03In Menu item, type the name of the top-level menu item exactly as it appears in your menu. Capitalization doesn't matter.
4. 04Optionally, fill in First promo and Second promo: an Image, a Heading, and a Link for each.

Top bar

The Top bar sits above the header on every page and shows short announcements, such as shipping offers. It can only be added to the header group.

• Top bar settings

  • Color scheme — the colors of the bar.
  • Rotate announcements — rotates only when there is more than one announcement. Visitors who reduce motion see the first one.
  • Change every — how long each announcement is shown, from 3 to 10 seconds.
  • Show country selector and Show language selector — selectors appear in the top bar on large screens when your store sells in more than one country or language.
  • Announcement (block) — a Text and an optional Link. Add up to six announcements.

Country and language selectors

Selectors appear when your store sells in more than one country or language. Set up countries in Settings > Markets and languages in Settings > Languages. You can show the selectors in three places:

• Header: in the mobile menu.
• Top bar: on large screens.
• Footer: at the bottom of every page.

Customer account

When customer accounts are turned on in Settings > Customer accounts, the header shows an account icon. It uses Shopify's account component, which lets customers sign in and, once signed in, opens a menu with links to their orders and profile. To add your own links to that menu, choose a menu in the header's Customer account menu setting.

Footer

• Footer settings

  • Color scheme — the colors of the footer.
  • Footer logo — leave blank to use the logo from theme settings.
  • Show paint stroke edge — a paint stroke that overlaps the neighboring section.
  • Show payment icons — shows the icons of the payment methods your store accepts.
  • Show policy links — links to the policies you add in Settings > Policies.
  • Show Follow on Shop button — lets customers follow your store in the Shop app. Shop Pay must be enabled.
  • Show country selector and Show language selector — selectors appear when your store sells in more than one country or language.
  • Top padding and Bottom padding — space above and below the footer content.
• Footer blocks

  • Brand — your logo, a short Text about your brand, and social media icons (Show social media icons). Set the logo size with Logo width. One per footer.
  • Menu — a column of links from the selected Menu. Leave Heading blank to use the menu name.
  • Text — a Heading and Text, for example contact details.
  • Email signup — a newsletter form with a Heading and Text. Each signup adds a subscriber to your customer list. One per footer.
  • Custom Liquid — your own Liquid or HTML code.
  • Apps — app blocks from apps that you install.

Products and collections

• Featured collectionsA product grid with tabs. Each tab shows the products of one collection.

  • Products to show — from 3 to 12.
  • Columns on desktop — from 2 to 5.
  • Show view all button — links to the collection of the selected tab.
  • Collection (block) — a Collection and an optional Tab label. Leave the label blank to use the collection title. Add up to eight tabs.
• Collection listA grid of collection cards. Add up to 12 Collection blocks.

  • Alignment — Left or Center.
  • Columns on desktop (2 to 5) and Columns on mobile (1 or 2).
  • Image ratio — Square, Portrait, or Landscape.
  • Show product count and Show view all button — the button links to your collections page.
• Featured productShows one product with its images and buy buttons, so customers can buy without leaving the page.

  • Product, Media position (Left or Right), and Image fit (Fill or Fit).
  • Blocks — Product rating, Vendor, Title, Price, Text, Description, Inventory status, Variant picker, Purchase options, Quantity selector, Buy buttons, Pop-up guide, Trust badges, Nutrition facts, Custom Liquid, and app blocks. These work like the product page blocks.
• Build your own boxLets shoppers fill a box with their favorite products and add everything to the cart in one click. You can add it to any page.

  • Collection — shoppers pick from the products in this collection. Products sold only with a subscription are left out.
  • Products to show — how many products from the collection appear, from 2 to 24.
  • Box size — how many items fill the box, from 2 to 24.
  • Require a full box — on by default. The add button stays disabled until the box is full. Turn it off to allow partly filled boxes.
  • Note — a short message above the button, for example “Save 10% on a full box.” The theme never applies discounts. If you promise one, create a matching automatic discount in your Shopify admin. See Does the box builder apply a discount?
  • Button label — the button text.
  • Shoppers can't add more of a product than you have in stock when Shopify tracks its inventory and stops selling at zero.
  • On phones, the box summary stays at the bottom of the screen, and shoppers can expand it to review their items.
• Product pairsShows two products that go well together in each pair. Add up to eight Pair blocks.

  • First product and Second product.
  • First image and Second image — optional. Leave them blank to use the product images.
  • Note, Eyebrow, and Title — leave Title blank to use the title of the first product.
  • Button label and Button link — leave Button link blank to link to the first product.
• Image hotspotsTag products in a lifestyle image, so customers can shop the look.

  • Image — pins are placed on this image. 1600 x 1200 px recommended.
  • Hotspot (block) — Horizontal position (distance from the left edge of the image), Vertical position (distance from the top edge), Title, Text, and Product, which shows the product title, price, and a link to the product. Leave Title blank to use the product title. Add up to eight.
• Related productsCan only be added to product templates. Shopify generates related products from your store data, and they appear once enough data is available.

  • Products to show — from 2 to 10.
  • Columns on desktop — from 2 to 5.
  • No products showing? See Why don't related products show up?
• Recently viewed productsShows the products the visitor looked at most recently. The section stays hidden until there is something to show. The list is stored in the visitor's own browser.

  • Products to show — from 2 to 8.
  • Columns on desktop — from 2 to 5.

Product information

• Section settings

  • Media ratio — Adapt to media, Square, or Portrait.
  • Image fit — Fill crops images to the frame. Fit shows the whole image.
  • Loop videos — restarts product videos when they end.
  • Enable image zoom — opens product images in a full screen view with previous and next navigation. See Image zoom.
  • Badge — appears on the first product image. Connect a metafield to change it per product. See How do I add a badge to some products only?
  • Show sticky add to cart bar — shows the price and an add to cart button at the bottom of the screen once the buy buttons scroll out of view. See Sticky add to cart bar.

Product blocks

Add, remove, and reorder these blocks inside Product information.

• Product ratingShows the product rating metafields that review apps fill in.
• Vendor, Title, and SKUThe product vendor, the product title, and the SKU of the selected variant.
• PriceThe price, the compare-at price, and unit prices.

  • Show tax and shipping note — adds a note about taxes and shipping.
  • Show installment terms — shows Shop Pay Installments terms when they are available.
• TextA short piece of rich text.
• DescriptionThe product description.
• Inventory statusStock messages. See Inventory status.
• HighlightsA Heading and a list of key facts. Add one item per line in List items.
• Variant pickerOption selectors.

  • Style — Pills or Dropdown. See Variant picker and swatches.
• Purchase optionsOne-time purchase and subscription choices. See Purchase options and subscriptions.
• Quantity selectorLets customers choose how many to buy.
• Buy buttonsThe add to cart button.

  • Show dynamic checkout buttons — customers see their preferred payment method, such as PayPal or Apple Pay.
  • Show gift card recipient form — lets customers send gift card products directly to a recipient with a personal message.
  • Show pickup availability — shows whether the product can be picked up at your locations.
  • Show pre-order button and Pre-order note — see Pre-order.
• Back in stock requestSee Back in stock request.
• Pop-up guideSee Pop-up guide.
• Trust badgesSee Trust badges.
• Collapsible tabA Heading that opens to show Content, Content from page, or both.

  • Open by default — shows the content when the page loads.
• Nutrition factsA nutrition label table. See Nutrition facts.
• Photo rowA Heading and up to four images, for example customer photos.
• Complementary productsSee Complementary products.
• ShareA share button that uses the device's share menu or copies the link. Add an optional second button with Help button label and Help button link, for example to your contact page.
• Custom LiquidYour own Liquid or HTML code.
• AppsApp blocks, for example from a reviews or subscriptions app.

Variant picker and swatches

The Style setting shows options as Pills (buttons) or as a Dropdown. Unavailable combinations are marked so customers can see them at a glance.

When a product option is connected to a category metafield that has swatches, for example a color option, Crux shows the swatches automatically:

• With Pills, each value appears as a round color or image swatch, and the selected value is named next to the option name.
• With Dropdown, a small preview of the selected swatch appears next to the option name.
• Product cards show a row of swatches for the first option that has them.

Purchase options and subscriptions

The Purchase options block appears only for products with subscriptions or other purchase options. One-time purchase is listed first, followed by each subscription or other purchase option that you set up in your subscription app. Each option shows its price. If a product can only be bought with a subscription, the one-time option is hidden.

Purchase options also appear in quick view and in the Featured product section. See How do I sell subscriptions?

• When an option costs less than a one-time purchase, it shows a “Save X%” badge. The percentage is calculated from your real plan prices.
• When the selected option has 2 to 5 delivery frequencies, they appear as buttons. More than 5 appear in a dropdown.
• Select subscription by default: product pages open on the first subscription plan. Customers can still switch to one-time purchase. A link that names a plan opens on that plan, and quick view never preselects a plan.
• Show subscriptions first: lists the subscription options above one-time purchase. Shopify recommends showing one-time purchase first, so turn this on only if most of your customers subscribe.
• Subscription benefits: add one benefit per line. They appear as a checklist under the first subscription option. Only list benefits that your subscription really offers.

Inventory status

Shows the real stock level of variants whose inventory is tracked by Shopify. Nothing appears when inventory is not tracked.

• Low stock threshold: shows the remaining quantity, for example “Only 3 left in stock,” when it is at or below this number (0 to 50). Set to 0 to show only in stock and out of stock.
• Show in stock message: shows “In stock” when stock is above the threshold.
• Variants that are sold out but keep selling show “Out of stock, available to order.”

Pre-order

In the Buy buttons block, turn on Show pre-order button. This changes the button label to Pre-order when a variant with tracked inventory is sold out but its inventory policy keeps selling. The Pre-order note appears under the button, for example “Ships as soon as it is back in stock.”

To keep selling a sold-out variant, open the product in your Shopify admin and turn on Continue selling when out of stock for that variant. Pre-orders are placed and paid like regular orders.

Pop-up guide

A link that opens a pop-up, for example a size guide or care instructions. Set the Link label, an optional Pop-up heading (leave blank to use the link label), and the content: type it in Content, or choose a page in Content from page to reuse the same guide on many products. You can add several pop-up guides.

Nutrition facts

Shows a nutrition label table. Add the Nutrition facts block to Product information or to the Featured product section.

• Heading: the name of the label, for example “Nutrition facts.”
• Serving info: appears under the heading, for example “Serving size 20 g · 4 servings per bar.”
• Calories: appears as a large first row.
• Rows: one nutrient per line, written as Label | Amount | % Daily value, for example Total fat | 7 g | 9%. The % column is optional. Start a line with - to indent it under the line above, for example - Saturated fat | 5 g | 25%.
• Footnote: appears below the table.
• Show as collapsible: shows the heading as a row that opens the label, like the Collapsible tab block.

Trust badges

Up to three short reassurances under the buy buttons, each with an icon: First icon and First text, Second icon and Second text, and Third icon and Third text. Add an optional Heading, and turn on Show payment icons to show your accepted payment methods.

Back in stock request

Appears when the selected variant is sold out. Customers leave their email address, and Crux sends the customer's email and the product name to your store email, like the contact form, so you can follow up. Customize the Heading and Text.

Complementary products

Shows products that pair well with the current product, with a Heading and Products to show (1 to 6). To choose complementary products, use the Shopify Search & Discovery app. The block stays empty until you choose products there.

Sticky add to cart bar

When Show sticky add to cart bar is on, a bar with the product image, price, and an add to cart button slides in once the buy buttons scroll out of view, and hides again near the footer.

For products without variants, the button adds the product to the cart. For products with variants, a required subscription, or a gift card recipient form, the button scrolls back to the options, so customers always see what they are buying.

Image zoom

When Enable image zoom is on, customers can open product images in a full screen view and move between them with previous and next buttons, the arrow keys, or a swipe.

Quick view

When Show quick view button is on in Theme settings > Product cards, product cards get a quick view button. It opens the product in a dialog with its images, title, price, variant picker, purchase options, quantity selector, buy buttons, and a link to the full product page.

Collection page

The default collection template contains Breadcrumbs and the Collection page section.

• Collection page settings

  • Show collection description and Show collection image — show the collection's description and image in the banner at the top of the page.
  • Menu (Collection navigation) — links to other collections. The current collection is highlighted. Leave blank to hide.
  • Navigation style — Pills above the products or Sidebar list on desktop.
  • Enable filtering — shows filters. Manage filters in the Shopify Search & Discovery app.
  • Enable sorting — lets customers sort products, for example by price or best selling.
  • Products per page — from 8 to 24.
  • Pagination style — Page numbers, Load more button, or Infinite scroll. Load more and infinite scroll add the next products below the list. Page links stay in place for search engines and for visitors without JavaScript.
  • Columns on desktop and Columns on mobile — the number of products in each row: 2 to 5 on desktop, 1 or 2 on mobile.

Filtering and sorting

Filters come from the free Shopify Search & Discovery app. In the app, click Filters > Add filter to add filters such as availability, price, product type, vendor, tags, variant options, and metafields.

On large screens, filters appear as a row of panels above the products. On small screens, they open in a drawer. Active filters appear as pills that customers can remove one by one. Products update without a page reload, and the address bar keeps the selected filters, so filtered pages can be shared.

Filters with swatches, such as color, show color or image swatches when you choose the swatch display for the filter in Search & Discovery.

Promo tiles

A Promo tile block places a promotional card inside the product grid. Add up to four.

• Show after product: counts across all pages. With 12 products per page, 13 shows the tile on page 2. Tiles are hidden while filters or a different sort order are active.
• Width on desktop: 1 column or 2 columns. Always one column on mobile.
• Image, Heading, Text, Button label, Button link, and Color scheme.

Collection navigation

Create a menu of collections in Content > Menus, then choose it in Collection navigation > Menu in the Collection page section. With Pills above the products, the links appear as a row of pills that scrolls sideways when it doesn't fit. With Sidebar list on desktop, they appear as a list beside the products on large screens and as pills on small screens.

Search results

The search page has the same filtering, sorting, pagination, and grid settings as the collection page, with Results per page (8 to 24) instead of Products per page. Results include products, pages, and blog posts.

Search suggestions

When Show search suggestions is on in Theme settings > Search, the search panel shows suggested search terms, products, collections, pages, and blog posts while visitors type. Customers can move through the results with the arrow keys.

Collections page

The page that lists all your collections (/collections). Settings: Heading (leave blank to use the default title), Collections per page (8 to 24), Columns on desktop, Columns on mobile, Image ratio, and Show product count.

Free shipping progress

This feature is off by default. To turn it on, go to Theme settings > Cart, turn on Show free shipping progress, and enter your Free shipping threshold. Use the same minimum order price as your free shipping rate in Settings > Shipping and delivery.

The cart drawer and the cart page then show how much more the customer needs to spend to get free shipping, with a progress bar. Once the cart reaches the threshold, a message confirms that free shipping is unlocked.

• Enter the threshold in your store currency. It is compared with the cart subtotal after discounts.
• Customers who shop in another currency see the amount converted at the current exchange rate. If you set fixed shipping rates per market, the converted amount may not match them exactly.
• The bar is hidden when the cart is empty or when nothing in the cart needs shipping.

Contact page and contact form

To create a contact page, go to Online Store > Pages, add a page, and choose contact as its Theme template. The contact template shows your page content followed by a Contact form section. You can also add the Contact form section to other templates.

Messages are sent to your store email. Build the form from these blocks (up to 20):

• Text field

  A single-line field. Autofill helps browsers fill in a Name or Company.

• Email field

  The first email field is sent as the customer's email address, so it is always required. If the form has no email field, one is added automatically.

• Phone field

  A phone number field.

• Multi-line text field

  The first multi-line text field is sent as the message.

• Dropdown

  A list of choices. Add one option per line in Options.

• Checkbox

  Leave Options blank for a single checkbox, for example a consent. Add one option per line to show a group of checkboxes. Required applies to single checkboxes only.

• Heading

  A heading that groups the fields below it.

• Paragraph

  A short instruction or note between fields.