A widget should look like it belongs to your store. The layout editor groups its settings into tabs so you can tune the grid, the colours, the product cards and more until the widget inherits your brand instead of standing out as a third-party block.
The settings tabs
The editor organises everything into tabs. The names below match the dashboard.
- Layout: choose the widget layout itself (Grid, Carousel, Story and so on).
- Header & Footer: the title, subtitle, follow button and footer content.
- Gallery: the grid itself, columns, mobile columns, posts per page, spacing, video settings and sorting.
- Advance: gallery width and height, custom CSS, colours, captions, the powered-by line and pop-up behaviour.
- Products: how product cards and shopping elements appear (covered below).
- Filters & Sorting: the on-widget filters and the default sort order.
- Posts: image format, hover effect and repost handling.
- Brand & Colors: global colours for buttons, arrows, carousel dots and play icons, applied widget-wide.
Per-tab settings reference
Each tab has a dedicated reference card listing every option, its accepted values and its default. Use these when you need the exact setting rather than the overview.
Settings reference by tab
Columns, mobile columns, posts per page, pagination, spacing, video settings and sorting.
Width and height, custom CSS, colours, captions, pop-up behaviour and custom loader.
Shop button, overlay styles, price / discount / rating toggles, panel style, tap-to-reveal and hotspots.
Title, subtitle, follow button, social header and the footer CTA.
Global accent, button, arrow, dot and play-icon colours.
Content-selection filters and the default sort order.
Image format, hover effect and repost handling.
Style a widget
- Open the layout editor. From your gallery, open the layout editor and use the tabs across the top to move between setting groups.
- Set the grid. On the Gallery tab, set Columns and Mobile Columns, posts per page and post spacing so the grid sits comfortably in your section.
- Match your brand colours. On Brand & Colors, set the button, arrow, dot and play-icon colours so the widget matches your theme. The Advance tab holds background and text colours.
- Tune the product cards. On the Products tab, set the shop button text and position, what the cards show, and the hotspot pin style. See the options below.
- Preview, then save. Preview on desktop and mobile, adjust, then save. The live widget updates to match.
The Products tab options
The Products tab controls how shopping elements appear on tagged posts. The real settings include:
- Shop Button Position and Shop Button Text (the default is Buy Now), plus separate text for the cart action and the modal.
- Show Product Description, Hide Product Price, Show Discount Percentage and Show Discount Price on Right.
- Multiple Products Display (for example carousel) for posts with more than one tagged product.
- Show Shopify Product Options and Show Wishlist Button.
- Product Overlay Click Action: Open Product Page (PDP) or Open Cart Modal.
- Product Panel Style: how the product panel opens (Auto, Bottom Sheet, Full Screen or Modal).
- Tap to reveal product tags (Instagram-style): hide pins until the shopper taps the image.
- Hotspot Pin Style, Hotspot Pin Color and Hotspot Beacon Style for grid hotspots (covered in the hotspot guide).
- Currency Symbol, Tax Disclaimer Text and the product rating options.
Common issues
If a style change doesn’t appear on the store, you may be looking at a cached page; hard-refresh and re-check. If colours look off, confirm you saved on the same gallery you embedded. Some product options only apply when the layout supports that feature (hotspot styles, for example, apply to grid hotspots).
Related guides
- Create a gallery and choose a layout: /help/create-a-gallery-choose-layout
- Add product links and hotspots: /help/add-product-links-and-hotspots
- Make widgets responsive on mobile: /help/mobile-responsive-widgets
