Brooklyn Theme missing social share buttons

[hugon789]

Hi everyone,

I'm using Brooklyn theme and have enabled social share options in theme settings in my product page. Why aren't those buttons showing up?

Shop URL: https://fxpopup.com/ 

Thanks.

[Trevor]

@hugon789 

The buttons should be appearing automatically based on what I can see in my test store. Did you create a new product page template for your theme? Or did you change the coding of the theme? 

It may have been removed if you have made any changes, but adding it back into the template should resolve the issue. The code is: 

{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}

Let me know if that works

[hugon789]

It worked. Thank you very much.

Mind if I ask if there's a way to place those buttons at a higher position? Like under the "Buy Now" button? Thank you. 

[Trevor · Accepted solution]

@hugon789 

Find the following code: 

<div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

</div>

Paste the code under the closing </div> - In my example below, that would be line 244

Just remember to remove the previous code or you'll see the buttons appear twice. 

[hugon789]

It worked like magic. Thank you very much. 

Just one extra question: Is there a way to increase the size of these buttons? Thank you again.

[Trevor]

@hugon789 

Adding a new line of code to the CSS file would be the best route as the file can't be reverted to older versions. Adding a new line will make it easier to edit/remove should any changes need to be made. 

The size of the buttons is connected to the font, so adding the following snippet to the bottom of the "theme.scss.liquid" file under the "Assets" folder will do the trick. Change the value to increase/decrease the size. 

.social-sharing span {
   font-size: 20px;
}

[hugon789]

Thanks for the help!