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

ClemFandango
Shopify Partner
6 0 1

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

Replies 3 (3)

robkaufman
Tourist
10 0 1

Hey Clem,

 

Just wondering if you ever figured this out? I'm going crazy trying to do the same and Out of the Sandbox hasn't been too helpful with even letting me know where I could find the block.type liquid code I want to add.

 

Any help is appreciated.

 

Thanks

ClemFandango
Shopify Partner
6 0 1

Rob, Sandbox don't help with much unless you pay for custom work through them. 

Got it sorted in the end. Not as straightforward as I thought as i found out you cant add dynamic content to the blocks in product-image-scroll for a few reasons. 

I ended up getting a shopify experts help from fiverr.com. He sorted it within a couple of hours for about $30. It was a bit out of my scope of knowledge.

Only issue is, you have to duplicate each product template for each unique slideshow that you want. (Or it will be the same slidehow on all products) So if you have more than 15-20 products each with a unique slideshow then you might run in to problems with this, as your code will get quite heavy pretty quick. Otherwise, you'll have to find another solution. 

If you want his details, let me know. 

Clem. 

robkaufman
Tourist
10 0 1

Hey Clem,

 

Thanks for letting me know. I just opened a task with storetasker to add a few sections to my product.sections template. I'm hoping they can fix it for me.

 

I'd love to see your completed website on Flex to if you want to message me the link.

 

Have a great day.