Product Section
About The Section
This section is used to render key product elements such as the product media, product title, product pricing, quantity selectors, add to cart buttons, variant option selectors, product upsells, and social media share links.
Section - Desktop Preview
Section - Mobile Preview
Section Settings
| Setting Name | Usage | Recommended Value |
|---|---|---|
| Sticky product info on scroll | Does not currently do anything | FALSE |
| Enable Sticky 'Add to cart' prompt | When you get about 60% down the page a popup will show up at the bottom of the screen | FALSE |
| Position on large screens | The position of the content on the screen | Right |
| Show on mobile | Allows the sticky section to show on mobile | FALSE |
| Layout on large screens | The slider layout with images either stacked or in a slider | Slider |
| Media Width | Different section widths for the images | Medium |
| Media Aspect Ratio | The aspect ration of the media images | Square |
| Media Crop | The crop of the images | None |
| Zoom on hover | allows the mouse cursor to act as a real time zoom of the image | Large |
| Enable video looping | Loops product videos that play on the PDP when they finish | TRUE |
| Scroll to variant media | When the variant is changed, focus the media slider | 3rd option |
| Underline active media | Not in use. Added custom logic to show border around selected element | FALSE |
| Show thumbnails | Determines if the media thumbnails will show | TRUE |
| Thumbnail shape | Sets the overall shape of the thumbnails. Border radius is statically set. | Square |
| Thumbnail crop | The crop of the images | None |
| Show arrows | Show the slider arrows | Never |
| Show Slide Count | Shows the amount of slides in the slider | FALSE |
| Media border | Not in use | #ffffff |
| Media background | Not in use | #ffffff |
| Show media only associated with the selected variant | Not in use. Custom solution to match main campania site | False |
| Variant option label | The variant option that triggers an image change event | Color,Colour,Couleur,Farbe |
Block Types and Related Settings
Title
| Setting Name | Usage | Recommended Value |
|---|---|---|
| Show Weight | shows the product weight next to the main product title | FALSE |
| Show Vendor in Product Title | Shows the "By VENDOR" after the product title | TRUE |
Product Rating
Displays the product rating when Judgeme has at least 1 active review to show.
Price
| Setting Name | Usage | Recommended Value |
|---|---|---|
| Show tax and shipping information | Shows the "shipping calculated at checkout" content | TRUE |
Buy Buttons
| Setting Name | Usage | Recommended Value |
|---|---|---|
| Show Quantity Selector | Shows the quantity up / down arrows and input field | TRUE |
| Show Dynamic Checkout Button | Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. | FALSE |
| Show pickup availability | Show customers where they can pick up the product | FALSE |
| Show recipient information form for gift cards | Allow customers to send gift cards to a recipient along with a personal message. When enabled, the dynamic checkout button will be disabled for gift cards. | FALSE |
Variant Picker
| Setting Name | Usage | Recommended Value |
|---|---|---|
| Selector style | Determines if the product options use a dropdown or swatches | Buttons |
| Show availability in selectors | Not in use | FALSE |
| Show backorder text | Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock. | TRUE |
| Enable size chart | Shows the size chart on the PDP | FALSE |
| Option name | The name of the size option | Size |
| Page containing the size chart. | Select a page that contains sizing chart that will be displayed on the PDP | BLANK |
| Enabled Custom Swatches | Enables the campania swatch system to apply to this site | TRUE |
Product Upsells
| Setting Name | Usage | Recommended Value |
|---|---|---|
| Enable Upsells | Toggles the upsell system on using the metafields | TRUE |
Share
Shows the share buttons for X, facebook and pinterest
Divider
| Setting Name | Usage | Recommended Value |
|---|---|---|
| Show line | Determines if a visible line will show | TRUE |
| Spacing | Top and bottom spacing between the sections | Default |
"Under the Hood" Details
- upsells merge the 3 different recommended product metafields into a single group and display them in the upsells block.
- Product option swatches for colors are controlled the same way that they are on campania's main site.
Troubleshooting Tips
- If you find a duplicate upsell item, ensure that there isnt a duplicate sku across the 3 upsell metafields in the product admin.
- If you've tried the above tips and are still running into issues, please reach out to us for assistance.