The Full-Width Product Description app by Convertify Apps allows you to show the product description in its own stand-alone section that spans the full width of the product page.
Most of Shopify's new Online Store 2.0 themes do not give you the option of using the full page width to show the product description. Instead, the product description must appear within the right column of the 'Product Information' section (to the right of the product images).
This simple but powerful app not only makes it possible to show the product description in its own separate full-width section on the product page, but it also allows you to add a color background to the section, choose spacing and padding, add rounded corners to the section's background if desired, and/or make the background the full screen width.
This app user guide is organized into 3 sections:
- Install the 'Full-Width Product Description' app
- Add the 'Full-Width Description' section to your product page template
- Configure settings
1. Install the 'Full-Width Product Description' App
CLICK HERE to download the Full-Width Product Description app from the Shopify App Store. On this page, click the green 'Add app' button and then follow the prompts to add the app to your Shopify store. You'll see that our app includes a 14-day free trial before the first $2.99 monthly billing (which is processed by Shopify as part of your regular monthly Shopify subscription).
2. Add the 'Full-Width Description' Section to Your Product Page Template
In your Shopify admin panel, navigate to the Online Store > Themes page. At the top of the page, you'll see a picture of your "live theme" (desktop version and mobile version). To launch the Theme Editor (i.e. Customizer), simply click the green 'Customize' button.
Within Theme Editor, navigate to a product page. Towards the very bottom of the left menu, click on the blue 'Add section' button/link.
You'll notice that the menu that appears is organized into 2 parts: 1) THEME SECTIONS and 2) APPS. (Note: You may need to scroll down within the menu to see the 'APPS' sections.)
Within the 'APPS' section, click the 'Full-Width Description' item.
The 'Full-Width Description' section has now been added to the bottom of your product page template. Most likely, you won't want it to appear at the bottom of the page. Click on the 'move' icon to drag and drop the section to the location you want it to appear.
3. Configure Settings
All settings for this app are located in Shopify Theme Editor (i.e. Customizer) as part of the 'Full-Width Description' section. There are no settings in the app itself.
Once you've added the 'Full-Width Description' section to your product page template (as outlined above), click the 'Full-Width Description' section title in the left menu. The following settings/options will appear:
- Top section padding - Use this slider to choose how much blank space you want to appear above the 'Full-Width Description' section.
- Bottom section padding - Use this slider to choose how much blank space you want to appear below the 'Full-Width Description' section.
- Top/bottom inside padding - Use this slider to choose how much vertical padding you want within the 'Full-Width Description' section. If you won't be applying a background color to this section, you'll likely want to select 0px. However, if you do plan to show a background color in this section, you'll use this setting to indicate how much padding (i.e. blank space) there should be between the top of the section and where the textual content begins.
- Left/right inside padding - Use this slider to choose how much horizontal padding you want within the 'Full-Width Description' section. If you won't be applying a background color (or if you want the background color to span the full screen width), you will likely want to select 0px. Otherwise, you'll likely want to select at least 20px so that there is some blank space (i.e. padding) between the left/right edges of the product description box and the textual content.
- Background color - Use the color selector tool to choose the background color for the 'Full-Width Description' section. Leave 'transparent' selected if you want the section to show the page's background color. (Note: If you choose a color and then decide you want to revert back to transparent, simply delete the color hex code - i.e. #c8c8c8 - from the field.)
- Background border radius - If you want the "box" containing the product description to have rounded corners, use the slider to select a number greater than 0. The higher the number, the more rounded the corners will be. (Note: If you check the 'Make background full screen width' box below, this setting will be ignored.)
- Make background full screen width - Check this box if you want the background color to span the full screen width (not just the page width). As noted above, if you select this option, you will likely want to set 'Left/right padding' to 0px so that the textual content spans the full page width.
Still have questions? We're here to help. Simply submit a help ticket.
Comments
0 comments
Please sign in to leave a comment.