How To Create Product Description Drop Down Menus in Shopify

When designing product pages, you’ll often need to account for the fact that a single product can come in many different forms. Indeed, certain items in your catalog may be available in various sizes, colors, patterns, flavors, capacities, etc.

Adding product description drop down menus to your Shopify store is one of the most effective ways to deal with such variants. Once this feature has been implemented, it will be especially easy for visitors to set up the exact product configuration they want. And what’s good for your customers is good for you — a more intuitive site design will help you increase your conversion rate and make more sales.

Below, we’ll go over the two ways that you can add product description drop down menus in detail:

• Creating Product Description Drop Down Menus using Shopify
• Creating Product Description Drop Down Menus using Shogun

Creating Product Description Drop Down Menus using Shopify

If you’d like to add a drop down menu to a product description in the Shopify admin, you’ll first need to set up the product variants that will be displayed in the drop down:

• Log in to your Shopify account and select the “Products” option in the left sidebar of the main Shopify control panel.
• Select the product that you would like to add some variants to. 
• Go to the “Variants” section of the product settings page and select “Add options like size or color”. 
• Enter the option name (e.g., “Size”) and option values (e.g., “Small”, “Medium”, and “Large”). Then, select “Done”. 
• Add the price and inventory of each variant. 
• Save your changes to the product page.

Now that your product variants have been set up, you can add a drop down menu for them in Shopify’s built-in theme editor:

• Select the sales channel that you would like to customize in the left sidebar of the main Shopify control panel. 
• Click on the “Customize” button next to your theme — this will open Shopify’s built-in theme editor. 
• Use the menu located at the top of the theme editor to navigate to the specific page template you want to edit (in most cases, product pages will be assigned to the “Default product” template). 
• In the left sidebar of Shopify’s built-in theme editor, you’ll find all of the sections and blocks that make up the page listed in order. In the “Product information” section, hover your cursor over where you want your drop down menu to be located and select “Add block”. 
• Select “Variant picker”.
• Once the “Variant picker” block has been added, click on it to open up the block’s customization settings.
• Switch the “Type” setting to “Dropdown”. 
• Save your changes.

If you add another variant option in the settings for a product, this will be reflected in the “Variant picker” block without you needing to take any additional steps in the theme editor.

Each product can have up to three variant options (so, up to three drop down menus in the product description) and up to 100 variants total. It’s also worth noting that the styling of the “Variant picker” block will be determined by whichever Shopify theme you’re currently using.

Creating Product Description Drop Down Menus using Shogun

Shogun’s visual editor offers an easy way for anyone to create custom content for their Shopify store. For example, here’s how you can use this tool to build a product description drop down menu:

• After downloading and installing Shogun, select the “Apps” option in the left sidebar of the main Shopify control panel. 
• Open Shogun. 
• Go to the “Pages” section of the Shogun app and hover your cursor over “Build or edit a page”. This will open up a menu allowing you to import a page, start from a pre-designed template, or start from scratch — whichever option you choose will then take you to Shogun’s visual editor. 
• Select the “Elements” icon in the left sidebar of the visual editor to open up the element library. Here, you’ll find all kinds of features that you can add to the page with just a couple clicks. 
• Scroll down to the “Shopify” section of the element library. The information inside these elements will automatically be populated based on the data in your Shopify catalog — that means you won’t need to go through the tedious process of plugging in all these details manually. Click and hold on the “Variant” element listed here, then drag it over to wherever you want your drop down menu to be placed in the product description.
• Customize the styling of the “Variant” element however you want, then save your changes. 

Specifically, the customization options for the “Variant” element include:

• You can display a separate drop down menu for each variant option, or combine all of the variant options into one drop down menu.
• If multiple drop down menus will be displayed, you can choose to have them arranged either vertically or horizontally. 
• Determine whether sold-out variants are hidden, shown but not selectable, or shown and selectable. 
• Determine whether your drop down menus are labeled or not. 
• Adjust the amount of space between each of your drop down menus.
• Adjust the amount of space separating your drop down menu section from the surrounding elements on the page. 
• Add a background color, border, or box shadow to your drop down menu section.

Shogun also allows you to turn any page design you’ve created in the app into a reusable template. So, if you plan to add a product description drop down menu to a bunch of pages anyway, you can save quite a bit of time by setting up a template that incorporates this feature:

• Use the visual editor to create the page design that you’d like to reuse, then open the settings menu located in the top-right corner of the editor. 
• Select “Save as template”. 
• Give your new template a name, then select “Save template”.

Once your template has been created, you’ll be able to use it as a starting point whenever you create a new page in Shogun. 

Finally, there is one other way that you can use Shogun to add drop down menus to your product descriptions — with Shogun’s theme sections feature, you’ll be able to design this content in Shogun and then implement it on your store through Shopify’s theme editor. 

To create a theme section, just follow these steps:

• Open Shogun. 
• Select the “Pages” option in the left sidebar of the main Shogun dashboard. You will then see a “Sections” option appear just under “Pages” — select it. 
• Click on the “Create new…” button. 
• Give your new section a name, then select “Create” — this will open Shogun’s visual editor. 
• Design your product description drop down menu, then save and publish the section. 

And once your theme section has been created in Shogun, you will then be able to access it in Shopify’s theme editor:

• Go to your Shopify account. 
• Select the sales channel you want to customize in the left sidebar of the main Shopify control panel.
• Click on the “Customize” button next to your theme to open Shopify’s built-in theme editor.
• Use the menu located in the middle of your screen near the top of the page to navigate to whichever page template you would like to edit. 
• In the left sidebar of the theme editor, you’ll see all of the sections that make up the page listed in order. Hover your cursor over where you want your drop down menu to be located, then select “Add section”. 
• You’ll see that the drop down menu theme section you just created in Shogun is now listed as an option here — select it to add your drop down menu to the page. 
• Save your changes.

If you ever feel the need to edit your theme section in the future, this change will automatically be reflected on every Shopify page where it is already featured — this is yet another way that Shogun allows Shopify merchants to avoid repetitive data entry and manage their stores more efficiently.