Featured product

You can add a section that features a specific product.


⬇️ On this page:



Steps to add your Featured product section:

  1. In your Shopify admin dashboard, go to Online Store > Themes.
  2. Choose the theme you want to edit and click on the Customize button.
  3. Click on the arrow down next to Home page↓and select a template you want your Featured product section to add to. 
  4. Click on + Add section which can be found in your left sidebar or directly in the live editor. 
  5. Scroll down, or search for Featured product, then click on Featured product
  6. Click and hold the drag-and-drop handles ⋮⋮  to re-order your sections.

Congrats! 👏 You just added your Featured product section.



Edit the section layout


After you've successfully added the Featured product section following the steps above you can customize the section by adjusting your Section controls. If you don't see the customization options, click on your Featured product section.

Featured products section controls

  1. Product - The product that you want to feature in the section. Click Select product to choose one.
  2. Heading - The title of the section. Click the dynamic source button to insert a dynamic source as the title of the section.
  3. Heading size - Change the size of the heading text. Choose between small, medium, or large.
  4. Heading alignment - Choose the alignment of the section heading. Options are left, center, or right.
  5. Gallery options - There are three options to display the pictures of your product:
    1. Slider - The slider will be shown with dots as slider controls.
    2. Featured image - Instead of displaying the product images, upload a custom image using the Featured image box. Click Select image or Explore free images. You can also insert a dynamic source by clicking the dynamic source button.
    3. Background - This option doesn't have various images of the product but instead one custom image can be uploaded as the whole section background. Under Background image, click Select image or Explore free images. You can also insert a dynamic source by clicking the dynamic source button.
  6. Button style - Choose your button style.

Section padding

  1. You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
  2. Read more about Custom CSS .


Manage content blocks (tabs, variant picker, buttons, and more).


Once you have added the section, you can now configure the blocks within your section. A Featured product section has many blocks to include, such as price, description (text), heading, and more.

Steps

  1. Find the Featured product section you added and customized following the steps above.
  2. Click + Add block underneath and choose one of the options. Our theme has many blocks to display in your Featured product section.
  3. Once you add a desired block, click on it to see additional block customization options.
  4. (Optional) Click and hold the drag-and-drop handles ⋮⋮   to re-order your blocks.

Content blocks and their customization options:

Title

  1. Heading size - Choose between SmallMedium, or Large.

Text block

  1. Text: Accepts text or dynamic source.
  2. Uppercase - If clicked, the text will be transformed into uppercase.

Price (No customizable settings available.)


Variant picker

  1. Type - Choose between radios or a drop-down menu.

Quantity selector (No customizable settings available.)


Buy buttons

  1. Show dynamic checkout buttons - Check the Show dynamic checkout buttons box to display any dynamic checkout options that you've enabled in your Payments settings.

Tabs

  1. Product description - If checked, the product description will be displayed in the section.
  2. Tab heading - The title of your tab. Accepts dynamic source.
  3. Custom description - The description of your tab. Accepts dynamic source.

Share

  1. Text - Clickable text that allows customers to share the product to their social media. If you include a link in social media posts, the page’s featured image will be shown as the preview image. Learn more ↗ A store title and description are included with the preview image. Learn more ↗

Description (No customizable settings available.)


Custom liquid

  1. Custom liquid - Add custom Liquid or HTML code ↗.

Still need help? Contact Us Contact Us