Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Featured product

The Featured product section displays an entire product form on your page so customers can buy your products on the spot.

Color swatches on the Featured product section
Featured product
Featured product

The Featured product section can be added to any template (except the Checkout). Learn more about sections and templates in our article about how to use the theme editor.

In the theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select Featured product.

  3. Click on the Featured product section to Select a product to feature.

  4. (Optional.) Choose to enable the Outline section style for an alternate look.

    This option removes the section background and adds a border around the section, which uses your store's border color setting.

  5. Change the order of your sections by using the drag and drop handles ⋮⋮

Product blocks

Just like the Product template, this section contains the elements or blocks that make up your product form. You can rearrange or edit these blocks to create new styles or layout for your Featured product section.

Below you'll find a list of all the Featured product blocks, along with associated settings and features:

Configuration Settings

Title

The name of your product.

Price

The price of your product, including the sale or compared price.

Border

A single line that visually separates your product blocks.

SKU

The SKU number used to track the inventory of your products.

Vendor

The vendor (or seller) of the product as added in your Shopify Admin.

Description

The product's description.

Share buttons

Display social media icons that let customers share the product on their Facebook, Instagram, or Twitter.

Buy buttons

This block displays the "Add to cart" button with local pickup information below.

It can also show any dynamic checkout buttons.

Quantity selector

The quantity selector lets customers add more than one product to the cart.

Variant selectors

The variant picker lets customers select different product variants (e.g. Size or Material).

See Context's Variant swatches.

Stock level indicator

Add an indicator bar that displays the relative stock level of your product and alerts customers when there are limited quantities.

Learn more about the Stock level indicator.

Accordion

Add several collapsible tabs (Accordions) with a title and text content.

Text

Add additional information with a Text block

Variant swatches

Context can display your product variants as a sleek row of clickable color Swatches.

Swatches on product page
Swatches on product page

See our full Swatches article to learn how to use Context's 140 default swatch colors or upload your own custom swatch images, as well as enable the option to display swatches on hover on collection pages.

Text block

Add a Text block for additional information within the product form.

In the theme editor (Customize):

  1. Under Product overview, click + Add block and select Text block.

  2. Click on the new Text block block to open the block settings.

  3. Add a short sentence or two. Use the formatting buttons to add bold, italic, or linked text.

  4. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  5. Click Save.

Accordions

Accordions are collapsible dropdown tabs for your product details and additional information. They're a great way to highlight key aspects and information about your products and store in a sleek and organized way.

If you want to add different content for different products, follow our instructions on how to use metafields and dynamic sources.

Accordions used for additional product information
Accordions used for additional product information

Set up accordions

In the theme editor (Customize):

  1. Under Product overview, click + Add block and select Accordion.

  2. Click on the new Accordion block to open the block settings.

    Accordion block settings
    Accordion block settings
  3. Set the Style of the accordion to be Open or Closed when customers first visit your product page.

  4. Change the Accordion heading text to display as the title.

    We recommend a heading that clearly labels the content.

    To insert different headings for each individual product, learn how to insert dynamic sources.

  5. Add Text that will display when this accordion is open.

    Use the formatting buttons to add bold, italic, or linked text.

    To insert different accordion text for each individual product, learn how to insert dynamic sources.

  6. (Optional.) Click and drag the ⋮⋮ icon to change the order of your blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a accordion entirely.

  7. Remember to click Save.

Use dynamic sources for individual products

Dynamic sources and metafields are Shopify features. To learn more, see Shopify's article on using metafields and dynamic sources.

You can insert individualized information for different products in the same Template by using Dynamic sources and Metafields. Below you'll find instructions on how to create metafields and insert dynamic sources for Accordions.

Follow the three steps below:

1. Create metafield for your products

Shopify's Metafields lets you add additional fields to your products within the Shopify admin. For example, you can add a field for "Materials" if you want to add different materials information for different products in your Shopify admin.

To create metafields for your products:

  1. In the Accordion block settings, click the Dynamic source button next to the Headings or Text fields.

    Insert dynamic source button
    Insert dynamic source button
  2. Click the + Add metafield button.

    Add metafield button
    Add metafield button

    This opens your Shopify admin settings.

  3. Click the Products tab.

    Products metafields tab in Shopify admin
    Products metafields tab in Shopify admin
  4. Click the Add definition button in the top-right.

  5. Add a Name to the metafield that describes what it will be used for. For example: "Shipping", "Materials", "Details".

    Metafield definition name
    Metafield definition name
  6. Click the + Select content type button and select Text. Then choose Single line text or Multi-line-text.

    Menu list of content types for the metafield
    Menu list of content types for the metafield
    Metafield type: text
    Metafield type: text
  7. Click Save.

2. Add content to product metafields

Once you've created Metafields for your products in the Shopify admin, you can now add content to those fields by going to your product inventory in the Shopify admin.

Product inventory in Shopify admin
Product inventory in Shopify admin

To add content to product metafields:

  1. Go to your Product inventory in your Shopify admin and open one of your Products.

    Product page in Shopify admin
    Product page in Shopify admin
  2. Scroll down to the Metafields section and enter the text for your Accordion heading or text in the metafields that you created.

    Metafields section in the product editor
    Metafields section in the product editor
  3. Repeat steps 1 - 3 to add the different content to the metafields for your different products.

  4. Remember to click Save.

3. Insert metafields as dynamic sources

Now that the Metafields of your products have content, you can go to the theme editor to insert a Dynamic source to the Accordion settings in the Products template.

Once the Dynamic source is inserted, the Metafield content entered in the Shopify admin will automatically appear one different products pages with the same template.

In your theme editor (Customize):

  1. Go to the Accordion block settings.

  2. Click the Dynamic source button next to Heading or Text field.

    Insert dynamic source button
    Insert dynamic source button
  3. Select the Metafield that you created and added content to.

    List of dynamic sources
    List of dynamic sources
  4. You can now view or preview your different products to see the Dynamic source automatically appear in the Accordion with the correct Metafield content.

  5. Click Save.

Social sharing buttons

Display social media icons that let customers share the product on their Facebook, Instagram, or Twitter.

Social sharing buttons on product page
Social sharing buttons on product page

In the theme editor (Customize):

  1. Under Product overview, click + Add block and select Share.

  2. (Optional.) Click and drag the ⋮⋮ icon to change the order of your blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a accordion entirely.

  3. Remember to click Save.

Dynamic checkout button

The Dynamic checkout button lets customers quickly purchase products with a "Buy now" button. This button automatically displays one of your supported payment methods based on your customers' browser, device, and personal payment history.

Dynamic "Buy Now" button
Dynamic "Buy Now" button

To enable this option, click on the Buy buttons block to access its settings and check the Show dynamic checkout buttons checkbox.

See Shopify's Dynamic checkout buttons documentation for more details.

Stock level indicator

The Stock level indicator displays the relative availability of your product with a dynamic indicator bar that alerts customers when there are limited quantities.

Displaying your stock level can turn limited stock quantities into an advantage by conveying a sense of scarcity to increase conversion and quicker purchases.

Stock level indicator on product page
Stock level indicator on product page

The indicator bar visually represents the remaining percentage of your initial stock quantity, turns red when stock is low, and displays three different messages.

Set up your Stock level indicator

Before adding a Stock level indicator block, you need to enable the Track quantity option for your product and product variants.

To learn more, see Shopify's guide on how to Set up inventory tracking.

To set up your Stock level indicator:

  1. In your theme editor (Customize), choose the Products template you want to edit.

  2. Click + Add block and select Stock level indicator from the Theme Blocks list.

  3. Click on the new Stock level indicator block to open the block settings.

    Stock Level Indicator block settings
    Stock Level Indicator block settings
  4. Enter the initial quantity of your product stock level in the Inventory base quantity field.

    The indicator bar displays your remaining product quantity as a percentage of this base quantity. If your base quantity is set at 100 products, the bar will display at 100% when your have 100 products in stock and 60% when you have 60 products in stock.

    To learn how to set different base quantities for multiple products, see the Dynamic source section below.

  5. Enter the product inventory quantity in the Low quantity threshold to alert customers when limited quantities are available.

    When your current product inventory matches or goes below the Low quantity threshold, the indicator bar will turn red and display a "Limited quantities available" message.

    Stock level indicator when the product inventory reaches the Low quantity threshold
    Stock level indicator when the product inventory reaches the Low quantity threshold

    To learn how to set different Low inventory thresholds for multiple products, see the Dynamic source section below.

  6. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a block entirely.

  7. Remember to click Save.

Add a dynamic source to your inventory fields

If you need to set a different Inventory base quantity and Low inventory threshold for multiple products, you can use Shopify's Dynamic source feature.

This will require creating and adding Metafields. Metafields let you add custom information that isn't usually captured in the Shopify admin. To learn more, see Shopify's Metafields guide.

Follow the instructions below to (1) create a metafield for your products, (2) add content to product metafields, and (3) insert the metafields in your theme editor as a dynamic source.

To create a metafield for your products:

  1. In your Stock Level Indicator block settings, click the Dynamic source button next to the Inventory base quantity field.

    Insert dynamic source button
    Insert dynamic source button
  2. Click the + Add metafield button.

    Add metafield button
    Add metafield button

    This opens your Shopify admin settings.

  3. Click the Products tab.

    Products metafields tab in Shopify admin
    Products metafields tab in Shopify admin
  4. Click the Add definition button in the top-right.

  5. Add a Name to the metafield that describes what it will be used for.

    We recommend naming the metafield the same as the setting name: "Inventory base quantity" or "Low stock threshold".

    Metafield definition name
    Metafield definition name
  6. Click the + Select content type button and select Number.

    Menu list of content types for the metafield
    Menu list of content types for the metafield
  7. (Optional.) Repeat steps 4 - 5 to add another metafield for Low stock threshold.

  8. Click Save.

To edit the metafield for a product:

  1. Go to your Product in your Shopify admin.

  2. Scroll down to the Metafields section.

    Metafields section in the product editor
    Metafields section in the product editor
  3. Enter the Inventory base quantity or Low quantity threshold that you want for the product.

    A metafield for an inventory base quantity
    A metafield for an inventory base quantity
  4. Repeat steps 1 - 3 to add the different quantities to the metafields of the products you wish to display a Stock level indicator for.

  5. Click Save.

To add your metafield as a dynamic source to the inventory fields:

  1. In your theme editor (Customize), return to the Stock Level Indicator block settings.

  2. Delete the current quantity in the Inventory base quantity so the field is left blank.

  3. Click the Dynamic source button next to the Inventory base quantity field.

  4. Select the "Inventory base quantity" metafield.

    The metafield will now be added as a dynamic source.

  5. (Optional.) Click the Dynamic source button next to the Low stock threshold to add a "Low stock threshold" metafield.

  6. Click Save.

Product reviews

Context fully integrates with Shopify's Product Reviews app. Once you download the app, the Reviews section and Star rating block will be available in the theme editor.

Product reviews section
Product reviews section

To learn more about setting up Shopify's Product Reviews on your product pages, see our [Product reviews][product-reviews] article.

Set up local pickup

You can add a local pickup option for online orders. This is a Shopify feature and you can learn more by reading Shopify's [Local pickup][local-pickup] documentation.

Local pickup information
Local pickup information

After you've configured your preferences for a local pickup location, Context will display whether an item is available for pickup, along with the store's location.

Here is how to set up your local pickup settings:

  1. From your Shopify admin, go to Settings and select Shipping and delivery.

  2. Under Local pickup, click Manage beside the location that you want to enable. If you have several locations, then click Show more to display all your locations.

    You must have a location set up already before you can select it.

  3. Select This location offers local pickup.

  4. Under Information at checkout, change the settings to meet your needs.

  5. (Optional.) Under Order ready for pickup notification, enter pickup instructions for customers.

  6. Click Save.

Set up unit pricing

Context supports Shopify's Unit pricing feature, which is available only in France and Germany. You can learn more about this feature from Shopify's [Unit pricing][shopify-unit-pricing] documentation.

To display a Unit price, check the Show unit price for this variant checkbox in the Pricing section of your desired product in your Shopify admin. Context will automatically display the unit price. No code snippets are necessary.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.