Hello,
is it possible to add arrows under the gallery in the product page with the Prestige Theme?
Thanks in advance
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thanks, www.analogmarketplace.com
thanks can you please share product page code so i will check and update
how is the code called ? I can’t find it
oh sorry yes, please go to edit code >>>> section >>> product section or main-product
{%- capture section_settings -%}
{
“enableHistoryState”: true,
“showInventoryQuantity”: {% if section.settings.show_inventory_quantity %}true{% else %}false{% endif %},
“showThumbnails”: {% if section.settings.show_thumbnails %}true{% else %}false{% endif %},
“inventoryQuantityThreshold”: {{ section.settings.inventory_quantity_threshold }},
“enableImageZoom”: {% if section.settings.enable_image_zoom %}true{% else %}false{% endif %},
“showPaymentButton”: {{ section.settings.show_payment_button | json }},
“useAjaxCart”: {% if settings.cart_type == ‘drawer’ %}true{% else %}false{% endif %}
}
{%- endcapture -%}
{%- capture action_list_items -%}
{%- if section.settings.enable_image_zoom -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- capture product_aside -%}
{% render 'cta-buttons' %}
{% include 'icon' with 'plus' %}
{%- endif -%}
{%- if section.settings.show_share_buttons -%}
{% include 'icon' with 'share' %}
{% include 'icon' with 'close' %}
{%- endif -%}
{%- endcapture -%}
{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: ‘large’ | prepend: ‘https:’ -%}
{%- comment -%}
PRODUCT GALLERY
{%- endcomment -%}
{%- assign initial_image_id = product.featured_image.id -%}
{%- assign initial_image_index = 0 -%}
{%- assign image_count = 0 -%}
{%- capture slideshow_images -%}
{%- for image in product.images -%}
{%- if image.alt == ‘featured’ or image.alt == ‘featured mobile’ -%}
{%- continue -%}
{%- endif -%}
{%- if image.id == product.selected_or_first_available_variant.image.id -%}
{%- assign initial_image_index = image_count -%}
{%- assign initial_image_id = image.id -%}
{%- endif -%}
{%- include ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200,1400,1600’, image: image -%}
{%- assign is_video = false -%}
{%- if image.alt contains ‘YouTube’ or image.alt contains ‘player.vimeo.com’ -%}
{%- assign is_video = true -%}
{%- endif -%}
{% assign image_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
![{{ image.alt | escape }}]()
<img class=“Image–lazyLoad Image–fadeIn”
{% if initial_image_id == image.id %}src=“{{ image | img_url: ‘250x’ }}”{% endif %}
data-src=“{{ image_url }}”
data-widths=“[{{ supported_sizes }}]”
data-sizes=“auto”
data-expand=“-100”
alt=“{{ image.alt | escape }}”
data-max-width=“{{ image.width }}”
data-max-height=“{{ image.height }}”
data-original-src=“{{ image | img_url: ‘master’ }}”>
{%- if is_video -%}
{% include ‘icon’ with ‘play’ %}
{%- endif -%}
{%- assign image_count = image_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}
{%- if product.images.size > 0 -%}
{%- if action_list_items != blank -%}
{{ action_list_items }}
{%- endif -%}
{%- if image_count > 1 -%}
{%- if section.settings.show_thumbnails -%}
{%- for image in product.images -%}
{%- if image.alt == 'featured' or image.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}
![]()
{%- assign is_video = false -%}
{%- if image.alt contains ‘YouTube’ or image.alt contains ‘player.vimeo.com’ -%}
{%- assign is_video = true -%}
{%- endif -%}
{%- if is_video -%}
{% include ‘icon’ with ‘play’ %}
{%- endif -%}
{%- endfor -%}
{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“pageDots”: {% if image_count > 1 %}true{% else %}false{% endif %},
“adaptiveHeight”: true,
“wrapAround”: false,
“watchCSS”: true,
“dragThreshold”: 8,
“initialIndex”: {{ initial_image_index }}
}
{%- endcapture -%}
{{ slideshow_images }}
{%- capture product_aside -%}
{%- comment -%}
PRODUCT TABS
{%- endcomment -%}
{%- include ‘product-tabs’ -%}
{%- comment -%}
PRODUCT WEAR IT WITH
We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
{%- endcomment -%}
{%- for tag in product.tags -%}
{%- if tag contains ‘__with’ -%}
{%- assign product_handle = tag | split: ‘__with:’ | last -%}
{%- assign associated_product = all_products[product_handle] -%}
{%- if associated_product != empty -%}
{{ 'product.buy_it_with.title' | t }}
{% include ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_price_on_hover: false %}
{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- include 'product-meta', show_description: true -%}
{%- include 'product-form' -%}
{%- if section.settings.description_below_add_to_cart -%}
{{ product.description }}
{%- endif -%}
{%- if product_aside != blank and image_count > 0 -%}
{%- endif -%}{%- if action_list_items != blank -%}
{{ action_list_items }}
{%- endif -%}
{%- if product_aside != blank -%}
{{- product_aside -}}
{%- endif -%}
{%- comment -%}
OFF SCREEN ELEMENTS
{%- endcomment -%}
{{- product_popovers -}}
{{- product_modals -}}
{%- comment -%}
FEATURED IMAGE
We allow merchants to use one image as a “featured image” by adding the alt tag “featured”
{%- endcomment -%}
{%- for image in product.images -%}
{%- if image.alt == ‘featured’ -%}
{%- assign desk_featured_image = image -%}
{%- endif -%}
{%- if image.alt == ‘featured mobile’ -%}
{%- assign mobile_featured_image = image -%}
{%- endif -%}
{%- endfor -%}
{%- if desk_featured_image or mobile_featured_image -%}
{%- assign mobile_featured_image = mobile_featured_image | default: desk_featured_image -%}
{%- assign desk_featured_image = desk_featured_image | default: mobile_featured_image -%}
{%- else -%}
/* Very ugly haha */ @media screen and (max-width: 640px) { #shopify-section-{{ section.id }} + .shopify-section--bordered { border-top: 0; } #shopify-section-{{ section.id }} + .shopify-section--bordered > .Section { padding-top: 0; } }{%- endif -%}
{%- comment -%}
MODALS
If we have some videos, we implement them as modal
{%- endcomment -%}
{%- for image in product.images -%}
{%- if image.alt contains ‘YouTube’ or image.alt contains ‘player.vimeo.com’ -%}
{% if image.alt contains 'youtube.com/embed' %}
{% else %}
{% endif %}
{% include ‘icon’ with ‘close’ %}
{%- comment -%}
PHOTO SWIPE
This is the root container for the zoom functionality. Must not be removed, as order element is important.
{%- endcomment -%}
{%- if section.settings.enable_image_zoom -%}
{% include 'icon' with 'arrow-left' %}
{% include 'icon' with 'close' %}
{% include 'icon' with 'arrow-right' %}
{% schema %}
{
“name”: “Product page”,
“class”: “shopify-section–bordered”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: “Show social sharing buttons”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “description_below_add_to_cart”,
“label”: “Description below add to cart”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“default”: true,
“info”: “Some colors appear white? Learn more.”
},
{
“type”: “checkbox”,
“id”: “show_color_carousel”,
“label”: “Show color carousel”,
“info”: “A selector will appear with variant image previews when choosing colors.”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“label”: “Show quantity selector”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_inventory_quantity”,
“label”: “Show inventory quantity”,
“info”: “Make sure that your inventory is tracked. Learn more.”,
“default”: false
},
{
“type”: “range”,
“id”: “inventory_quantity_threshold”,
“label”: “Inventory quantity threshold”,
“info”: “Only show inventory quantity if below threshold. Choose 0 to always show.”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 0
},
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”,
“default”: false
},
{
“type”: “header”,
“content”: “Product images”
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fill”,
“label”: “Fill screen”
}
],
“default”: “large”
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: “Enable zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_thumbnails”,
“label”: “Show thumbnails”,
“info”: “Only applicable on large screens”,
“default”: true
},
{
“type”: “header”,
“content”: “Tabs”
},
{
“type”: “page”,
“id”: “tab_page_1_handle”,
“label”: “First page”
},
{
“type”: “page”,
“id”: “tab_page_2_handle”,
“label”: “Second page”
},
{
“type”: “paragraph”,
“content”: “The theme also allows you to add specific tabs for a given product only. Learn more about this feature.”
},
{
“type”: “header”,
“content”: “Reviews”
},
{
“type”: “paragraph”,
“content”: “You need to install Shopify’s free Product Reviews app before enabling this option.”
},
{
“type”: “checkbox”,
“id”: “reviews_enabled”,
“label”: “Enable”,
“default”: false
},
{
“type”: “header”,
“content”: “Featured image”
},
{
“type”: “paragraph”,
“content”: “You can highlight an image after product tabs by adding the ALT tag "featured" to a given image. Learn more.”
},
{
“type”: “select”,
“id”: “featured_image_size”,
“label”: “Section size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “large”
}
]
}
{% endschema %}.cta-buttons>div img {
max-width: 120px !IMPORTANT;
}
.cta-buttons>div {
padding: 0px 10px;
}
Here is the code.
thanks for code i have update code can you try its
i will give code more can you please add first arrow code after i will give smaller arrow css code
okay sure, should I insert the code again ?
yes, please
Okay i did it.
thanks can you please add this coded
- Go to Online Store->Theme->Edit code
- Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.Product__Slideshow button.flickity-prev-next-button.next {
right: 10px;
}
button.flickity-prev-next-button.next {}
.Product__Slideshow button.flickity-prev-next-button.previous {
left: 10px;
}
.Product__Slideshow .flickity-prev-next-button {
box-shadow: none;
margin-top: 5px;
}
.Product__Slideshow .flickity-prev-next-button svg {
width: 13px;
height: 13px;
}
Great, thank you very much!
its my pleasure to help us
Hi
How to add arrows to my images on product page in Handy theme?