Show collections side by side on home page

superboyevan · November 13, 2021, 7:53am

Hi all,

Checking to see if anyone can help me find a solution for what I’m after.

Currently I have liquid displaying a collection on the left and product on the right. However I would like to have Collection A on the left and Collection B on the right.

It’s currently in a grid arraignment which is working, however each time I try to duplicate the first Collection, save then go back to the Shopify visual editor to select a Collection it renders in both left and right of the grid.

The liquid code section is below:

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
%}

{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection and Product",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

Many thanks in advance for any solutions/help.

Thanks,

Evan

LitCommerce · November 15, 2021, 8:44am

Hi @superboyevan ,

Please change code:

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
  assign collection_2 = collections[section.settings.collection_2]
  assign image_object_2 = collection_2.image | default: collection_2.products.first.featured_media.preview_image
%}

{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection Left"
      },
	  {
        "type": "collection",
        "id": "collection_2",
        "label": "Collection Right"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection and Product",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

Hope it helps!

superboyevan · November 16, 2021, 9:34am

Hi LitCommerce,

Thanks so much for that! It works!

Is there any way of being able to adjust the color of the heading/button/button text in the visual editor?

I’ve tried adding assign settings to the liquid section

{% liquid
 assign settings = section.settings
}%

and this code to the section

{% render 'image' with
color_background: settings.color_overlay,
color_background_button: settings.color_background_button,
color_heading: settings.color_heading,
color_text_button: settings.color_text_button

}%

and adding this next part to the schema

{ "id": "color_overlay",
        "type": "color",
        "label": "Overlay",
        "default": "#000000"
      },
      {
        "id": "color_heading",
        "type": "color",
        "label": "Heading",
        "default": "#ffffff"
      },
	  {
        "id": "color_text_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },
{
        "id": "color_background_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },
}

I can see this in the visual editor however when I change the color and save. Nothing happens. It’s seems I’ve missed something to link the color values to the text?

Have I missed something?

Thanks in advance.

Cheers,

Evan

LitCommerce · November 16, 2021, 9:44am

Hi @superboyevan ,

I checked and the code you added is incorrect.

The image file must have a declaration of color variables, so you can pass it at render. https://i.imgur.com/0iSIDKn.png

So can you send me the code of the image, I will check it.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

superboyevan · November 17, 2021, 12:02am

Hi LitCommerce,

I had a feeling what I did was incorrect. I’m still learning html/liquid.

If you could take a look at the code that would be great!

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
  assign collection_2 = collections[section.settings.collection_2]
  assign image_object_2 = collection_2.image | default: collection_2.products.first.featured_media.preview_image
  assign settings = section.settings
%}

{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection Left"
      },
	  {
        "type": "collection",
        "id": "collection_2",
        "label": "Collection Right"
      },
 	  { "id": "color_overlay",
        "type": "color",
        "label": "Overlay",
        "default": "#000000"
      },
      {
        "id": "color_heading",
        "type": "color",
        "label": "Heading",
        "default": "#ffffff"
      },
	  {
        "id": "color_text_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },

      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection v2",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

Much appreciate your help in advance.

Kind regards,

Evan

LitCommerce · November 17, 2021, 10:45am

Hi @superboyevan ,

Please change code:

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
  assign collection_2 = collections[section.settings.collection_2]
  assign image_object_2 = collection_2.image | default: collection_2.products.first.featured_media.preview_image
  assign settings = section.settings
%}

{% style %}
  .featured-product-{{ section.id }} h3{
	color: {{ section.settings.color_heading }} !important;
  }
  .featured-product-{{ section.id }} .btn{
	color: {{ section.settings.color_text_button }} !important;
    background-color: {{ section.settings.color_background_button }} !important;
  }
{% endstyle %}
{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection Left"
      },
	  {
        "type": "collection",
        "id": "collection_2",
        "label": "Collection Right"
      },
      {
        "id": "color_heading",
        "type": "color",
        "label": "Heading",
        "default": "#ffffff"
      },
	  {
        "id": "color_text_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },
 	  { 
		"id": "color_background_button",
        "type": "color",
        "label": "Button Background",
        "default": "#000000"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection v2",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

Hope it is clear to you.

superboyevan · November 17, 2021, 10:57am

Hi @LitCommerce

Fantastic! This greats really great! Really appreciate your help!

I have seen where the code was meant to go now.

Thanks again!

Cheers,

Evan

LitCommerce · November 17, 2021, 10:59am

Hi @superboyevan ,

If you have any difficulty, you can contact me

Happy to help you

Topic		Replies	Views
Swap product section with the text section Technical Q&A	15	20	March 2, 2022
Edit grid from Collection list section (Brooklyn) Store Design	15	127	January 15, 2021
Collection page on mobile ( Palo Alto Theme) Shopify Discussion	4	51	September 4, 2020
Trying to implement a different slideshow for each collection Technical Q&A	0	6	November 16, 2021
How to achieve text overlay over collections banner Store Design	2	8	March 3, 2022

Show collections side by side on home page

Related topics