I know how to change the overall social media image for all pages in the preferences section. However, this is not what I am trying to do. I want to change the social media image for different pages depending on what the page is talking about. I have multiple pages on my website that talk about different things.
For example: https://vermillo.com/pages/ledger-nano-s
On this page I want the social media image to be the ledger nano S. However, shopify defaults to whatever is set as the overall social media sharing image in preferences. I do not want it to do this.
My question is: How do i change the social media image for different pages instead of using the one set by default?
1 Like
In your theme.liquid file, there is a social meta tag liquid file. The social share image is controlled by the og tags. If you change thesocial meta tag liquid file, the social share image of each page can be changed.
1 Like
Can you explain further? I am not sure what I need to do. here is the code for my theme.liquid
{%- if settings.favicon != blank -%}> > {%- endif -%}> > {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}> > {%- endunless -%}> > > > {% if page_description %}> > {% endif %}> > {% render âmeta-tagsâ %}> > > {{ content_for_header }}> > {%- liquid> assign body_font_bold = settings.type_body_font | font_modify: âweightâ, âboldâ> assign body_font_italic = settings.type_body_font | font_modify: âstyleâ, âitalicâ> assign body_font_bold_italic = body_font_bold | font_modify: âstyleâ, âitalicâ> %}> > {% style %}> {{ settings.type_body_font | font_face: font_display: âswapâ }}> {{ body_font_bold | font_face: font_display: âswapâ }}> {{ body_font_italic | font_face: font_display: âswapâ }}> {{ body_font_bold_italic | font_face: font_display: âswapâ }}> {{ settings.type_header_font | font_face: font_display: âswapâ }}> > :root {> --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};> --font-body-style: {{ settings.type_body_font.style }};> --font-body-weight: {{ settings.type_body_font.weight }};> > --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};> --font-heading-style: {{ settings.type_header_font.style }};> --font-heading-weight: {{ settings.type_header_font.weight }};> > --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};> --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};> > --color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};> --color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};> --color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};> --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};> --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};> --color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};> --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};> --payment-terms-background-color: {{ settings.colors_background_1 }};> > --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};> --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};> --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};> --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};> > --page-width: {{ settings.page_width | divided_by: 10 }}rem;> --page-width-margin: {% if settings.page_width == â1600â %}2{% else %}0{% endif %}rem;> }> > *,> *::before,> *::after {> box-sizing: inherit;> }> > html {> box-sizing: border-box;> font-size: calc(var(âfont-body-scale) * 62.5%);> height: 100%;> }> > body {> display: grid;> grid-template-rows: auto auto 1fr auto;> grid-template-columns: 100%;> min-height: 100%;> margin: 0;> font-size: 1.5rem;> letter-spacing: 0.06rem;> line-height: calc(1 + 0.8 / var(âfont-body-scale));> font-family: var(âfont-body-family);> font-style: var(âfont-body-style);> font-weight: var(âfont-body-weight);> }> > @media screen and (min-width: 750px) {> body {> font-size: 1.6rem;> }> }> {% endstyle %}> > {{ âbase.cssâ | asset_url | stylesheet_tag }}> > {%- unless settings.type_body_font.system? -%}> > {%- endunless -%}> {%- unless settings.type_header_font.system? -%}> > {%- endunless -%}> > {%- if settings.predictive_search_enabled -%}> > {%- endif -%}> > > > > > > {{ âaccessibility.skip_to_textâ | t }}> > > {% section âannouncement-barâ %}> {% section âheaderâ %}> > > {% if template != âindexâ %}>
{% section âfooterâ %}> {% endif %}> > > - {{ âaccessibility.refresh_pageâ | t }}>
{%- if settings.predictive_search_enabled -%}> > {%- endif -%}> > > > > > > {% render âhextom_fsb_mainâ, product: product, customer: customer %}> > {% render âbanana-stand-footerâ %}> >