Featured Product

The Featured Product section in the Electro theme is a great way to showcase your best products and drive sales. It can be added to any page in your store, and it is highly customizable. This section focuses on introducing customers with the store’s flagship product. Buyers are encouraged to view the product and understand its basic attributes, if they get hooked, they will:

  • Primary case: Go to the product details page to make a final decision (add to cart)
  • Sub-case: Buyers are so convinced that they want to buy right away.

To add the Featured Product section to a page, go to Online Store > Themes > Electro > Customize. Then, select the page that you want to add the section to from the list of pages. In the Sections section, click on the Add Section button. Then, select the Featured Products section from the list of sections.

The Featured Product section will be added to the page. You can then customize the section by changing the following settings:

GeneralClick to copy 2222

The Electro theme allows you to independently add three kinds of details to this section: subheading, heading, and description. To remove any settings, simply delete the content and replace it with a blank space.

You can also click the Select product button to add a product from your Shopify store to this section. You can only select one product for this section.

MediaClick to copy 2222

The Media settings in this section control the aspect ratios of the main product image and the thumbnail list.

  • Media ratio: This determines the aspect ratio of the main product image. You can choose from:
  • Square
  • Portrait (2:3)
  • Landscape (3:2)
  • Adapt to Image.

  • Thumbnail ratio: This determines the aspect ratio of the thumbnail list. You can choose from Fill or Fit.
  • Fill will stretch the thumbnail to fit the width of the list
  • Fit will crop the thumbnail to fit the width of the list

You can enable or disable the Show thumbnail on mobile option to display a slideshow of product images below the main product image on mobile devices. This is a great way to showcase more of your products to mobile users, who may have less screen space than desktop users. The slideshow will automatically scroll through the images, so visitors can easily see all of your products.

LayoutClick to copy 2222

The content alignment of the Featured Product section can be set to Left or Center. This alignment will be applied to the heading, subheading, and description of the section.

  • Left alignment: The text will be aligned to the left side of the section.
  • Center alignment: The text will be centered in the section.

BlocksClick to copy 2222

The Featured Product section has some blocks that are added by default. You can only add one of each of these blocks to the section:

  • Vendor: This block displays the name of the vendor who sells the product.
  • Title: This block displays the title of the product.
  • Variant selector: This block allows visitors to select the variant of the product that they want to purchase.
  • Price: This block displays the price of the product.
  • Purchasing: This block displays the add to cart button and the quick view button.

You can add more blocks to the section by clicking on the “Add block” icon. The following blocks can be added to the section:

  • SKU: This block displays the SKU of the product.
  • Rating: This block displays the rating of the product.
  • View details button: This block displays a button that visitors can click to view more details about the product.
  • Custom text: This block allows you to add custom text to the section.
  • Custom liquid: This block allows you to add custom liquid code to the section.
  • Description: This block displays the description of the product.
  • Highlight: This block displays a highlighted section of the product’s description.

After you have added a block to the section, you can customize it by changing the following settings:

VendorClick to copy 2222

The Vendor block does not have any settings in the Featured Product section. You can set up the vendor name for your products in the Product editor in your Shopify admin.

SKUClick to copy 2222

The SKU block in the Featured Product section does not have any settings. You can set up the SKU for your products in the Product editor in your Shopify admin.

TitleClick to copy 2222

You can enable the share button on the product title here. The share button will appear next to the product title.

Variants selectorClick to copy 2222

Variant selectors always show if variants are available. You can configure variant options to display as swatches in Theme settings.

You can also enable the Show stock number option to show the stock number below the variant selector.

PriceClick to copy 2222

You can choose to show a sale badge and tax and shipping policy in this block. The sale badge will be displayed in the same line as the price and sale price. The tax and shipping policy will be displayed below them. If the product does not have a sale price or you have not added a shipping policy, these items will not be displayed.

PurchasingClick to copy 2222

The Featured Product section gives you the option to display a quantity selector or dynamic checkout buttons. You can choose to display them based on your preference.

In the section, the Add to Cart button will always be displayed by default and cannot be removed.

RatingClick to copy 2222

To display a rating on your Shopify product page, you must first install a product rating app. Once you have installed an app, you can add a rating block to your product page.

View details buttonClick to copy 2222

The View details button redirects visitors to the product page. You can choose from three button styles: primary, outline, or link. You can only add one block of this type per page.

 

HighlightsClick to copy 2222

The Highlights block allows you to show up to 4 highlights items for your products. You can use this block to show trust badges or key information about your products.

The Highlights block settings include general settings and items settings.

  • General settings: In general, you can choose the display style for this block, including icon blocks or collapsible content.

  • Items settings: You can set up to 4 items to highlight for this block. Each item can have an icon, heading, and content. The items will be displayed on the live page after you fill in the contents.

Custom textClick to copy 2222

You can freely add content and adjust the text style in this block.

Note: This block can be added multiple times in the Featured Product section.

There are two text styles to choose from:

  • Body: This is the default text style with normal font weight.
  • Body light: This text style is lighter than the default text style with light font weight.

You can customize the body text typography in the Theme Settings.

You can add a metafield text on the placeholder by clicking on the icon next to the title placeholder.

Custom liquidClick to copy 2222

You can add custom code to show custom content on the Featured Product section. To learn more about Liquid, the language used to create custom code for Shopify themes, click here.

Note: This block can be added multiple times in the Featured Product section.

DescriptionClick to copy 2222

The Feature Product block displays the product’s description, which is rendered from the default Shopify product description. If the description is more than 50 words, a “More” button can be enabled to show the full description. To adjust the description, go to Shopify Admin > Products.

Navigate this category