Greetings all. I have a single product site that I want to be hosted only on the main home page. I want the “Featured Product” Section to show a carousel slider image with the pictures on the bottom with slider. I can’t seem to get this to work as there are no options and was removed in earlier versions of the Dawn theme. I can get this to work on the product page but not on the home page when I add a Featured product section. It will only show one product image with a view more details button but I don’t want that. Any and all help would be appreciated. Attached is an example picture of what I am looking for.
@TheDapperLove Hey, thanks for posting here.
can you please share the link to inspect it, thanks.
I understand your concern. It sounds like you’re looking to create a carousel slider with multiple product images on the homepage’s Featured Product section, similar to what you can achieve on the product page.
To help you achieve this, I’d be happy to assist you in modifying the code to bring the carousel slider functionality from the product page to the homepage’s Featured Product section.
https://2dedc6-af.myshopify.com/
Not familiar with Shopify yet, but if this link does not work let me know! This is what I have currently which is only the home page. Thank you both for the fast responses. Any and all help will be appreciated!
https://2dedc6-af.myshopify.com/
Not familiar with Shopify yet, but if this link does not work let me know! This is what I have currently which is only the home page. Thank you both for the fast responses. Any and all help will be appreciated!
I’m happy to help you with that! We just have to make some code changes.
To get started, follow these steps:
- Log in to your Shopify Admin panel.
- Go to Online Store > Theme > Edit code.
- In the code editor, navigate to the sections/featured-product.liquid file.
- Replace the whole code with the below one.
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign product = section.settings.product
if section.settings.media_size == 'large'
assign media_width = 0.65
elsif section.settings.media_size == 'medium'
assign media_width = 0.55
elsif section.settings.media_size == 'small'
assign media_width = 0.45
endif
-%}
{% comment %} TODO: assign `product.selected_or_first_available_variant` to variable and replace usage to reduce verbosity {% endcomment %}
{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
{%- if first_3d_model -%}
{{ 'component-product-model.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}
{%- if section.settings.image_zoom == 'hover' -%}
{%- endif %}
{%- if request.design_mode -%}
{%- endif -%}
{%- if first_3d_model -%}
{%- endif -%}
{%- liquid
if product.selected_or_first_available_variant.featured_media
assign seo_media = product.selected_or_first_available_variant.featured_media
else
assign seo_media = product.featured_media
endif
-%}
{% if product.media.size > 0 %}
{% endif %}
{% schema %}
{
"name": "t:sections.featured-product.name",
"tag": "section",
"class": "section section-featured-product",
"disabled_on": {
"groups": ["header", "footer"]
},
"blocks": [
{
"type": "@app"
},
{
"type": "text",
"name": "t:sections.featured-product.blocks.text.name",
"settings": [
{
"type": "inline_richtext",
"id": "text",
"default": "Text block",
"label": "t:sections.featured-product.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.featured-product.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-product.blocks.text.settings.text_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-product.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.featured-product.blocks.text.settings.text_style.label"
}
]
},
{
"type": "title",
"name": "t:sections.featured-product.blocks.title.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "price",
"name": "t:sections.featured-product.blocks.price.name",
"limit": 1
},
{
"type": "sku",
"name": "t:sections.featured-product.blocks.sku.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.featured-product.blocks.sku.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-product.blocks.sku.settings.text_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-product.blocks.sku.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.featured-product.blocks.sku.settings.text_style.label"
}
]
},
{
"type": "quantity_selector",
"name": "t:sections.featured-product.blocks.quantity_selector.name",
"limit": 1
},
{
"type": "variant_picker",
"name": "t:sections.featured-product.blocks.variant_picker.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "picker_type",
"options": [
{
"value": "dropdown",
"label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__1.label"
},
{
"value": "button",
"label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__2.label"
}
],
"default": "button",
"label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
}
]
},
{
"type": "buy_buttons",
"name": "t:sections.featured-product.blocks.buy_buttons.name",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_dynamic_checkout",
"default": true,
"label": "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
"info": "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
}
]
},
{
"type": "share",
"name": "t:sections.featured-product.blocks.share.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "share_label",
"label": "t:sections.featured-product.blocks.share.settings.text.label",
"default": "Share"
},
{
"type": "paragraph",
"content": "t:sections.featured-product.blocks.share.settings.featured_image_info.content"
},
{
"type": "paragraph",
"content": "t:sections.featured-product.blocks.share.settings.title_info.content"
}
]
},
{
"type": "custom_liquid",
"name": "t:sections.featured-product.blocks.custom_liquid.name",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.featured-product.blocks.custom_liquid.settings.custom_liquid.label"
}
]
},
{
"type": "rating",
"name": "t:sections.featured-product.blocks.rating.name",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "t:sections.featured-product.blocks.rating.settings.paragraph.content"
}
]
},
{
"type": "icon-with-text",
"name": "t:sections.main-product.blocks.icon_with_text.name",
"settings": [
{
"type": "select",
"id": "layout",
"options": [
{
"value": "horizontal",
"label": "t:sections.main-product.blocks.icon_with_text.settings.layout.options__1.label"
},
{
"value": "vertical",
"label": "t:sections.main-product.blocks.icon_with_text.settings.layout.options__2.label"
}
],
"default": "horizontal",
"label": "t:sections.main-product.blocks.icon_with_text.settings.layout.label"
},
{
"type": "header",
"content": "t:sections.main-product.blocks.icon_with_text.settings.content.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.content.info"
},
{
"type": "select",
"id": "icon_1",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "heart",
"label": "t:sections.main-product.blocks.icon_with_text.settings.icon_1.label"
},
{
"type": "image_picker",
"id": "image_1",
"label": "t:sections.main-product.blocks.icon_with_text.settings.image_1.label"
},
{
"type": "inline_richtext",
"id": "heading_1",
"default": "Heading",
"label": "t:sections.main-product.blocks.icon_with_text.settings.heading_1.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.heading.info"
},
{
"type": "select",
"id": "icon_2",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "return",
"label": "t:sections.main-product.blocks.icon_with_text.settings.icon_2.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.main-product.blocks.icon_with_text.settings.image_2.label"
},
{
"type": "inline_richtext",
"id": "heading_2",
"default": "Heading",
"label": "t:sections.main-product.blocks.icon_with_text.settings.heading_2.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.heading.info"
},
{
"type": "select",
"id": "icon_3",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "truck",
"label": "t:sections.main-product.blocks.icon_with_text.settings.icon_3.label"
},
{
"type": "image_picker",
"id": "image_3",
"label": "t:sections.main-product.blocks.icon_with_text.settings.image_3.label"
},
{
"type": "inline_richtext",
"id": "heading_3",
"default": "Heading",
"label": "t:sections.main-product.blocks.icon_with_text.settings.heading_3.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.heading.info"
}
]
}
],
"settings": [
{
"type": "product",
"id": "product",
"label": "t:sections.featured-product.settings.product.label"
},
{
"type": "select",
"id": "gallery_layout",
"options": [
{
"value": "stacked",
"label": "t:sections.main-product.settings.gallery_layout.options__1.label"
},
{
"value": "columns",
"label": "t:sections.main-product.settings.gallery_layout.options__2.label"
},
{
"value": "thumbnail",
"label": "t:sections.main-product.settings.gallery_layout.options__3.label"
},
{
"value": "thumbnail_slider",
"label": "t:sections.main-product.settings.gallery_layout.options__4.label"
}
],
"default": "thumbnail_slider",
"label": "t:sections.main-product.settings.gallery_layout.options__4.label"
},
{
"type": "select",
"id": "mobile_thumbnails",
"options": [
{
"value": "columns",
"label": "t:sections.main-product.settings.mobile_thumbnails.options__1.label"
},
{
"value": "show",
"label": "t:sections.main-product.settings.mobile_thumbnails.options__2.label"
},
{
"value": "hide",
"label": "t:sections.main-product.settings.mobile_thumbnails.options__3.label"
}
],
"default": "hide",
"label": "t:sections.main-product.settings.mobile_thumbnails.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "checkbox",
"id": "secondary_background",
"default": false,
"label": "t:sections.featured-product.settings.secondary_background.label"
},
{
"type": "header",
"content": "t:sections.featured-product.settings.header.content",
"info": "t:sections.featured-product.settings.header.info"
},
{
"type": "select",
"id": "media_size",
"options": [
{
"value": "small",
"label": "t:sections.main-product.settings.media_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.main-product.settings.media_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.main-product.settings.media_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.main-product.settings.media_size.label",
"info": "t:sections.main-product.settings.media_size.info"
},
{
"type": "checkbox",
"id": "constrain_to_viewport",
"default": true,
"label": "t:sections.main-product.settings.constrain_to_viewport.label"
},
{
"type": "select",
"id": "media_fit",
"options": [
{
"value": "contain",
"label": "t:sections.main-product.settings.media_fit.options__1.label"
},
{
"value": "cover",
"label": "t:sections.main-product.settings.media_fit.options__2.label"
}
],
"default": "contain",
"label": "t:sections.main-product.settings.media_fit.label"
},
{
"type": "select",
"id": "media_position",
"options": [
{
"value": "left",
"label": "t:sections.featured-product.settings.media_position.options__1.label"
},
{
"value": "right",
"label": "t:sections.featured-product.settings.media_position.options__2.label"
}
],
"default": "left",
"label": "t:sections.featured-product.settings.media_position.label",
"info": "t:sections.featured-product.settings.media_position.info"
},
{
"type": "select",
"id": "image_zoom",
"options": [
{
"value": "lightbox",
"label": "t:sections.main-product.settings.image_zoom.options__1.label"
},
{
"value": "hover",
"label": "t:sections.main-product.settings.image_zoom.options__2.label"
},
{
"value": "none",
"label": "t:sections.main-product.settings.image_zoom.options__3.label"
}
],
"default": "lightbox",
"label": "t:sections.main-product.settings.image_zoom.label",
"info": "t:sections.main-product.settings.image_zoom.info"
},
{
"type": "checkbox",
"id": "hide_variants",
"default": false,
"label": "t:sections.main-product.settings.hide_variants.label"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"default": false,
"label": "t:sections.featured-product.settings.enable_video_looping.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.featured-product.presets.name",
"blocks": [
{
"type": "text",
"settings": {
"text": "{{ section.settings.product.vendor }}",
"text_style": "uppercase"
}
},
{
"type": "title"
},
{
"type": "price"
},
{
"type": "variant_picker"
},
{
"type": "quantity_selector"
},
{
"type": "buy_buttons"
},
{
"type": "share"
}
]
}
]
}
{% endschema %}
- Navigate to section-featured-product.css. Replace the whole code with the below one.
.featured-product .product__media-list {
width: 100%;
margin: 0;
padding-bottom: 0;
}
.featured-product .product-media-container {
margin-bottom: var(--media-shadow-vertical-offset);
max-width: 100%;
}
.featured-product .product__media-item {
padding-left: 0;
width: 100%;
}
.background-secondary .featured-product {
padding: 2.5rem;
}
.featured-product .share-button:nth-last-child(2) {
display: inline-flex;
}
.share-button + .product__view-details {
display: inline-flex;
float: right;
align-items: center;
}
.share-button + .product__view-details::after {
content: "";
clear: both;
display: table;
}
@media screen and (min-width: 750px) {
.featured-product .product__media-item {
padding-bottom: 0;
}
.background-secondary .featured-product {
padding: 5rem;
}
}
@media screen and (min-width: 990px) {
.background-secondary .featured-product:not(.product--no-media) > .product__info-wrapper {
padding: 0 0 0 5rem;
}
.background-secondary .featured-product:not(.product--no-media).product--right > .product__info-wrapper {
padding: 0 5rem 0 0;
}
.featured-product:not(.product--no-media) > .product__info-wrapper {
padding: 0 7rem;
}
.background-secondary .featured-product {
padding: 6rem 7rem;
position: relative;
z-index: 1;
}
}
.product--thumbnail .product__media-item:not(.is-active),
.product--thumbnail_slider .product__media-item:not(.is-active) {
display: none;
}
Hi @TheDapperLove ,
I’d be happy to assist you with this! To achieve the desired result, we’ll need to make some code modifications to your theme. Don’t worry, it’s a straightforward process.
To get started, please follow these steps:
- Log in to your Shopify Admin panel.
- Navigate to Online Store > Theme > Edit code.
- In the code editor, locate the files that match the attached files I’ve provided. Simply replace the existing content with the new code I’ve included.
Tip: If you’re having trouble viewing the attached files, you can rename them to .txt to easily access the code.
Let me know if you have any questions or need further assistance!
Thank you Roy for your help so far you have been so helpful. It would seem as if we are closer to what I am looking for but not quite. On DESKTOP view for some reason the THIRD to last
media file uploaded (Which is also a variant) shows first instead of the first media product uploaded, and in MOBILE view does not slide or swipe at all, with the same issue as the last media file uploaded which is the blue cup shown. Any additional help would be appreciated! Once we get a solution I will 100% mark as the solution! I know Shopify themes can be tricky!
Forgot to mention, the PILL style variants are shown and a radius circle instead of a PILL variant section
Hey @TheDapperLove ,
I’m happy to help! To make the implementation process as smooth as possible, could you please share your store access with me? This will help me tailor the functionality to your specific needs, since currently the implementation I have made in my store hasn’t broke any UI.
Thank you Roy for the help. How do I go about sharing access to you?
Hi i had the same issue and was trying your fix, it works on desktop but not mobile. do you have a fix for this please? Thanks