Trying to add a homepage section to Product Page - Flex Theme

ClemFandango
Tourist
4 0 0

Bear with me here, i'll try to explain as best I can -

I'm attempting to add an image slideshow (which is a Home Page section) to show extra landscape images in the product page body. 

i have managed to simply add {% section 'index__slideshow-classic' %} in the body container of the product template but the issue is this now appears at the bottom of any additional content which is added to the product page in the product page editor using {% section 'product-image-scroll__main' %} which i guess is effectively 'blocks' added within a section (if that makes sense?)

To get the slideshow to show as an addable block option within product-image-scroll section on the page editor,  I think i need to add the slideshow-classic to the following list of blocks which is part of the product-image-scroll__main.liquid file:

 

 

<div id="shopify-section-{{ block.id }}" {{ block.shopify_attributes }} class="shopify-section product__block block__{{ block.type | replace: '_', '-' }}
{% if block.type == 'featured_collection' %}
jsFeaturedCollection
{% elsif block.type == 'image_with_overlay' %}
overlaid-header-option
{% elsif block.type == 'featured_product' %}
jsProduct
{% elsif block.type == 'map' %}
jsMap
{% elsif block.type == 'video' %}
jsVideo
{% endif %}">
{% if block.type == 'product_reviews' %}
{% comment %} Product reviews {% endcomment %}
{% include 'include-reviews', type: 'block' %}

{% elsif block.type == 'video' %}
{% comment %} Featured video {% endcomment %}
{% include 'include-video', type: 'block' %}

{% elsif block.type == 'image_with_overlay' %}
{% comment %} Image with text overlay {% endcomment %}
{% include 'include-image-with-text-overlay', type: 'block' %}


{% elsif block.type == 'image_with_text' %}
{% comment %} Image with text {% endcomment %}
{% include 'include-one-image-with-text', type: 'block' %}

{% elsif block.type == 'rich_text' %}
{% comment %} Rich text {% endcomment %}
{% include 'include-rich-text', type: 'block' %}

{% elsif block.type == "blog" %}
{% comment %} Blog {% endcomment %}
{% include 'include-featured-blog', type: 'block' %}

{% elsif block.type == 'featured_collection' %}
{% comment %} Featured collection {% endcomment %}
{% include 'include-featured-collection', type: 'block' %}

{% elsif block.type == 'logo_list' %}
{% comment %} Logo list {% endcomment %}
{% include 'include-logo-list', type: 'block' %}

{% elsif block.type == "divider" %}
{% comment %} Divider {% endcomment %}
{% include 'include-divider', type: 'block' %}

{% elsif block.type == 'map' %}
{% comment %} Map {% endcomment %}
{% include 'include-map', type: 'block' %}

{% elsif block.type == "page" %}
{% comment %} Page {% endcomment %}
{% include 'include-content-page', type: 'block' %}

{% elsif block.type == 'recommended_products' %}
{% comment %} Recommended products {% endcomment %}
<section class="section is-width-{{ width }}" data-product-recommendations-container
{% if animation != "none" %}
data-scroll-class="{{ animation }}"
{% endif %}>
</section>

 

 

Then i see the Schema for each block at the bottom of product-image-scroll__main.liquid which i assume needs to be added too to get the slideshow as an option within product-image-scroll on teh page editor -  I have copied the schema from the slideshows own liquid file and have tried to play with this as well as add the slideshow as a block, but no dice...

 

 

{% schema %}

{
  "name": "Slideshow - classic",
  "class": "jsSlideshowClassic overlaid-header-option slideshow-section under-menu",
  "settings": [
    {
      "type": "select",
      "id": "image_transition",
      "label": "Image transition",
      "options": [
        {
          "value": "fade",
          "label": "Fade"
        },
        {
          "value": "slide",
          "label": "Slide"
        }
      ],
      "default": "slide"
    },
    {
      "type": "range",
      "id": "image_slideshow_speed",
      "label": "Change image every",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 8,
      "unit": "sec"
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show arrows",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_nav_buttons",
      "label": "Show navigation dots",
      "default": true
    },
    {
      "type": "header",
      "content": "Mobile"
    },
    {
      "type": "checkbox",
      "id": "mobile_text_below_image",
      "label": "Show text below image",
      "default": true
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "width",
      "label": "Width",
      "default": "wide",
      "options": [
        {
          "value": "standard",
          "label": "Standard"
        },
        {
          "value": "wide",
          "label": "Wide"
        }
      ]
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top spacing",
      "min": 0,
      "max": 80,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom spacing",
      "default": 0,
      "min": 0,
      "max": 80,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Animation",
      "default": "none",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "fadeIn",
          "label": "Fade in"
        },
        {
          "value": "fadeInDown",
          "label": "Fade in down"
        },
        {
          "value": "fadeInLeft",
          "label": "Fade in left"
        },
        {
          "value": "fadeInRight",
          "label": "Fade in right"
        },
        {
          "value": "slideInLeft",
          "label": "Slide in left"
        },
        {
          "value": "slideInRight",
          "label": "Slide in right"
        }
      ]
    },
    {
      "type": "header",
      "content": "Advanced",
      "info": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
    },
    {
      "type": "text",
      "id": "css_class",
      "label": "CSS Class"
    },
    {
      "type": "textarea",
      "id": "custom_css",
      "label": "Custom CSS"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Slide",
      "settings": [
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Links entire image"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1800 x 900px recommended"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile Image",
          "info": "900 x 1800px recommended"
        },
        {
          "type": "header",
          "content": "Text"
        },
        {
          "type": "richtext",
          "id": "pretext",
          "label": "Preheading",
          "default": "<p>Preheading</p>"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Classic slideshow"
        },
        {
          "type": "richtext",
          "id": "subtitle",
          "label": "Subheading",
          "default": "<p>Additional info in the subheading</p>"
        },
        {
          "type": "color",
          "id": "pretext_color",
          "label": "Preheading",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "heading_color",
          "label": "Heading",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "subheading_color",
          "label": "Subheading",
          "default": "#000000"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "text_horizontal_position",
          "label": "Horizontal position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "header",
          "content": "Text background"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background",
          "default": "#FFFFFF"
        },
        {
          "type": "range",
          "id": "background_opacity",
          "label": "Background opacity",
          "min": 0,
          "max": 100,
          "default": 77,
          "unit": "%"
        },
        {
          "type": "color",
          "id": "border_color",
          "label": "Border",
          "default": "#FFFFFF"
        },
        {
          "type": "range",
          "id": "border_width",
          "label": "Border width",
          "min": 0,
          "max": 20,
          "default": 0,
          "unit": "px"
        },
        {
          "type": "range",
          "id": "text_width",
          "label": "Text width",
          "min": 40,
          "max": 100,
          "default": 40,
          "unit": "%"
        },
        {
          "type": "header",
          "content": "Button 1"
        },
        {
          "type": "text",
          "id": "button_1",
          "label": "First button label",
          "default": "Button 1"
        },
        {
          "type": "url",
          "id": "button_1_link",
          "label": "First slide link"
        },
        {
          "type": "select",
          "id": "button_1_style",
          "label": "First button style",
          "options": [
            {
              "value": "button--primary",
              "label": "Primary"
            },
            {
              "value": "button--secondary",
              "label": "Secondary"
            },
            {
              "value": "button--link-style",
              "label": "Link style"
            }
          ],
          "default": "button--secondary"
        },
        {
          "type": "header",
          "content": "Button 2"
        },
        {
          "type": "text",
          "id": "button_2",
          "label": "Second button label",
          "default": "Button 2"
        },
        {
          "type": "url",
          "id": "button_2_link",
          "label": "Second slide link"
        },
        {
          "type": "select",
          "id": "button_2_style",
          "label": "Second button style",
          "options": [
            {
              "value": "button--primary",
              "label": "Primary"
            },
            {
              "value": "button--secondary",
              "label": "Secondary"
            },
            {
              "value": "button--link-style",
              "label": "Link style"
            }
          ],
          "default": "button--secondary"
        },
        {
          "type": "header",
          "content": "Mobile"
        },
        {
          "type": "select",
          "id": "mobile_image_crop",
          "label": "Image cropping",
          "default": "none",
          "options": [
            {
              "value": "none",
              "label": "None"
            },
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ]
        },
        {
          "type": "color",
          "id": "pretext_color_mobile",
          "label": "Preheading",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "color",
          "id": "heading_color_mobile",
          "label": "Heading",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "color",
          "id": "subheading_color_mobile",
          "label": "Subheading",
          "default": "rgba(0,0,0,0)"
        }
      ]
    }
  ],
  "presets": [{
    "name": "Slideshow - classic",
    "category": "Image",
    "settings": {
    },
    "blocks": [
      {
        "type": "image",
        "settings": {
          "image": "",
          "title": "Flex Shopify Theme",
          "subtitle": ""
        }
      },
      {
        "type": "image",
          "settings": {
          "image": "",
          "pretext": "<p>Preheading</p>",
          "title": "Classic slideshow",
          "subtitle": "<p>Additional info in the subheading</p>"
        }
      }
    ]
  }]
}

{% endschema %}

 

  

 

If anyone can help an idiot out, it will be much appreciated


Cheer

 

Clem x

0 Likes