Configuring Product Page Sections
Product Pages Section
Section is responsible for outputting all the core product information, product media, selectable product options, the add to cart button, and the BIS Form.
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Description position | Select | Determines if the description should go next to media or below media ( deprecated ). |
| Show Floating Add to Cart Button | Checkbox | Determines if the floating add to cart button will display when scrolling below the fold. |
| Show Shipping Estimate | Checkbox | Determines if an estimated ship date should render under the Add to Cart Buttons |
| Show Zip Payments | Checkbox | Determines if the ZIP payments snippet will display underneath the product price |
| Show color label | Checkbox | Determines if the currently select color will display next to the "Color" option |
| Enable social sharing | Checkbox | Determines if the social share buttons will display above the product title or not |
| Show Product Icons | Checkbox | Determines if the product icons under the product description will display. |
| Position | Select | Determines if the product media should display on the left or the right of the PDP. |
| Size | Select | Determines how much space the product media should take up. |
| Thumbnail position | Select | Determines if the product media thumbnails display under the main slider or to the left of it. |
| Show thumbnail arrows | Checkbox | Determines if the slider arrow will display in the product thumbnails. |
| Enable video looping | Checkbox | Determines if any video media should loop or stop when it finishes playing |
| Video style | Select | Determines if a video should play with or without sound. |
Blocks Settings
Block Type: Product Icons
| Name | Type | Functionality |
|---|---|---|
| Tag name | Text Field | Checks the product for a specific tag. If it contains this tag, the image will output. |
| SVG Image Name | Text Field | The file name uploaded to shopify content |
| SVG Image Title | Text Field | The alt title for the SVG image. |
PDP - Image With Text
Section is responsible for outputting content provided in one of the following product metafields:
- image1 - metaobject ( https://admin.shopify.com/store/shop-micro-kickboard/settings/custom_data/metaobjects/text_with_image )
- image2 - metaobject ( https://admin.shopify.com/store/shop-micro-kickboard/settings/custom_data/metaobjects/text_with_image )
- image3 - metaobject ( https://admin.shopify.com/store/shop-micro-kickboard/settings/custom_data/metaobjects/text_with_image )
- image4 - metaobject ( https://admin.shopify.com/store/shop-micro-kickboard/settings/custom_data/metaobjects/text_with_image )
When the selected metafield is left blank, the section will not render any content.
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Left / Right Image | Image | Sets the image that will be displayed on the left or the right of the text content |
| Section Background Color | Color | Determines the background color of the entire section |
| Text Color | Color | Determines the text color for the entire section |
| Rounded Desktop | Checkbox | Determines if the section will have rounded corners in desktop view |
| Rounded Mobile | Checkbox | Determines if the section will have rounded corners in mobile view |
| Select Image Position | Select | Determines what side the section the image will render on. Image position on mobile remains the same regardless of selection. |
| Select Metaobject # | Select | The metafield id you wish to assosiate the text content with. |
| Enable Test Content | Checkbox | When checked, overrides metafield values with static values for testing. Does not work unless metafiled has a value. |
PDP - Video
Section handles displaying a Youtube, Vimeo or Shopify video added to the below metafield:
When the metafield is left blank, the frontend will not render this section. If you are in the theme editor, you will see a notice that shows that no video was set in the metafield. Details include a link to the product admin where you can set the value if desired.
Section Settings
No Settings availabe for this section
PDP - Awards
Section handles displaying all rewards that the product is tagged with. Currently configured tags:
- Influencer Choice
- ECO Excellence
- Wirecutter
You can add any tag you want to trigger this section. Just make sure to add a block with the related tag.
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Section Background Color | Color | Determines the entire section's background color |
| Text Color | Color | Determines the entire section's text color |
| Section Heading | Text Field | Sets the section heading above the main content. If blank, nothing is displayed |
| Subtext Line | Text Area | Sets the section subheading above the main content. If blank, nothing is displayed |
Block Settings
Block Type: Award
| Name | Type | Functionality |
|---|---|---|
| Award Title | Text Field | Sets the title that displays under the image |
| Award Tag | Text Field | Used to determine if the block should be rendered. If the product has a matching tag from this field, the block will render in the section. |
| Award Image | Image | Sets the image that is displayed for the award |
| Award Link | URL | Sets the url for the award. |
| Block Background Color | Block Background Color | Sets the background color of the current block |
PDP - Product Specs
Section is responsible for rendering all the content from the following metafields:
- Storage Capacity ( https://admin.shopify.com/store/shop-micro-kickboard/settings/custom_data/product/metafields/2272788632 )
- PDP Specs ( https://admin.shopify.com/store/shop-micro-kickboard/settings/custom_data/product/metafields/806518936 )
- Max Rider Weight ( https://admin.shopify.com/store/shop-micro-kickboard/settings/custom_data/product/metafields/348684440 )
- magento.specs_age ( https://admin.shopify.com/store/shop-micro-kickboard/products/7602318114968/metafields?tab=metafields )
- magento.deck_size ( https://admin.shopify.com/store/shop-micro-kickboard/products/7602318114968/metafields?tab=metafields )
- magento.scooter_weight ( https://admin.shopify.com/store/shop-micro-kickboard/products/7602318114968/metafields?tab=metafields )
- magento.height_from_deck ( https://admin.shopify.com/store/shop-micro-kickboard/products/7602318114968/metafields?tab=metafields )
Section will always render 2 tables. Tables are built based on the amount of filled out metafields. Take the total amount of metafields filled out and divide that by 2. That should be how many items you see in each column. If the value is odd, you will see a higher amount of list items in one table compared to another ( 4 / 3 split in this example ).
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Title | Text Field | Sets the section heading above the main content. If blank, nothing is displayed |
| Table Background Color | Color | Determines the background color of each table segment |
| Table Text Color | Color | Determines the text color of each table segment |
PDP - Product Details
Section outputs the content of the product description text area from the product admin.
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Title | Text Field | Sets the section heading above the main content. If blank, nothing is displayed |
| Title Text Color | Color | Determines the text color of the accordion's heading. |
| Background Color | Color | Determines the background color of the accordion'sordian heading. The body is this color at 0.1 opacity. |
| Body Text Color | Color | Determines the text color of the accordion's body content. |
PDP - Icons With Desc
Section outputs the product icons that are determined in the block settings.
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Title | Text Field | Sets the section heading above the main content. If blank, nothing is displayed |
| Details | Text Area | Sets the section description below the title. If blank, nothing is displayed |
| Text Color | Color | Determines the text color for the section |
| Background Color | Color | Determines the background color for the section |
Block Settings
Block Type: Icon
| Name | Type | Functionality |
|---|---|---|
| Icon | Image | Sets the image that is displayed above the the block title |
| Text | Text Field | The Title that displays under the icon |
PDP - Related Products
Section displays all available related products to the current product. The amount of products is limited based on the value set in the admin.
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Show dynamic recommendations | Checkbox | Determines if we use manual or dynamic recommendations for products rendered in the section. |
| Number of related Products | Range Slider | Determines how many products should display in the section. Min: 1, Max: 6, Recommended: 3 |
| Title | Text Field | Sets the section heading above the main content. If blank, nothing is displayed |
| Background Color | Color | Determines the background color for the entire section |
| Text Color | Color | Determines the text color for the entire section |
PDP - Judgeme Reviews
Section renders the Judgeme Customer Reviews Widget.
Section Settings
No Settings availabe for this section
PDP - Klaviyo Section
Section outputs a klaviyo form with subtle customizations for desktop and mobile. When no form is specified, the section does not display any content.
Section Settings
| Name | Type | Functionality |
|---|---|---|
| Background Color for Klaviyo | Color | Determines the background color for the entire section |
| Desktop Embed Form | Text Area | The Klaviyo form code to render on desktop view |
| Mobile Embed Form | Text Area | The Klaviyo form code to render on mobile view |
| Enable Full Width? | Checkbox | Determines if the section should take up the full width of the page or have a max-width |
| Form Max Width | Checkbox | Determines if the form itself should span the entire section or have it's own max-width |