Agile - Premium Shopify Theme
Shopify GuidesContact Us
  • Agile - Greeting
  • THEME INSTALLATION
    • Recommended Apps
    • Create Required Metafields
  • Theme Setting
    • Favicon
    • Layout
    • Badges
    • Colors
    • Typography
    • Product
    • Color swatches
    • Social media
    • Search behavior
    • Animation
    • Currency format
    • Cart
    • Checkout
    • Cookies
    • Custom CSS
  • Sections
    • Announcement bar
    • Header
    • Featured product
    • Collection list
    • Rich text
    • Image with text
    • Slideshow
    • Newsletter
    • Contact form
    • Video
    • Custom liquid
    • Blog posts
    • Countdown timer
    • Divider
    • FAQ
    • Google map
    • Icons with text
    • Image with text overlay
    • Logo list
    • Promotion banner
    • Recently viewed products
    • Scrolling text
    • Shopable image
    • Spacing
    • Testimonials
    • Tiktok video
    • Video with text overlay
    • Featured collection
    • Search
    • Quick shop
    • Newsletter popup
    • Age verifier popup
    • Footer
    • Mobile navigation bar
    • Cart drawer
    • Page heading
    • Product testimonials
    • Shopable video
    • Image tabs
    • Image testimonials
    • Image comparison slide
    • Bundle products
  • Collections & Products Pages
    • Products
      • Page template sections
        • Product information
        • App
        • Related products
    • Collections
      • Page template sections
        • Product grid
        • Collection banner
    • Collections list
      • Page template sections
        • Collection list page
  • Other pages
    • Cart
    • Checkout
    • Search
    • Blogs
      • Page template sections
        • Blog carousel
        • Blog posts
    • Blog posts
    • 404 page
    • Password
    • Our store
    • About us
      • Page template sections
    • Contact us
      • Page template sections
    • Faqs
  • FREQUENTLY ASKED QUESTIONS
    • How to change Elements of page?
      • Home Page
        • Gorde
        • Obik
        • Glamor
        • Serums
        • Rustic
    • How to translate a theme after adding a new default language?
    • Theme translation
    • Change currency
    • The desktop screen look more like on a tablet
    • Change free shipping message
    • How to setup pre-order products?
    • Staff account
Powered by GitBook
On this page
  • How to add a Product information section?
  • How to customize your Product information section
  • General Settings
  • Media
  • Section padding
  • Block settings
  1. Collections & Products Pages
  2. Products
  3. Page template sections

Product information

How to customize your product information in product pages

Last updated 9 months ago

This article guides you through the process of adding, editing, or removing information on your product pages. Providing accurate, reliable, and comprehensive product details empowers customers to make informed purchasing choices.

How to add a Product information section?

Steps

  1. In the theme editor (Customize), open the template selector.

  2. Select Products, then Default product.

  3. On the left-sidebar, add Product information.

  4. Make necessary changes > Save.

How to customize your Product information section

General Settings

Setting
Description

Section width

3 options for container

  • Stretch width: span the section width regardless of screen size.

  • Fix width: depends on your page content width in Theme settings -> Layout.

  • Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.

Show breadcrumb

Display breadcrumb

Enable sticky content on desktop

When you enable it, the product content will be fixed in position

Media

Learn more about

Setting
Description

Desktop media width

3 options for desktop media width

  • Small

  • Medium

  • Large

*Media is automatically optimized for mobile.

Desktop media position

2 options for desktop media position

  • Right: The image is on the right, and the content is on the left

  • Left: The image is on the left, and the content is on the right

*Position is automatically optimized for mobile.

Desktop layout

3 options for desktop layout

  • Stack: The first image will be highlighted and larger than the remaining images

  • 2 Columns: The product images will be divided into two columns

  • Thumbnail carousel: The product images are displayed in a carousel format with small thumbnail images

Enable variant image group

Desktop thumbnails position

3 options for desktop thumbnails position

  • Left

  • Bottom

  • Hide

Image zoom

4 options for desktop thumbnails position

  • Lightbox: When you click on a product image, it will display a popup with larger images

  • Inner zoom: When hovering over a product image, the image will zoom in

  • External zoom: When hovering over a point on the product image, a zoomed-in image of the hovered point will appear next to the product image

  • Hide: Do not display the zoom function

Enable video looping

When enabled, the video will loop if the product has a video

Enable video autoplay

When enabled, the video will autoplay if the product has a video

Mobile layout

2 options for desktop thumbnails position

  • Hide thumbnails

  • Show thumbnails

*Mobile thumbnail only shows when desktop layout is thumbnail carousel.

How to set up Variant image group

Step 1: Choose the product you want to set up Variant image group. Select an image that you uploaded for the product.

Step 2: Fill the Alt text with the corresponding variant

Step 3: Enable Variant image group on the product page.

Step 4: Experience the Variant Image group in your store.

Section padding

  • Top padding: Customize the top margin of the section

  • Bottom padding: Customize the bottom margin of the section

Block settings

1. Text

Add the custom content you want

2. Product title

Display product title

3. Price

Display product price

  • Show sale badge: Display product badges such as discounts, out of stock, in stock, and more

4. Product rating

Display the product's rating

5. Buy buttons

  • Show dynamic checkout buttons: Toggle the ''Show dynamic checkout buttons" option to include a direct checkout button

6. Variant picker

  • Type : Pills and Dropdown

  • Show size chart: Display size chart

  • Size chart label: Title of size chart

  • Size chart page: Select the page to display the size chart you've created

  • Custom size chart

    Using specific size charts for each collection or product.

7. Collapsible row

Add a heading and extra information on the tabs.

  • Heading: Include a heading that explains the content.

  • Row content: The content, as you've written

  • Row content from page: The content is get from the selected page

8. Pop-up

  • Link label: Content link

  • Icon: Selected icon display

  • Page: Selected page will display content

9. Share

The option to display social networks for sharing or copying links to share.

10. Custom liquid

Add app snippets or other Liquid code to create advanced customizations.

11. Complementary products

12. Promotion

Display the promotion countdown.

13. Description

Display the product description.

14. Ask a question

Display a form for users to submit questions to the seller about the product.

15. Trust seal

Upload the image you want

16. Product meta

Show/hide collections, SKU, product type, and product tags.

17. Inventory status

Inventory status signifies the availability of a product. It's vital for ensuring products are in stock, managing inventory efficiently, and informing customers about availability on your website

18. Divider

Creates a straight line with customizable colors.

Variant image group is a feature that allows only the images of the chosen variant to be displayed at a moment. Follow to learn how to set up Variant image group for a product.

Show recipient information form for gift card: Enables users to schedule gift card deliveries with personal messages.

Products with variants provide customers with more choices. To learn more about variants and how to add them to your store, visit the following .

To use a custom size charts for product or collection, create metafield with namespace and key: "custom.size_chart". .

To select complementary products, add the Search & Discovery app.

You need to create a metafield before displaying this block. Please see how to create a metafield

media types.
Learn more
link
Learn more
this link
Learn more
here